Posted on May 13 2011
in CSS
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:
Note that this hack also works in IE10pp4.
p.s. CSS hacks are usually bad. You should probably do this instead.