Looking for a filter for IE8 complex media query rules

Fiddle Author

Fiddle Meta

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

Add title to make the fiddle public.

External Resources

AJAX Requests

/echo simulates AJAX calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/

See docs for more info.

Legal, Credits and Links

Created and maintained by Piotr and @oskar.

Hosted on DigitalOcean

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

About JSFiddle
Status page by updown.io

JSFiddle Roadmap suggest and vote for features

Like JSFiddle?

Keep us running by whitelisting JSFiddle in your ad blocker.

We're serving quality, tech-related ads only.

Thank you!

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

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

Fiddle Author

Fiddle Meta

External Resources

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

Tabs:

Visual:

Embed code Prefer iframe?:

Diff between the saved and locally drafted fiddle:

Fiddle Author

Fiddle Meta

External Resources

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options