178

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);
1
  • for those who want to try inline css with media and use respond(.min).js respond doesnt work in this situation - it seems it works for .css files Mar 17, 2017 at 9:46

11 Answers 11

339

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.

10
  • 7
    Why isn't this labelled as the answer? Perfect for me thanks. By the way you shouldn't use import css queries due to the overhead.
    – RichW
    Jun 14, 2012 at 16:01
  • perfect, exactly what i was looking for!
    – somdow
    Dec 29, 2012 at 4:13
  • Thank you!! This answer, and respond.js, saved me a ton of time trying to do a workaround for mediaqueries in ie8.
    – Ingusmat
    Jan 3, 2013 at 2:10
  • 3
    nevermind -> the .js should be included after the .css files ... xD
    – kaljak
    Feb 18, 2013 at 18:32
  • 4
    Respond worked, but css3-mediaqueries did not. I suppose it's because Respond is self-contained, but css3-mediaqueries relies on some jQuery functions like user-agent detection and this functions was deprecated and removed (see jQuery docs). Jul 18, 2013 at 17:33
78

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.

10
  • 94
    I dont see how conditional stylesheets will resolve a responsive design problem. Feb 19, 2012 at 22:09
  • 8
    I don't understand how would this solution solve responsive design in IE? Loading different stylesheet depending on browser had nothing to do with using different style properties depending on browser size for example.
    – Klikerko
    Mar 19, 2012 at 19:48
  • 13
    I think the right answer is that IE8 does not support media queries. This answer sort of says that but it's not entirely clear at first glance. Regardless, I thought it did have support and this answer did help me realize otherwise.
    – Jason
    Jan 8, 2013 at 4:18
  • 54
    It's true that this answer is not a responsive solution BUT and to me it's a huge "BUT", the fact is that IE8 is not used on iPad, or android tablets. IE8 could be use on XP/Vista PCs mostly from 2003 to 2009, screens mainly around 1024px wide. Windows Mobile is under IE6, and Windows Pone under IE9+. The true question here is to ask yourself if making responsive for IE8 is really useful ? Feb 11, 2013 at 10:24
  • 16
    @GregoireD. Yes it is. Because there are people who view web pages with zoom. In my company we format the pages since 4x zoom in 800x600, for accesibility. That makes a screen like 400px width. Media-queries are really useful for that, despite the browser you choose (and IE8 is included).
    – Arkana
    May 10, 2013 at 6:52
50

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

14

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

5
  • Ok..I just included the css3-mediaqueries.js in my page..Still it does not work in IE..i.e. the media query "@import url("desktop.css") not only screen and (device-width:768px);" as well as "@import url("desktop.css") not screen and (device-width:768px);" Apr 24, 2011 at 17:39
  • Not sure if I need to do something additional as well..besides including the script.. Apr 24, 2011 at 17:40
  • Please Note that it Doesn't work on imported css. try this: <link rel="stylesheet" type="text/css" media="not screen and (device-width:768px)" href="desktop.css" /> Apr 24, 2011 at 18:47
  • oh ok..I see. Actually in that case, it might not help me, as I am looking for something without doing anything on the page..i.e. only externally in the CSS.. Apr 24, 2011 at 18:59
  • That googletrunk css3 js script specifies that it only works with mediaquery being used inside the CSS stylesheet, rather than externally such as 'only screen and....'. This means you have to unify your stylesheets into one and inside them do what you wanted to do externally: @media screen and (max-width: 980px) {
    – Capagris
    Nov 9, 2011 at 6:25
11

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.

1
  • +1 for telling me that doesn't work on @import'ed stylesheets! Save me a lot of time on my WP child theme. May 27, 2014 at 3:36
8

An easy way to use the css3-mediaqueries-js is to include the following before the closing body tag:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
6

Edited answer: IE understands just screen and print as import media. All other CSS supplied along with the import statement causes IE8 to ignore the import statement. Geco browser like safari or mozilla didn't have this problem.

14
  • My IE is not in compatibility mode..Also is there any other alternate for IE..Basically I only want to select everything except a 768px screen device.. Apr 24, 2011 at 8:36
  • Also as discussed on the link you gave, I tried setting the doctype as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...Still does not work.. Apr 24, 2011 at 8:38
  • 1
    I am not shure if I got you right. You may use JavaScript to detect the screen resolution? With CSS there is no other way. Are you shure you don't have any related error with the is that cause the min to be overriden or ignored. A got tip is the is developer toolbar. With that you can test live without pagereloads
    – sra
    Apr 24, 2011 at 8:44
  • The is switching to quirk mode very fast, did you check that? That can also lead to unwanted result. Quirkmode will overwriting your doctype. It is also god practice to test just what you want in a super tiny project to enhure that it is not a related error/result
    – sra
    Apr 24, 2011 at 8:47
  • ok..Here is how I've updated now...I have common.css and inside it I say; ... @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px); Not sure if this approach is correct, but works for desktop (IE/FF) as well as iPad. Can there be some issue with this approach? Apr 24, 2011 at 8:57
6

Media queries are not supported at all in IE8 and below.


A Javascript based workaround

To add support for IE8, you could use one of several JS solutions. For example, Respond can be added to add media query support for IE8 only with the following code :

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

CSS Mediaqueries is another library that does the same thing. The code for adding that library to your HTML would be identical :

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

The alternative

If you don't like a JS based solution, you should also consider adding an IE<9 only stylesheet where you adjust your styling specific to IE<9. For that, you should add the following HTML to your code:

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

Note :

Technically it's one more alternative: using CSS hacks to target IE<9. It has the same impact as an IE<9 only stylesheet, but you don't need a seperate stylesheet for that. I do not recommend this option, though, as they produce invalid CSS code (which is but one of several reasons why the use of CSS hacks is generally frowned upon today).

5

Prior to Internet Explorer 8 there were no support for Media queries. But depending on your case you can try to use conditional comments to target only Internet Explorer 8 and lower. You just have to use a proper CSS files architecture.

4

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

I used @media \0screen {} and it works fine for me in REAL IE8.

2
  • Style rules defined in the that block will only be applied in IE8, other browsers will ignore them.
    – Luca
    Sep 10, 2014 at 10:46
  • @Luca Additionally, it doesn't allow to specify a min-width, max-width, etc. Jul 10, 2015 at 16:24
3

IE didn't add media query support until IE9. So with IE8 you're out of luck.

Not the answer you're looking for? Browse other questions tagged or ask your own question.