Haki CSS i komentarze warunkowe dla niepokornego Internet Explorera

Dlaczego dyskryminuję IE?

Bo mam przez tą przeglądarkę więcej pracy. Pracy której by nie było, gdyby wielce wykształceni, po jeszcze większych pod względem stopnia prestiżu uczelniach programiści potrafili „sklepać” ten twór porządnie, wg. istniejących od wielu lat standardów. I nie tylko mi to przysparza nerwów. Wiem, wiem – za chwilę znajdzie się tutaj jakiś specjalista z ogromnej korporacji developerskiej który wytknie mi, że nie szanuję przez to swoich klientów. Ich akurat traktuję poważnie i poświęcam swój czas w takiej ilości, aby zrobić co ma być wykonane porządnie. W hobbistycznych projektach powiem dobitnie i szczerze… w pewnym stopniu lekceważę użytkowników tegoż browsera. Przynajmniej tych którzy świadomie go używają i co najmniej w wersjach niższych niż siódemka. Bo z całej serii chłamu którą wydała korporacja z Redmond tylko ostatnia, „stabilna” (z nazwy) wersja choć odrobinę pokrywa się z wyznaczonymi regułami. Użytkownikom wersji szóstej… współczuję, a ci którzy z premedytacją korzystają z jeszcze starszych odsłon nie zasługują nawet na to.

Żeby nie być gołosłownym wypadałoby podać kilka przyczyn moich ostrych słów.

• ilość wykrywanych luk i prędkość ich łatania jest niekiedy zastraszająco długa – przykładem są tutaj niektóre błędy opisane na Secunii (dla IE7 w tym przypadku).
• fakt braku wsparcia dla wersji niższych niż szósta tej przeglądarki, a co za tym idzie niełatanie dziur wykrywanych w nich (niemiło byłoby wstać kiedyś rano i zobaczyć, że konto bankowe z którego korzystaliśmy dzień wcześniej poprzez przeglądarkę z Redmond jest puste, prawda?).
• pomimo zrobienia kilku kroków w przód nadal MSIE jest jednym z wolniejszych tego typu rozwiązań.
• jest wiele alternatyw takich jak Firefox, Opera (recenzja Opery 9.6x), czy Safari. Są one proste w obsłudze, wręcz intuicyjne, a dzięki zaimplementowanym, dodatkowym modułom, czy wtyczkom potrafią w znaczny sposób pomóc w surfowaniu po sieci.
• alternatywne przeglądarki względnie poprawnie interpretują standardy sieciowe dotyczące wyświetlania stron przez co nigdy nie zobaczysz prawidłowo napisanej strony w niepoprawnie ułożonym stylu.

To tylko namiastka różnic. W sieci znajduje się wiele artykułów pokazujących wyższość przeglądarek, jeszcze kilka lat temu niszowych od tej promowanej przez amerykańskiego giganta. Dlatego nawracajcie swoich znajomych, bo w tym wypadku naprawdę „pozornie inne” znaczy lepsze…

Nie w jeden dzień Rzym zbudowano…

Pomimo kilku słów mojej dezaprobaty, i wielu przeszłych lat negatywnych opinii innych ludzi nie da się oczywiście z dnia na dzień nawrócić wszystkich „niewiernych” :] Dlatego meritum dzisiejszego wpisu będzie tematyka komentarzy warunkowych i haków dla „zbuntowanej” przeglądarki.

Różne typy komentarzy.

Ukryte komentarze warunkowe

Od wersji 5 Internet Explorer obsługuje ukryte (pozytywne) komentarze warunkowe (z angielskiego downlevel-hidden (positive) conditional comments). Obsługuje, ale tylko w wersji pod Windowsem (IE/Win), pod Macintoshem już nie (IE/Mac). W zależności od treści w nich zawartych są one widzialne lub nie przez daną przeglądarkę. Jest to szczególnie przydatne jeżeli dany element strony musimy inaczej opisać w IE, niż w jej zamiennikach. Za pewnie sami twórcy zorientowali się wtedy jaki dziki twór stworzyli i choć ciut chcieli się zrehabilitować pozwalając webmasterom chociażby w nadmiarowy sposób tworzyć strony zgodne z ich „dziełem”.

