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.