Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Komentarze warunkowe

Warsztat / Artykuły i tutoriale

Komentarze warunkowe

Rafał Kukawski 25 listopada 2010 komentarze ()

Tagi:HTML IE

Komentarze warunkowe są rozszerzeniem składni HTML, które Microsoft udostępnił webmasterom wraz z wydaniem światu piątej edycji Internet Explorera. Komentarze warunkowe stały się dość popularne, szczególnie w sferze poprawiania błędów przeglądarki Microsoftu. Zyskały swoją rzeszę zwolenników jak i sporą grupę przeciwników. Artykuł ten ma na celu przedstawienie funkcjonalności jaką oferują komentarze warunkowe oraz zapoznanie czytelnika z opiniami na ich temat.

Komentarze w HTMLu

Podobnie jak praktycznie każdy istniejący język programowania, HTML posiada konstrukcję składniową zwaną komentarzami. Komentarze z założenia mają spełniać jedną rolę – rolę informacyjną. Każdy programista może zapisać jakąś uwagę, notkę, komentarz na temat całego kodu lub jego fragmentu.

Kod: Zaznacz cały
<!-- To jest treść komentarza -->
<!--
To też jest komentarz,
tylko zapisany w kilku wierszach
-->

Microsoft postanowił przeznaczyć komentarze do innych celów.

Po co istnieją komentarze warunkowe?

Komentarze warunkowe służą jednemu celowi. Służą do wykrywania przeglądarki Microsoftu lub jej konkretnej wersji. Dokładnie, możemy wykryć tylko przeglądarkę bazującą na silniku Microsoftu, bo tylko ten silnik obsługuje komentarze warunkowe. Po co więc Microsoft zaoferował nam takie coś? Od dawna odnoszę wrażenie, że wykrywanie typu lub wersji przeglądarki jest dla Microsoftu ważną sprawą. Zgaduję, że pomaga on w zapewnianiu wstecznej kompatybilności w witrynach i produktach Microsoftu co jest istotnym elementem polityki koncernu.

Składnia komentarzy warunkowych

Komentarze warunkowe oferują nam dwie składnie – jawną i ukrytą. Rola obydwu typów komentarzy warunkowych jest nieco inna, co zostanie wyjaśnione niżej.

Ukryte komentarze warunkowe

Kod: Zaznacz cały
<!--[if wyrażenie]> Treść, którą wyświetli przeglądarka, gdy warunek zostanie spełniony <![endif]-->

Składnia ukrytego komentarza warunkowego jest w zasadzie rozszerzeniem składni standardowego komentarza. W nawiasach kwadratowych wpisujemy słowo kluczowe if, po którym podajemy warunek, który przeglądarka musi spełnić, żeby wyświetlić na stronie treść komentarza. Za treścią komentarza wstawiamy konstrukcję

Dzięki tej konstrukcji uzyskujemy taki efekt, że przeglądarka Internet Explorer sprawdza wyrażenie podane w warunku i w zależności od jego prawidłowości wyświetla lub nie treść komentarza na stronie.

Pozostałe przeglądarki, które nie obsługują komentarzy warunkowych widzą zwykły, standardowy komentarz HTMLowy i go ignorują. Żadna treść komentarza nie zostanie wyświetlona na stronie.

Jawne komentarze warunkowe

Kod: Zaznacz cały
<![if wyrażenie]> Treść, którą wyświetli przeglądarka, gdy warunek zostanie spełniony <![endif]>

W przypadku jawnych komentarzy warunkowych, składnia bardziej przypomina zwykły znacznik HTMLowy. Stosując tę składnię uzyskamy taki efekt, że przeglądarka Internet Explorer wyświetli zawartość takiego znacznika tylko w przypadku spełnienia warunku.

Pozostałe przeglądarki zignorują nieznany znacznik i wyświetlą jego treść. To jest główna różnica pomiędzy obydwoma składniami.

Negatywnym skutkiem stosowania jawnych komentarzy warunkowych jest utrata poprawności dokumentu. Taki znacznik po prostu nie istnieje w języku HTML.

Wyrażenia

Nieodłączną częścią każdego komentarza warunkowego są wyrażenia warunkowe. Początkowo istniało kilka prostych wyrażeń, które przedstawia poniższa tabela.