<!--[if IE]>
kod pomiędzy tymi komentarzami zadziała tylko w odsłonach IE
<![endif]-->

Oto przykład najprostszego zastosowania komentarzy. Można ją wykorzystać np. w sekcji head w celu zaimportowania arkusza stylów wykorzystywanego przez produkt z Doliny Krzemowej.

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie_only.css" />
<![endif]-->

Pierwszy komentarz można także stosownie modyfikować. Obowiązują tu elementy logiczne takie jak negacja, czy znane z systemów *nixowych operatory porównania. Ważnym jest także, aby wiedzieć, że komentarze te istnieją tylko w kodzie (X)HTML, więc jeśli posiadamy na stronie dla przykładu integralny arkusz stylów to nie możemy tychże warunków używać wewnątrz kodu CSS.

<!-- dla IE 5: --> <!--[if IE 5]>
<!-- dla IE niższego niż 6: --> <!--[if lt IE 6]>
<!-- dla IE równego lub niższego od 7: --> <!--[if lte IE 7]>
<!-- dla IE innego niż 5.5: --> <!--[if !IE 5.500]>
<!-- dla IE równego lub wyższego niż 6: --> <!--[if gte IE 6]>
<!-- dla IE wyższego niż 5: --> <!--[if gt IE 5]>
<!-- dla IE różnego od 6: --> <!--[if !(IE 6)]>
<!-- dla IE 5: --> <!--[if (IE 5)]>
<!-- dla IE 6 i IE 7: --> <!--[if (gt IE 5)&(lte IE 7)]>
<!-- dla IE 5 lub IE 6: --> <!--[if (IE 5)|(IE 6)]>

Jak można zobaczyć po czwartym przykładzie dozwolone jest używanie wartości „po przecinku”. Jest to tzw. wektor wersji (z angielskiego version vector) i trzeba w nim użyć 4rech znaków. W praktyce nie używa się tego prócz wersji 5.500, gdyż różnice pomiędzy poszczególnymi, bardziej skrupulatnymi odsłonami są niewielkie.

Dozwolone są także łączenia warunków za pomocą znaku & lub | oraz określanie wersji przeglądarki poprzez użycie nawiasów.

Operatory porównania wraz z negacją.

Jest także jeszcze jedna konstrukcja ukrytych komentarzy która pozwala na wysyłanie partii kodu tylko do przeglądarek innych niż IE (a dokładniej ukrywa ona go przed Internet Explorerem). Początkowo miały to wykonywać komentarze odkryte (o których będzie w dalszej części artykułu), ponieważ jednak ingerują one w prawidłowość struktury HTML to można to zrobić poprzez następującą formę.

<!--[if !IE]><!-->
kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE
<!--<![endif]-->

Posiłkując się ostatnim wersem możemy skonstruować kod który będzie wyświetlał różny tekst w zależności od rodzaju przeglądarki.

