Komentarze warunkowe w Internet Explorer

Autor: Paweł Rajewski

Od wersji 5 Internet Explorer oferuje ciekawe rozwiązanie, jakim są komentarze warunkowe (conditional comments). Niby “komentarz jaki jest każdy widzi”, ale… Okazuje się, że nawet ten prosty tag można udoskonalić i zmienić w użyteczne narzędzie.

Cała sztuczka polega na oznaczaniu, który model Explorera ma uznać dany komentarz za komentarz, a który za zwykły kod HTML do przetworzenia. Tym sposobem można uruchamiać całe fragmenty strony tylko w wybranych modelach przeglądarki.

Ulepszone komentarze

Zwykły komentarz zna każdy:

<!--To tylko komentarz--> 

Tekst pomiędzy znakami początku i końca komentarza nie jest wyświetlany. Jak widać, komentarz nie ma tagu zamykającego, można więc uznać, że tekst, który zawiera jest jakby jego atrybutem. A oto komentarz warunkowy:

<!--[if IE 6]> 
<H1>Ten tytuł ukaże się tylko w Explorerze 6</H1> 
<![endif]--> 

Komentarz warunkowy ma dwa tagi - otwierający i zamykający, pomiędzy którymi można wpisać dowolny fragment kodu (łącznie ze skryptami). Kod wewnątrz komentarza będzie wyświetlany (przetwarzany) jeśli warunek podany w tagu otwierającym zostanie spełniony. W przeciwnym razie cała konstrukcja będzie traktowana jak zwykły komentarz i nie zostanie wyświetlona.

Warto zauważyć, że Explorery starsze niż 5 i przeglądarki innych firm potraktują całość jak tradycyjny komentarz i nie wyświetlą zawartej w nim treści - pierwsze cztery i ostatnie trzy znaki to przecież typowe symbole początku i końca komentarza. Oznaczona w ten sposób treść zostanie pokazana tylko we wskazanym modelu przeglądarki Internet Explorer.

Istnieje też drugi rodzaj komentarza warunkowego:

<![if IE 6]> 
<H1>Ten tytuł ukaże się tylko w Explorerze 6</H1> 
<![endif]> 

W przeglądarce IE5 i w nowszych zadziała on identycznie jak poprzedni przykład. Różnice wystąpią w starszych Explorerach i w przeglądarkach innych firm - ten rodzaj komentarza zostanie w nich wyświetlony (tagi otwierający i zamykający nie zostaną rozpoznane i będą pominięte, a tekst pomiędzy nimi zostanie potraktowany jak zwykły fragment kodu strony). Rodzaj komentarza można więc dobrać w zależności od pożądanego efektu w przeglądarkach nie znających tej konstrukcji.

Warunki

Na razie dostępne jest tylko rozpoznawanie modelu przeglądarki (choć Microsoft obiecuje, że ten zakres będzie rozszerzany). A zatem:

[if IE] - to po prostu rozpoznanie Internet Explorera o dowolnym modelu (w praktyce 5 lub nowszego, bo poprzednie nie rozpoznają komentarzy warunkowych).

[if IE 5] - to rozpoznanie konkretnego modelu Explorera (w tym przypadku 5) w dowolnym “podmodelu”. Przytoczony warunek będzie spełniony dla IE 5.0, 5.1, 5.5, ale nie będzie spełniony dla IE6.

[if IE 5.5000] - to rozpoznanie konkretnego “podmodelu” Explorera (w tym przypadku tylko i wyłącznie 5.5). Przytoczony warunek nie będzie spełniony ani dla Explorera 6, ani dla Explorera 5.0 lub 5.1. Ważne jest czterocyfrowe oznaczenie po kropce - niestety, trzeba tu podawać pełną “podwersję”, wpisanie samego 5.5 nie wystarczy.

Metoda ta jest nieco zdradliwa, bo może się trafić Explorer na oko identyczny z oczekiwanym, a jednak inaczej oznaczony. Microsoft podaje np., że Explorer 5.0 rozprowadzany z Windows2000 miał oznaczenie 5.0002, a zatem warunek [if IE 5.0000] go nie wykryje. Rozwiązaniem może być zastosowanie dodatkowego operatora:

[if operator IE model] - gdzie operator to:

