/*
* 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.
*/
/* 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 */
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.
*/