Looking for a filter for IE8 complex media query rules

Frameworks & Extensions

Fiddle Options

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

Normalized CSS

Body tag

DTD

Framework <script> attribute

External Resources

Languages

Results

Ajax Requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, //jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Legal, Credits and Links

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

Insights from hotjar.

Special thanks to MooTools community.

License

All code belongs to the poster and no license is enforced.

JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Links

Please read the documentation.
For updates please follow our blog, tweets or become a fan.

Keyboard shortcuts

HTML

JavaScript

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

CSS

Result