Hack IE by using Conditional Comments for multiple CSS

MSIE for Windows has for a long time had a feature named Conditional Comments that allows content to be visible only for MSIE. Use of conditional comments instead of other css hacks is simple:

1. Create a stylesheet common for all browser, without using any hacks to work around rendering problems in MSIE.
2. Create a stylesheet common for all versions of MSIE
3. Create a separate stylesheet for each of the MSIE versions you want to target.
4. Include the stylesheets from 2 and 3 by using a conditional comment

Conditional comment syntax

The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows. You could for instance use this to apply the PNG Behavior

The following conditional comment is being picked up by IE5, IE5.5 and IE6:

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

Targeting IE5

If you need to target IE5 specifically, you do so by appending a version number:

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

Targeting IE5.5

If you specifically need to target IE5.5, it’d look like this:

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

Targeting IE6

The same goes for IE6:

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

IE5 and IE5.5 – box model hacking

If you need to work around IE5’s broken box model, using conditional comments, you can use several alternative syntaxes.

The first syntax will apply the stylesheet to any version of IE whose version number starts with 5:

<!--[if IE 5]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Alternatively, you could say that stylesheets should be applied to any IE version whose version number is less than 6:

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Order

If you don’t want your IE-specific styles to be overridden by your regular stylesheet, source order is significant; you’d want to specify the common stylesheet first, with the IE-specific versions following:

<link rel="stylesheet" type="text/css" href="common.css" />

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

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

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Added bonus: (More) Accurate browser statistics

By using conditional comments you also get a more accurate measurement of browser versions.

• A browser that identifies itself as MSIE but really is another browser will not fetch the stylesheets specifically for IE. This can be used to get accurate reports on MSIE overreporting
• If you use separate stylesheets for each version of IE, you can get an accurate report on which versions of IE people actually use, without error sources such as bots and browsers faking their identity.

Valid

The perhaps most reassuring part of this technique is that your main CSS and your carefully authored HTML/XHTML documents will remain valid until the end of time.