! - czyli: NOT (negacja); lt - czyli: < (mniejszy niż); gt - czyli: > (większy niż); lte - czyli: <= (mniejszy lub równy); gte - czyli: >= (większy lub równy).

Przykładowo:

[if gte IE 5] - warunek będzie spełniony dla wszystkich Explorerów 5 i nowszych (czyli dla 5.0, 5.1, 5.5, 6 itd.).

[if gte 5.5000] - warunek będzie spełniony dla Explorerów 5.5 i nowszych.

[if lt IE 6] - warunek będzie spełniony dla Explorerów starszych niż 6 (czyli w praktyce wszystkich modeli 5, bo IE4 nie rozpoznaje komentarzy warunkowych).

[if ! IE 6] - warunek będzie spełniony dla Explorerów innych niż 6.

Można konstruować warunki złożone z użyciem nawiasów i operatorów ’|’ (OR) i ’&’ (AND) oraz podanych wprost wartości true lub false (choć to ostatnie ma raczej niewielkie zastosowanie, bo oznacza, że warunek będzie spełniony zawsze lub nigdy). Np.:

<!--[if lt IE 5.5000]> 
Masz Explorera 5 - w miarę możliwości uaktualnij go przynajmniej do 5.5. 
<![endif]--> 
<!--[if (gte IE 5.5000) & (lt IE 6)]> 
Masz Explorera 5.5 - na razie nie musisz nic zmieniać. 
<![endif]--> 
<!--[if gte IE 6]> 
Masz Explorera 6 lub nowszego. Znakomicie, jesteś bardzo na czasie! 
<![endif]--> 
<![if false]> 
Masz bardzo starego Explorera lub przeglądarkę innej firmy. Nie obejrzysz więc 
tego serwisu... 
<![endif]> 

Nietypowe zastosowania

Komentarz warunkowy może mieć wiele ciekawych zastosowań wykraczających poza wyświetlanie napisów jak w przykładzie powyżej. Umożliwia proste zautomatyzowanie strony w zależności od wykrytej przeglądarki nie wymagające użycia skryptów (i co ważniejsze, działające przy wyłączonej obsłudze skryptów!). Np. (w sekcji HEAD):

<!--[if gte IE 6]> 
<LINK REL="stylesheet" HREF="style6.css" 
TYPE="text/css"> 
<![endif]--> 
<![if lt IE 6]> 
<LINK REL="stylesheet" HREF="style5.css" 
TYPE="text/css"> 
<![endif]> 

…w przypadku Explorera 6 zostanie załadowany arkusz style6.css, w przypadku starszych Explorerów i przeglądarek innych firm - arkusz style5.css. Podobnie można wybierać skrypty.

<!--[if warunek]> 
<IFRAME NAME="Ramka" SRC="strona1.htm"></IFRAME> 
<![endif]--> 
<![if ! warunek]> 
<IFRAME NAME="Ramka" SRC="strona2.htm"></IFRAME> 
<![endif]> 

…w zależności od spełnienia warunku do ramki IFRAME zostanie załadowana odpowiednia strona.

<HTML> 
<HEAD> 
<!--[if IE]> 
<META HTTP-EQUIV="Refresh" CONTENT="0; 
URL=index1.htm"> 
<![endif]--> 
<![if false]> 
<META HTTP-EQUIV="Refresh" CONTENT="0; 
URL=index2.htm"> 
<![endif]> 
</HEAD> 
<BODY> 
</BODY> 
</HTML> 

…Explorery 5 i nowsze zostaną przekierowane na stronę index1.htm, starsze i inne przeglądarki - na stronę index2.htm.

Komentarzy warunkowych nie należy zagnieżdżać ani mieszać ze zwykłymi komentarzami. Lepiej więc usunąć tradycyjne komentarze z fragmentów kodu objętych komentarzami warunkowymi. Choć Explorerowi taka sytuacja nie przeszkadza, może dać zupełnie nieoczekiwane efekty w przeglądarkach innych firm.

We fragmentach przeznaczonych wyłącznie dla Explorera można korzystać z dodatkowego znacznika , będącego również komentarzem, ale którego zawartością - w odróżnieniu od zwykłych komentarzy - można łatwo manipulować przy pomocy skryptów.

Paweł Rajewski