<body>
	<p>
		Używasz
		<!--[if !IE]><!-->
		diabelsko dobrej, alternatywnej przeglądarki!
		<!--<![endif]-->
		<!--[if lt IE 7]>
		archaicznego i dzurawego kodu insynującego miano przeglądarki :(
		<![endif]-->
		<!--[if IE 7]>
		przeglądarki która pretenduje do tego miana... z mizernym skutkiem :/
		<![endif]-->
	</p>
</body>

Co w rezultacie da (zauważ, że wynik będzie się różnił w zależności od używanej przez Ciebie przeglądarki):

Używasz: diabelsko dobrej, alternatywnej przeglądarki!

Ciekawostka w postaci odkrytych komentarzy warunkowych

Odkryte (negatywne) komentarze warunkowe (z angielskiego downlevel-revealed (negative) conditional comments) jak już wspomniałem miały służyć do ukrywania kodu bądź tekstu przed przeglądarkami IE lub przed ich konkretnymi wersjami (np. przed wersjami obsługującymi ukryte komentarze warunkowe, czyli >= 5.0). Ich użycie powoduje, że strona przestaje być prawidłowym dokumentem (X)HTML, dlatego nie zalecam ich stosowania.

<![if !IE]>
kod pomiędzy tymi komentarzami zadziała w przeglądarkach innych niż IE
<![endif]>

Zaleca się jednak używanie alternatywnej, już wspomnianej w poprzednim paragrafie techniki „pozytywnych komentarzy”.

<!--[if !IE]><!-->
<script src="ie_javascript.js" type="text/javascript"></script>
<!--<![endif]-->

Anglojęzyczne tłumaczenie specyfiki komentarzy warunkowych można zaczerpnąć z MSDN.

Elementarz komentarzy warunkowych w JavaScript / JScript!

Nie każdy wie, że od 4rtej odsłony MSIE także komentarze warunkowe dostępne są w kodzie Javascript / JScript.

<script type="text/javascript">
/*@cc_on
Kod warunkowy
@*/
</script>

W dyrektywę /*@cc_on i @*/ wstawiamy kod warunkowy. Pierwsza fraza pochodzi od angielskiego Conditional Compilation, czyli po polsku kompilacja warunkowa.

Same warunki opierają się o dyrektywy @if (jeżeli), @elif (inaczej jeżeli), @else (ostatecznie jeżeli) i @end (ostateczna wytyczna). Same użycie instrukcji warunkowych nie pozwoli nam na sprawdzenie jakiej przeglądarki używa użytkownik. Należy po danej nazwie dyrektywy dodać @*/ co spowoduje, że zostanie wykonana ona w przeglądarkach alternatywnych.

/*@cc_on
   @if (@_x86)
      document.write("Przeglądarka IE, 32bitowy procesor Intela")
   @else
      document.write("Przeglądarka IE, inny procesor");
   @end
@*/

Nie umieściliśmy po pierwszym warunku podanego wyżej ciągu znaków, dlatego obydwa warunki zostaną wykonane w wypadku Internet Explorera. Można jednak zmusić skrypt do odniesienia się w przypadku @else tylko jeżeli nie korzystamy z IE.

/*@cc_on
   /*@if (@_x86)
      document.write("Przeglądarka IE, 32bitowy procesor Intela")
   @else @*/
      document.write("Przeglądarka alternatywna, inny procesor");
   /*@end
@*/

W tym wypadku część document.write("Przeglądarka alternatywna, inny procesor"); została odkomentowana i zostanie wykonana w przypadku użycia alternatywnych browserów.

Można spytać w tym momencie: „w jaki sposób wykryć wersję Microsoftowskiej przeglądarki?”. W dwóch wcześniejszych przykładach zawarłem warunki z argumentem tego typu: @_x86. Jest to jedna z wbudowanych, przedefiniowanych zmiennych których ogółem jest dwanaście (o tylu przynajmniej wiem, a jedną z nich celowo pominąłem z racji zwracania stałej wartości).

Predefiniowane zmienne kompilacji warunkowych.

Dla przykładu wykorzystując wiedzę o tym, że wersja JScript 3.x była zaimplementowana w IE4, wersja 4 do 5.5 w IE5+, a 5.6 w IE6 możemy poprzez użycie zmiennej @_jscript_version utworzyć odpowiednie komentarze warunkowe.

/*@cc_on
   /*@if (@_jscript_version < 4)
      document.write("Internet Explorer 4");
   @elif (@_jscript_version <= 5.5)
      document.write("Internet Explorer 5+");
   @elif (@_jscript_version == 5.6)
      document.write("Internet Explorer 6/7");
   @else @*/
      document.write("Alternatywa :D");
   /*@end
@*/

Ostatecznie jeżeli będziemy mieć taką potrzebę możemy posiłkować się użyciem własnych zmiennych, definiując je poprzez dyrektywę @set.

/*@cc_on
   @set zmiennax = 4;
   @set zmiennay = @_jscript_version;
   /*@if (@zmiennay != @zmiennax)
      document.write("To nie jest IE4!")
   @else
      document.write("IE4 :(");
   @end
@*/

Ciekawostka numer dwa – tag comment

Drugą ciekawostką dzisiejszego artykułu której nie powinno się stosować z tego samego powodu co poprzedniej jest tag comment. Nie jest to standardowy znacznik ani HTML-a, ani XHTML-a. IE potraktuje go jako zwykły komentarz. Inne przeglądarki powinny za to wyświetlić tekst znajdujący się w nim. Dodatkową różnicą jest fakt, że w tym wypadku i IE/Win, i IE/Mac tak samo wspierają tą „funkcjonalność”, przez co tekst będzie niewidoczny w obydwu wersjach.

<p>To <comment>nie</comment> jest MSIE.</p>

To nie jest MSIE.

Omijamy niedoskonałości interpretowania CSS przez MSIE (haki)

Haki CSS to konstrukcje zmieszania różnorodnych znaków z regułami dostępnymi standardowo w arkuszach stylów. Nowoczesne przeglądarki takie konstrukcje w zależności od formy pominą lub zmodyfikują do prawidłowego stylu. IE ich nie ignoruje, po prostu na nich operuje. Nawet w siódmej odsłonie…

Standardowym hakiem jest użycie * przed daną dyrektywą CSS. Zadziała ona we wszystkich wersjach tej przeglądarki, poczynając od piątki i patrząc wzwyż.

p {
	background-color: #fff;
	* background-color: #000; /* zadziala tylko w 8 > IE > 4 */
}

Krótko wyjaśniając. Wszystkim przeglądarkom obsługującym arkusze stylów zostanie przekazany biały kolor tła dla elementu p, z tymże dla Internet Explorera dodatkowo dyrektywa ta zostanie nadpisana tak, że w rezultacie kolor tego tła będzie w nim czarny (druga linijka).

* html #id {
	background-color: #ccc; /* nada elementowi o identyfikatorze id tło o odcieniu szarym */
}

