Here’s an alternative method for writing IE specific style rules without having to move them into separate files. The idea is to put your IE styles into a
@media block that will only be applied in certain versions of IE. I discovered this trick while looking for a way to write a media query pass-through filter for older versions of IE.
It’s a hack!
As with all CSS hacks this technique works by exploiting errors in a browsers style sheet parser. We’ll be using a combination of strategically placed
character escapes which IE will happily accept as valid syntax causing it to parse the
@media block and apply any style rules defined inside it. Other browsers correctly identify the syntax error and discard the
@media block along with its contents.
The @media rule hacks
To target IE 6 and 7
To target IE 6, 7 and 8
To target IE 8
To target IE 8, 9 and 10
To target IE 9 and 10
Using the hack
This says it all really:
Note that the
@media type can be any of the supported types, so rules in
@media screen will target screens and
@media print will only apply to print style sheets.
These hacks were discovered using a
@media syntax testing tool that I wrote for testing browser parsing of
I’m not advocating the use of these techniques, I’ve shared this information because it’s not documented anywhere. Use this if it suits you to do so but be warned, the word hack appears frequently in this post for a reason.