Applying Special CSS Rules for IE6-IE8 and IE9 Without Affecting Other Browsers

It’s been a while since I blogged about this 9 CSS hack for all versions of Internet Explorer. Personally I always try to avoid hacks, but recently I had to tweak some style sheet to use special styles for IE6-IE8 and for IE9, so I remembered of this hack. Here’s how I did it:

[sourcecode language=”css”]
/* first apply the 9 hack for any version of internet explorer, for example */
body
{
background: #f009;
}

/* … then override the above rule by using the CSS3 :root selector which is supported by IE9, but still use the 9 hack to filter out only IE9 */
:root body
{
background: #ccc9;
}
[/sourcecode]

By using the above CSS you can have special styles, which are the same for Internet Explorer 6-8 and other rules for Internet Explorer 9 without affecting other browsers.