Noscope

Making IE Specific CSS or Code (Conditional Comments)

April 25th, 2004 bugs, code, css, ie, webdesign

While recently giving Titoonics Sporkle gamesite a makeover, I made an Internet Explorer 5.0 and 5.5 specific CSS stylesheet.

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.

CSS For Older Than Internet Explorer 6

In my case, I needed a stylesheet specifically for Windows browsers older than Internet Explorer 6.

Thus, this piece of code came to the rescue:

<!--[if lt IE 6]>
<style>
@import url("/oldbrowser.css");
</style>
<![endif]-->

In human tongue, it says “if browser is less than IE 6, use this stylesheet”.

CSS For All Versions Of Internet Explorer (Windows)

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]>
<style>
@import url("/ie.css");
</style>
<![endif]-->

CSS Not Shown To Internet Explorer 6

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

<![if !(IE 6)]>
<style>
@import url("/not_ie.css");
</style>
<![endif]>

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