IE8 support for CSS Media Query

Does IE8 not support the following CSS media query:

@import url("desktop.css") screen and (min-width: 768px);

If not, what is the alternate way of writing? The same works fine in Firefox.

Any issues with the code below?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script's site) it "doesn't work on @imported stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements".

In the same vein you have the simpler Respond.js, which enables only min-width and max-width media queries.

Internet Explorer versions before IE9 do not support media queries.

If you are looking for a way of degrading the design for IE8 users, you may find IE's conditional commenting helpful. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

This won't allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.

The best solution I've found is Respond.js especially if your main concern is making sure your responsive design works in IE8. It's pretty lightweight at 1kb when min/gzipped and you can make sure only IE8 clients load it:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

It's also the recommended method if you're using bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (and lower versions) and Firefox prior to 3.5 do not support media query. Safari 3.2 partially supports it.

There are some workarounds that use JavaScript to add media query support to these browsers. Try these:

Media Queries jQuery plugin (only deals with max/min width)

css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

Taken from the css3mediaqueries.js project page.

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements.