IE9 - IE10pp4 CSS Hack

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:

#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 + IE10pp4 */ } :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

Demo:

See the Pen hEbuL by David Murdoch (@davidmurdoch) on CodePen.

Note that this hack also works in IE10pp4.

p.s. CSS hacks are usually bad. You should probably do this instead.