Mess with the best, die like the rest… 

Facebook

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.

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; }
}

How to use?

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;
}
}

 

You must be logged in , to post a comment.

Home Uncategorized IE specific CSS into @media blocks
credit