How to write IE Only styles ?

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.