Oto inny sposób użycia „gwiazdki”. Sposób który działa tylko i wyłącznie na IE6.

*+html #id {
	background-color: #ccc; /* nada elementowi o identyfikatorze id tło o odcieniu szarym */
}

Jak przypomniał _wsl z webhosting.pl, aby wyselekcjonować właściwości w selektorze tylko dla IE7 należy posłużyć się powyższa konstrukcją, która od poprzedniej różni się tylko plusem umieszczonym za znakiem gwiazdki. Obydwa powyższe przykłady są zgodne ze standardami CSS.

Jeśli na początku właściwości umieścimy znak _ to ograniczymy renderowanie dla wersji 5.5 i 6.0. Dodanie podkreślenia, bądź myślnika (co znane jest z używania rozszerzeń poszczególnych przeglądarek, opisywanych przeze mnie np. tutaj) jest dozwolone wg. specyfikacji co znaczy, że użycie takiej formy dyrektywy nie pozbywa nas walidacji dokumentu CSS.

div#special p {
	margin-left: 10px;
	_margin-left: 15px; /* styl zadziała tylko w IE5.5 i IE6 */
}

W podobny sposób poprzez użycie backslasha (\) wewnątrz właściwości możemy ograniczyć jej działanie do przeglądarek (!IE) z numerkami innymi niż 5.x (czyli praktycznie zezwolić na działanie w każdej innej wersji i we wszystkich pozostałych browserach). Należy wiedzieć także, że hak ten nie zadziała jeżeli ukośnik wsteczny umieścimy na początku frazy.

#container {
	width: 250px;
	widt\h: 500px; /* tylko dla IE5.x szerokość nie zostanie nadpisana do 500px */
}

#withBorder {
	border: 1px solid #ccc;
	bor\der: 5px solid #ccc; /* tylko dla IE5.x szerokość krawędzi nie zostanie nadpisana do 5px */
}

Idąc za rozwiązaniem na Tantek.com możemy uzyskać powyższy wynik także poprzez następującą konstrukcję.

.hack {
	height: 800px; /* dla IE5.x/Windows */
	voice-family: "\"}\""; /* selektor nie bedzie dalej przetwarzany dla powyzszego przykladu */
	voice-family: inherit;
	height: 640px; /* nadpisanie w alternatywach */
}

Podatne na ten błąd wersje możemy oczywiście zmusić w inny sposób do prawidłowej interpretacji arkusza.

html>body .hack { /* bez spacji przy > */
  	height: 640px;
}

Komuś może nasunąć się teraz pytanie, jak odróżnić już wspomniane przeze mnie tutaj wersje piątą na Macinthosha i Windowsa?

/* poczatek dla IE5/Mac \*/
#ieMac {
	height: 50px;
}
/* koniec */ 

Oto konstrukcja którą należy użyć, aby zaaprobować styl pod IE/Mac.

