Noscope

Making IE Specific CSS or Code (Conditional Comments)

« Prev     Next » 19:27 on April 25, 2004 bugs, css, ie, webdesign

While it is a pain to develop for archaic browsers, Internet Explorer on Windows platforms support a fairly straight-forward and simple method, that’s not even a hack.

As a webdesigner, it is quite a challenge to design and build a site that is supposed to attract many viewers on many platforms. I can’t just choose to design for the latest and greatest. Decisions on what one wants support, must be made, and the design should ideally “degrade gracefully” on unsupported browsers.

Please note, these tricks are for Windows Internet Explorer only.

Showing CSS For Newer Than Internet Explorer 7

This is probably the most common use case. You want to show a specific stylesheet for Internet Explorer 7 and newer. See also how to handle IE8.

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7plus.css" />
<!--[endif]-->

Showing CSS For Older Than Internet Explorer 6

In case you need a stylesheet specifically for IEs older than Internet Explorer 6.

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

Showing CSS For All Versions Of Internet Explorer (Only)

If you just want to attach a stylesheet, or display a chunk of code to all versions of Internet Explorer, you can use this code:

<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<!--<![endif]-->

Hiding CSS From Internet Explorer

This is useful, for instance, if you want to serve a stylesheet free version of your site to IE6 users.

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="notie.css" />
<!--<![endif]-->

There are many more of these “out-commenting” tricks for you to refine your stylesheets. For a complete list, I have to redirect you to this document on conditional comments.

Tweet This