Wyrażenie Przykład Opis
IE [if IE] Jedyny obsługiwany string to IE oznaczający Internet Explorera
wersja [if IE 7] Numer wersji, w dokumentacji oznaczany terminem wektora wersji
! [if !IE] Operator negacji
lt [if lt IE 5.5] Operator mniejszości
lte [if lte IE 6] Mniejszy lub równy
gt [if gt IE 5] Operator większości
gte [if gte IE 7] Większy lub równy

Z czasem Microsoft rozszerzył możliwości konstruowania warunków o operator grupowania wyrażeń oraz operatory „lub” oraz „i”. Dodatkowo pojawiły się słowa kluczowe „true” oraz „false”.

Wyrażenie Przykład Opis
( ) [if (IE 7)] Operator grupowania (pod-wyrażenia). Przydatny w budowaniu rozbudowanych warunków z wykorzystaniem operatorów AND oraz OR
& [if (gt IE 5)&(lt IE 7)] Operator AND. Zwraca true jeśli obydwa wyrażenia (operandy) zwrócą true
| [if (IE 6)|(IE 7)] Operator OR. Zwraca true jeśli przynajmniej jedno z wyrażeń zwróci true
true [if true] Logiczna prawda. Zawsze zwraca true
false [if false] Logiczny fałsz. Zawsze zwraca false

Znacznik &lt;comment&gt;

Znacznik ten stanowi alternatywną składnię komentarzy HTMLowych w Internet Explorerze. Można go też wykorzystać w roli komentarza warunkowego, który wyświetli treść na stronie we wszystkich przeglądarkach oprócz IE.

Kod: Zaznacz cały
To <comment>nie</comment> jest Internet Explorer</comment>

Czego rezultat można sprawdzić poniżej.

Twoja przeglądarka to nie Internet Explorer.

Gdzie i po co stosować komentarze warunkowe?

Jak już zostało napisane na początku artykułu, komentarze warunkowe służą do wykrywania przeglądarki. Ale powszechnie uważa się, że wykrywanie przeglądarki jest złą praktyką, której powinno się unikać. Jednakże komentarze warunkowe znalazły kilka zastosowań.

Naprawa Internet Explorera

Tak, komentarze warunkowe powszechnie wykorzystuje się do poprawiania błędów i braków Internet Explorera. Nie da się ukryć, że silnik tej przeglądarki wyraźnie odstaje od obecnych standardów i od konkurencyjnych przeglądarek. Ponadto Internet Explorer jest jedyną przeglądarką na rynku, którą zwykło się obsługiwać 2 a nawet 3 edycje wstecz. O IE6 i 7 dzisiaj można mówić już tylko źle, choćby ze względu na niekompletną implementację CSS i masę błędów w zaimplementowanych elementach. Często trzeba tej przeglądarce zaserwować dodatkowy kod CSS omijający niedoskonałości tej przeglądarki. Idealnie nadają się do tego komentarze warunkowe.

Jeśli chcielibyśmy wstawić dodatkowe arkusze stylów z poprawkami dla IE6 i IE7 wystarczy wstawić w kodzie

Kod: Zaznacz cały
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"/><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"/><![endif]-->
Wstawianie Flasha do dokumentu

Żeby wstawić do strony poprawnie działającą animację Flash trzeba się trochę nagimnastykować. Niestety, standardowy kod generowany przez Adobe Flash jest tragiczny, a jedna z najpopularniejszych metod – Flash Satay – nie gwarantuje pełnej funkcjonalności wtyczki Flasha. Trzeba było szukać innego sposobu aby wstawić flasha do strony, który działa bez zarzutów i w dodatku jest poprawny względem standardu HTML.

Jedną z możliwych technik jest przedstawiona poniżej.

Kod: Zaznacz cały
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="movie.swf" width="300" height="135">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="135">
<param name="movie" value="movie.swf" />
<!--><!--dgx-->
<param name="loop" value="true" />
<param name="menu" value="false" />
<p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Rafał Kukawski

Programista, webmaster. Szczególnie upodobał sobie JavaScript i technologie klienckie, choć strona serwera i bazy danych nie stanowią tajemnicy. Tworzy też aplikacje na urządzenia mobilne. kukawski.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook