IE9 Only CSS Hack

http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

My GoogleFu turned up nothing today when searching for IE9 only CSS hacks. After a couple hours of searching, and combining the hacks found in Paul Irish's excellent post about Browser CSS Hacks I gave up. I just moved on. I settled for that 1px difference between every other browser and IE9.
Apparently my subconscience was still working on the problem for me. Suddenly had an idea, well, a question, actually:
"Whats new in IE9?"
I'll tell you whats new, media query expressions. Specifically, the and (min-width:value) part.

Update (18 May 2011): Mathias Bynens (twitter) posted a comment explaining that the :root selector is new in IE9! The @media all and (min-width:0) part as been removed in favor of this method. Thanks Mathias!

Update (13 June 2011):  This hack is a bit mysterious as doesn't work on all properties (like background, for instance) and isn't considered "safe" (yet). Checkout Mathias' post on safe css hacks.

Ta-freaking-Da:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

#element {     color:orange; } #element {     *color: white;    /* IE6+7, doesn't work in IE8/9 as IE7 */ } #element {     _color: red;     /* IE6 */ } #element {     color: green\0/IE8+9; /* IE8+9  */ } :root #element { color:pink \0/IE9; }  /* IE9 */

Demo:


I haven't tested this in IE 10 yet...so feel free to give it a go and let me know.
p.s. CSS hacks are usually bad. You should probably do this instead.