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

HTML: CSS Cutoff of Older IE

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.

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

<![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:

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

<!--[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).

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