Making IE Specific CSS or Code (Conditional Comments)

This page details the generally most accepted solution to serving up custom stylesheets for versions of Internet Explorer. As such, using conditional comments is arguably the most recommended way to “hack”.

You can also find inline CSS hacks for Internet Explorer 6, 7 and 8.

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.

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

Showing CSS For Older Than Internet Explorer 6

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

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

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:

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

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.

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

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.

7 thoughts on “Making IE Specific CSS or Code (Conditional Comments)”

  1. nebon says:

    I am trying to use this code.. On a mac IE 5.5.

    And I cant let this work …

    Any suggestions ?

  2. Sigge says:

    i was just trying it too on mac, and its running same version, cant get it to work either.

    1. Joen says:

      Well, this will only work on Windows versions of Internet Explorer. Are you really designing for IE 5.5 Mac?

  3. Sigge says:

    hehe, just looked at when u posted this , well four years later .. you got any solution ? 😀

  4. Sigge: Yes, the old IE 5 Mac backslash hack:

    /* import stylesheets and hide from ie/mac */

    @import url(“screen.css”);

    /* end import and hide */

    Read more here:

    http://www.simplebits.com/notebook/2009/02/13/iegone.html

Comments are closed.