Neat way to address IE6-9 in CSS

Update 29mar2010: Added the \9 bit for IE8 and below

Update 27apr2010: Added note about importance of order

Update 3aug2010: Added '>' for IE7-specific targeting.

I just saw an article by Jeffrey Way on how to address IE6, IE7 and/or IE8 in CSS.
 #someElement {
background: red;              /* modern browsers */
background: green\9;        /* IE 8 and below */
>background: green;         /* IE 7 exclusively */
*background: green;         /* IE 7 and below */
_background: yellow;        /* IE6 exclusively */
}

It is important to note that you need to write your CSS in the correct sequence:

#someElement
{
/* CSS for real browsers goes first */
background: green;        /* IE 8 and below */

/* CSS for Microsoft's shamefull browsers goes next in version descending order */

background: pink\9;        /* IE 8 and below */
>background: red;         /* IE 7 exclusively */
*background: yellow;         /* IE 7 and below */
_background: black;        /* IE6 exclusively */
}

Thanks Jeffrey, that is a neat trick!

ps: Comments and/or links to this article are most welcome!

Related articles by Zemanta

• Microsoft's Slow Path To IE 9 (informationweek.com)
• CSS3 Solutions for Internet Explorer (tc.eserver.org)
• Internet Explorer 6 finally nearing extinction (cnn.com)