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.