esedic
8/29/2017 - 6:18 PM

ie_media_queries_hack.css

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