Conditional Comments in CSS for Internet Explorer

Using conditional comments within cascading style sheets to target specific versions of Microsoft Internet Explorer.

Conditional comments are a necessary evil for web designers if they want their websites to render correctly in older versions of Internet Explorer. This situation arises because of Internet Explorer’s historically poor support for web standards.

Many people are familiar with HTML Conditional Comments. This is a technique that can be used to execute scripts, link CSS sheets and show or hide DIV elements exclusively to certain versions of Internet Explorer. In the following example, the CSS sheet “old-browser.css” will only be read by Internet Explorer 6 or less:

Such a tool is useful for executing JavaScripts or utilising cascading style sheets which correct rendering errors specific to older versions of IE.

What many people don’t realise is that Internet Explorer also recognises conditional comments within cascading style sheets. This is an especially useful feature when one small element of a CSS layout isn’t displaying correctly in a particular version of IE.

I have made a summary list of the most common “safe” CSS hacks that web developers may need.

Internet Explorer 6 only (“The Underscore Hack”):

selector {
    _prop: value;
}

This browser version can also be targeted with an asterisk positioned beside the selector:

* html selector {
    prop: value;
}

Internet Explorer 6 and 7 only:

selector {
    *prop: value; 
}

Internet Explorer 7 only:

*+selector {
    prop: value;
}

Internet Explorer 7, 8 and 9 (The “Unsafe Hack”):
This hack uses a backslash and numeral 9 after the CSS value. This hack was widely considered “unsafe” when web developers discovered that IE9 also recognised this hack and responded accordingly, thus destroying the formatting of websites for IE9 users.

selector {
  prop: value\9;
}

Internet Explorer 8 only:
This CSS hack makes use of a backslash, zero and forward slash after the CSS value descriptor:

selector {
  prop: value\0/;
}

Internet Explorer 8 and 9:

selector {
  prop: value\0/IE8+9;
}

Internet Explorer 9:

One might have assumed that since Internet Explorer 9 is here that Microsoft would have got its act together and fixed IE once-and-for-all. Apparently not.

Nevertheless, Microsoft has announced that conditional comments will not be supported in IE10, but there’s no word about the use of IE version-specific CSS hacks.

This means that, again, one must be careful when using the following IE9 hack. For starters, it doesn’t work for all properties and secondly, if IE10 also reads it then your site might suffer formatting problems when IE10 is pushed to users.

:root selector { 
	prop: value \0/IE9;
}  

Example of usage:

The following CSS provides an example of how these hacks might be used. What a mess!

.foo {
  color: black;
  color: green\9; /* IE7, IE8, IE9 */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}
*+.foo {
    color: white; /* IE7 only */
}
:root .foo { 
	color: purple; \0/IE9; /* IE9 only */
} 

Best practice?

Many web designers suggest that the best way of customising CSS for browsers is to use classic HTML conditional comments. One also needs to recognise that many of these hacks won’t always work in very situation and few are recognised as valid CSS. Personally speaking, I use CSS hacks only as an absolute last resort.

Mathias Bynens provides an excellent and detailed statement of best (and safest) practice in this regard.

Comments

One response to “Conditional Comments in CSS for Internet Explorer”

On 27 June 2012, sai wrote:

thanks,its really useful for me

Reply

Have Your Say

Δ