Looking for a filter for IE8 complex media query rules

IE6(/7?) are fine with `@media screen {}` and `@media print {}`. However IE6(/7?) ignore complex media query rules after this, e.g. anything in […] is ignored in this example `@media screen, […] {}` If we had some way to make IE8 ignore complex media query rules (that also works for IE6-7), we could use it to serve a single mobile-first CSS file to all browsers while still giving IE6-8 media queried desktop styles PLZ FIND THAT WAY

by Jens Grochtdreis

HTML

<div>mofo’ing media queries in yo grill</div>

CSS

div {
    background: #666;
    line-height: 3em;
    text-align: center;
}

/* works in modern browsers, IE6, IE8 */
@media screen {
div {background: pink;}
}

/* work in modern browsers + IE6 */
@media screen, all and (min-width: 300px) { /* Dev Opera trick */
div {background: green;}
}
@media screen, /*\**/all and (min-width: 300px) {
div {background: purple;}
}
@media screen/*\**/, all and (min-width: 300px) {
div {background: brown;}
}
/*\**/@media screen, all and (min-width: 300px) {
div {background: #6c9;}
}
@media screen, foo and (min-width: 300px) {
div {background: white;}
}
@media all, screen and (min-width: 300px), all and (min-width: 300px) {
div {background: #936;}
}
@media screen, all and (min-width: 300px), all and (min-width: 300px) {
div {background: #963;}
}

/* work in modern browsers, don’t work in IE6 */
@media all and (min-width: 300px) {
div {background: blue;}
}
@media foo, screen and (min-width: 300px) {
div {background: #ddd;}
}
@media screen and (min-width: 300px), all and (min-width: 300px) {
div {background: #369;}
}


/* invalid (don’t work in conformant browser) */
/* don’t work in modern browsers or IE6/8 */
@media screen all and (min-width: 300px) {
div {background: red;}
}
@media screen, all and (min-width: 300px) \{
div {background: yellow;}
}
\@media screen and (min-width: 300px) {
div {background: #bbb;}
}
@/*\**/media screen, all and (min-width: 300px) { /* didn’t check IE6 */
div {background: #c96;}
}

/* don’t work in modern browsers, BUT work in IE6 */
@media screen\, all and (min-width: 300px) {
div {background: black;}
}
@\media screen, all and (min-width: 300px) {
div {background: #999;}
}
@media screen,, all and (min-width: 300px) {
div {background: #69c;}
}

JavaScript

// IE6(/7?) are fine with `@media screen {}` and `@media print {}`
// IE6(/7?) ignore complex media query rules after this, e.g. anything in […] is ignored in this example `@media screen, […] {}`
// if we had some way to make IE8 ignore complex media query rules (that also works for IE6-7), we could use it to serve a single mobile-first CSS file to all browsers while still giving IE6-8 media queried desktop styles

// PLZ FIND THAT WAY

/* Ref:
* http://dev.opera.com/articles/view/safe-media-queries/
* http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/ technique 3
* https://github.com/paulirish/html5-boilerplate/issues/816
* http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/
*/

// original: http://jsfiddle.net/boblet/59e99/