Moving IE specific CSS into media blocks

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 \0, \, and \9 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

@media screen\9 {
    body { background: red; }
}

To target IE 6, 7 and 8

@media \0screen\,screen\9 {
    body { background: green; }
}

To target IE 8

@media \0screen {
    body { background: blue; }
}

To target IE 8, 9 and 10

@media screen\0 {
    body { background: orange; }
}

To target IE 9 and 10

@media screen and (min-width:0\0) {
    body { background: yellow; }
}

Using the hack

This says it all really:

body {
  background: pink;
}

/* IE 6 and 7 fallback styles */
@media all\9 {
    body {
        background: red;
    }
    h1 {
        color: yellow;
    }
}

/* IE 6 and 7 fallback print styles */
@media print\9 {
    body {
        color: blue;
    }
    h1 {
        color: red;
    }
}

Note that the @media type can be any of the supported types, so rules in @media screen\9 will target screens and @media print\9 will only apply to print style sheets.

Testing tool

These hacks were discovered using a @media syntax testing tool that I wrote for testing browser parsing of @media blocks.

Disclaimer

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.

Federico Panico 08 November 2012

Just a small typo: Last line, where it says "work" it should say "word". Had to think a moment to understand what you intented to say. :)

Keith Clark 08 November 2012

I've updated the post. Thanks for pointing that out.

Florian Grell 08 November 2012

This is good news for mobile first. Now you can keep your stylesheets together. I made a quick test and this worked (IE9/Win7):

body { background:red; }
@media \0screen\0,screen\9,screen and (min-width:640px) {
    body {background:green;}
}

Keith Clark 09 November 2012

That hack seems to apply the @media rules to every browser except IE8. It also causes IE9 and IE10 to ignore the media query all together.
Keith Clark 09 November 2012
A better solution for the above would be:
```
@media screen and (min-width:640px), screen/9 {
    body {
        background: green;
    }
}
```
This allows all non-IE browsers to render the styles and keeps media query support in IE9/10. It also creates a pass-through filter for IE6/7 but we're still stuck with IE8 ignoring the entire block.

Conor 09 November 2012

Nice tip, thanks!

But... "Here’s an alternative method for writing IE specific style rules without having to move them into separate files"

I personally like keeping my IE rules in a separate stylesheet. Partially just to punish IE users, and mainly to keep my main CSS pure :) To each their own I guess. This method could still be used inside the IE stylesheet too though to hit the different versions.

Keep up the good blog :)

Christian Krammer 14 November 2012

Since these are only hacks I wouldn't recommend them to anyone. In particular because Conditional Comments are the "official" way and far away from hacks, I can see no point for the media blocks. But thanks for the clarification. ;)