English-only | Jenom česky | Bilingual/Dvojjazyčně

HTML: Odstřižení starších IE od CSS

Starší verze IE se postupně přestávají používat, a tak někdy chceme přestat i s jejich podporou při vývoji. Je ale slušné tyto staré, dále nepodporované verze odstřihnout od CSS, aby kvůli chybné implementaci CSS nezobrazily stránku nečitelně či nepoužitelně. Zobrazí se v nich pak jen čistý, nestylovaný dokument.

Existuje množství hacků a konstrukcí, které jsou v různé míře podporovány v různých verzích IE a teoreticky je lze k odstřižení příslušné verze prohlížeče použít. Ne všechny jsou ale dobře použitelné a postupem času se stávají čím dál složitější. Jako nejčistší a nejspolehlivější řešení se ukazuje použití proprietárních podmíněných komentářů IE. Z pohledu ostatních prohlížečů se tváří jako komentáře, které budou ignorovány, a korektně je zpracuje pouze IE.

<!--[if IE]>
   ... code for IE...
<![endif]-->

Podmínky mohou být doplněny upřesněním verze IE nebo operátory větší/menší než (gt/gte/lt/lte) — podrobnosti viz syntaxe. Jistý problém nastává u "negativních" podmínek, které se k odstřižení zvolených verzí IE hodí nejvíce. Zde se totiž už nepoužívá komentářů, ale proprietárních značek, které neodpovídají specifikaci HTML a způsobují, že dokument není validní.

<![if !IE]>
   ... code ignored by IE...
<![endif]>

Lze to ovšem snadno vyřešit tím, že se tyto nestandardní značky schovají do komentáře, třeba tak, jak ve svém elegantním řešení ukázal David Grudl:

<!--[if !IE]> -->
   ... code ignored by IE...
<!-- <[endif]-->

Pokud ovšem použijeme podmínku, jíž vyhovují jen některé verze IE, objeví se jiný problém. Ty IE, které podmínkou projdou, totiž sekvenci --> z prvního řádku zobrazí viditelně ve stránce (a to dokonce i pokud se nachází v sekci <head>). Pokud používáte IE verze 5 a vyšší, měli byste to v následujícím příkladu vidět.

<!--[if !lt IE 5]> -->
   ... code ignored by IE less than 5...
<!-- <[endif]-->
... code ignored by IE less than 5...

V komentářích u Davidova článku naštěstí Jan Renner zmínil alternativu, která tento problém pomůže odstranit. Když totiž sekvenci --> nahradíme sekvencí <!-->, bude pro ostatní prohlížeče uvnitř komentáře a použijí jen její konec pro jeho ukončení. Zatímco IE to zpracuje jako krátký komentář, který bude ignorovat celý.

S tímto vybavením tedy můžeme do stránky vložit kód, který použijí všechny prohlížeče, kromě IE starších než námi zvolená verze. Tímto kódem může být definice CSS, načtení externího souboru nebo cokoli jiného. V následující ukázce bude styl ignorován všemi IE až do verze 6 (IE 6 už styl použije).

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

<!--[if !lt IE 6]><!-->
    <style type="text/css">
       @import "style2.css";
    </style>
<!--<![endif]-->

<!--[if !lt IE 6]><!-->
   <style type="text/css">
      body { margin:0; background:#f0f0f0; color:#333 }
      ...
   </style>
<!--<![endif]-->

Tímto způsobem tedy snadno a validně "odstřihneme" IE 5.x a starší od CSS a stránky se v nich zobrazí jako čisté, nestylované HTML. Pokud máte k dispozici potřebné prohlížeče, můžete si to vyzkoušet na jednoduchém příkladu. A pochopitelně, pokud chcete, můžete pomocí dalšího podmíněného komentáře doplnit zvláštní styl pouze pro odstřižený IE5.