/* poczatek dla innych niz IE5/Mac *//*/
#notIeMac {
	height: 150px;
}
/* */

A tak wyglądałoby to dla przeglądarek innych niż IE/Mac. Bardzo fajnie (w języku angielskim) jest to opisane na StopDesign.

Co mogliście zauważyć większość z tych metod pomija siódme wydanie Internet Explorera. Developerzy tej wersji już dawno na swoim blogu pisali, aby usunąć ze swoich stron haki. W najnowszej wersji przeglądarki został zastosowany tryb zbliżonej kompatybilności z standardami, pewnie stąd te zalecenia. Nie mniej jednak grupa konstrukcji związanych z własnościami pozostała i po części została rozszerzona.

/* zbior hackow dla IE7 */
html {
	` background: #cdcdcd;
	~ background: #cdcdcd;
	! background: #cdcdcd;
	@ background: #cdcdcd;
	# background: #cdcdcd;
	$ background: #cdcdcd;
	% background: #cdcdcd;
	^ background: #cdcdcd;
	& background: #cdcdcd;
	* background: #cdcdcd;
	( background: #cdcdcd;
	) background: #cdcdcd;
	= background: #cdcdcd;
	+ background: #cdcdcd;
	[ background: #cdcdcd;
	] background: #cdcdcd;
	{ background: #cdcdcd;
	| background: #cdcdcd;
	, background: #cdcdcd;
	< background: #cdcdcd;
	. background: #cdcdcd;
	> background: #cdcdcd;
	/ background: #cdcdcd;
	? background: #cdcdcd;
}

Znakami które sprawiają, że IE7 zaczyna interpretować regułę są więc praktycznie wszystkie dostępne spoza polskiego alfabetu na standardowej klawiaturze użytkownika. Co ciekawsze można je w specyficzny sposób łączyć co daje efekt równoznaczny z pojedynczą linią ostatniego przykładu z tymże dla poprzednich odsłon browsera.

.zlaczone {
	`~!@#$%^&* background: #cdcdcd; /* < IE 7 */
}

We wszystkich wersjach obsługujących haki prócz siódmej (jej niestabilne odsłony są jednak jeszcze podatne na ten błąd) możemy do właściwości dodać !important o wyższym priorytecie niż zwykła reguła i nieobsługiwanym w takim wypadku przez wcześniej wymienione przeglądarki.

div#dzialanieImportant {
	width: 800px !important; /* inne */

	width: 640px; /* IE5.x / IE6.x / IE7beta */
}

No i na finiszu zarys rozszerzenia expressions

Kiedy każda z powyższych metod zawodzi z ostateczną pomocą (pomijając rozwiązania zewnętrzne) przychodzi nam metoda zaawansowanego użytkowania haków z poziomu CSS, czyli rozszerzenie expressions.

blok {
	własciwość: expression(JavaScript);
}

Nie przeprowadzę tu wykładu na temat JavaScript, którego znajomość jest niezbędna do operowania na expressions. Podam jednak kilka przykładów obrazujących co może być parametrem tego rozszerzenia.

Elementarnymi słowami kluczowymi są document (będący obiektem) oraz this (będący referencją do aktualnie przetwarzanego obiektu). W pierwszym wypadku używając odpowiednich właściwości możemy na przykład ustawić absolutną pozycję danego elementu względem rozmiarów okna przeglądarki, bądź nadać stronie maksymalną, dozwoloną szerokość względem rozdzielczości ekranu użytkownika (czego nie da się zrobić w starszych odsłonach Internet Explorera z powodu nie obsługiwania przez nie dyrektyw max-height, min-height, max-width i min-width). Przedstawiam dwa przykłady, które tylko i wyłącznie mają zobrazować możliwości operowania JS-em w kodzie CSS.

div#container {
	max-width: 800px;
	/* ponizej mamy dwa przyklady tzw. wyrazenia dynamicznego */
	width: expression(document.body.clientWidth > 800 ? "800px" : "100%"); /* ustawi 800px szerokosci jezeli szerokosc klienta jest wieksza niz 800px, w przeciwnym wypadku nastąpi skalowanie do tej wartosci */
	min-height: 600px;
	height: expression(document.body.clientHeight < 600 ? "100%" : "600px"); /* ustawi 100% wysokosci jezeli wysokosc klienta jest mniejsza niz 600px, w przeciwnym wypadku nastąpi skalowanie do tej wartosci */
}

p#logo {
	position: absolute;
	left: expression((document.body.offsetWidth - 500) + "px"); /* ustalenie pozycji lewej wzgledem szerokosci okna przegladarki - dla XHTML nalezaloby posilkowac sie obiektem window */
	bottom: expression((document.body.offsetHeight - 200) + "px"); /* ustalenie pozycji dolnej wzgledem wysokosci okna przegladarki - dla XHTML nalezaloby posilkowac sie obiektem window */
	color: expression(this.parentNode.lastChild.style.color = '#f0f0f0'); /* ustalenie koloru czcionki ostatniego potomka rodzica przetwarzanego elementu DOM */
	width: 300px;
	height: 20px;
}

W wypadku zmiany koloru skorzystaliśmy z konstrukcji odniesienia się do rodzica elementu (parentNode), po czym do ostatniego potomka tegoż rodzica (lastChild), by na koniec po prostu nadać pożądany kolor (style.color).

W wypadku stylów możemy nadać wartość własności także poprzez setProperty() zalecane przez W3C.

color: expression(this.parentNode.lastChild.style.setProperty("color", "#f0f0f0", null)); /* forma preferowana przez w3c */

Takich własności jest oczywiście więcej, a przykładami są:

• wspomniane parentNode – wskazuje na rodzica elementu w drzewie dokumentu,
• childNodes – tablica elementów potomnych, których istnienie można sprawdzić poprzez użycie metody .hasChildNodes() lub przez sprawdzenie jej długości argumentem .length. Do danych potomków odnosimy się jak do zwykłej tablicy, czyli np. 3ci element odczytywalibyśmy w formie element.childNodes[2];,
• firstChild – pierwszy element potomny,
• lastChild – ostatni element potomny,
• previousSibling – poprzedni element,
• nextSibling – następny element,
• nodeName – nazwa aktualnego elementu,
• nodeValue – wartość aktualnego elementu.

Własności DOM dla drzewa dokumentu.

Korzystając z tego rozszerzenia należy to robić z reguły w osobnym arkuszu przeznaczonym tylko dla MSIE. Jeżeli robimy to jednak w arkuszu ogólnodostępnym to zaleca się poprzedzanie właściwości ciągiem -ie (podobnie jak dla przeglądarek fundacji Mozilla stosuje się -moz).

div#practiceEval {
	-ie-noeval = expression(p = document.createElement("p"), this.parentNode.appendChild(p));
	-ie-witheval = expression(get_width = document.body.clientWidth,
		eval(if ( get_width > 800 ) {
			this.appendChild(document.createTextNode(get_width))
		})
	);
}

I na koniec bardziej skomplikowany, finalny przykład. Pierwsza właściwość tworzy tag typu p i przenosi go na koniec zawartości rodzica. Ma on ukazać użycie przecinka zamiast średnika w wielolinijkowym kodzie. W -ie-witheval użyliśmy za to funkcji eval() dzięki której w jej parametrze mogą znajdować się wyrażenia zawierające takie elementy jak instrukcje warunkowe, czy wyłapywanie błędów. Nadal jednak niedozwolona jest deklaracja zmiennych z użyciem wyrażenia var oraz posługiwanie się średnikami w celu oddzielenia partii kodu.

Wspomniałeś coś o rozwiązaniach zewnętrznych, to znaczy?

Jednym z takich rozwiązań jest skrypt (o wielkości 1kB!) CSS Browser Selector który dzięki możliwości dodawania do właściwości nazw klasy określających przeglądarkę lub system ułatwia pisanie pod nie kodu arkusza stylów.

.win.ie5 #test {
	margin: 5px
}

Powyższy kod ustawiony zostanie dla identyfikatora test i przeglądarki IE5 systemu Windows. Nadany zostanie oczywiście margines o szerokości pięciu pikseli.

Skrypt korzysta z JavaScriptu co może powodować, że nie zostanie on zaaplikowany każdemu użytkownikowi, albo zostanie to wykonane dopiero po załadowaniu DOM.

—–

Coś niezrozumiałego? Jakieś pytania? Zapraszam do komentowania.