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

HTML: CSS Cutoff of Older IE

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

Old versions of IE sometimes become obsolete, and sometimes we want to stop supporting them. To be polite, we'd better cut them from the styles, so that their buggy CSS implementation cannot make the page unreadable or unusable. They will then display only clean, unstyled HTML document.

There are many hacks and constructions supported in varying degrees in respective IE versions. Theoretically, we can use them for this CSS cutoff. Anyway, not all of them are well usable and they become more complicated in time. The proprietary conditional commments in IE seem to be the "cleanest" and most reliable solution. From other browsers' point of view they are acting as comments to be ignored, and only IE will process them correctly.

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]-->

We can also specify the IE version or "less/greater than" operators (gt/gte/lt/lte) in the condition — see the syntax for details. There is a problem in the "negative" conditions, which are most suitable for the CSS cutoff. In this case, there are not comments used. Proprietary tags, out of any HTML specification are used instead, and making the document invalid.

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]>

It can be easily solved by hiding these tags into a comment. Nice solution was shown by David Grudl:

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]-->

Anyway, if we use a condition describing only several IE versions, another problem appears. IE which satisfies the condition, will display the sequence --> from the first line visibly in the page (even if it's in the <head> section). If you're using IE 5 or above, you should see it in the following example.

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...

Fortunately, right in David's article comments, Jan Renner noticed an alternative which helps to solve the problem. If the sequence --> is replaced by sequence <!-->, other browsers will keep treating it as a part of the comment. They only use the end of it as the comment closure. Meanwhile IE will treat it as a short comment, to be ignored as well.

Having these tools, we can insert a code to the page, to be used in all browsers but specified version of IE. CSS definitions, external file import or anything else can be put in there. In following example, the style will be ignored by all IE up to version 6 (IE 6 will use the style).

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]-->

We can easily make the CSS cutoff of IE 5.x (and older) this way. In such browser the page will be displayed as pure, unstyled HTML. If you can use these browsers, you can try a simple example. Of course, if you want, you may add an extra style for the cut-off IE5 by using another conditional comment.

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.