IE8 support for CSS Media Query

W

11

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

Wilmerwilmette answered 24/4, 2011 at 8:21 Comment(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 – Rhizoid 17/3, 2017 at 9:46

B

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.

Blockhead answered 24/4, 2011 at 15:10 Comment(10)

I want conditional CSS in terms of the media type (desktop/ipad, etc) and not exactly browser.. – Wilmerwilmette 24/4, 2011 at 16:50

I dont see how conditional stylesheets will resolve a responsive design problem. – Terrellterrena 19/2, 2012 at 22:9

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. – Informality 19/3, 2012 at 19:48

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. – Babs 8/1, 2013 at 4:18

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 ? – Admass 11/2, 2013 at 10:24

@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). – Raccoon 10/5, 2013 at 6:52

| Because there are people who view web pages with zoom. There are people who view web pages upside down sitting on toilet with 3 arms and 2 fingers. I think we can all agree with @GregoireD. that is it really that useful to account for this? Not very likely. – Sanity 9/12, 2013 at 23:55

I agree that IE8 doesn't support media queries, but I disagree it is not important. True responsive design should be built mobile up. That is, you design for a mobile device first, using small images with smaller file sizes, then use media queries to load bigger images for desktops. Mobile users get a much faster experience, desktop browsers get the benefit of larger, clearer images. However, the drawback is IE8 users suffer. There are several filler scripts which offer media queries in IE8 though, some of which are quite small. – Memphian 13/12, 2013 at 14:44

Blimey, lots of best practise drum banging on this one. Use IE conditionals is a totally practical solution, if the user is on IE8 they are not going to give a damn about your responsive site, include the desktop style in the conditionally included file for anything to do with width or position and it should look just fine as a fixed width site (gasp!). Also for the record css3-mediaqueries is not a magic bullet, it chokes if you have more than 32 media queries and it has a lag when resizing/loading. Go fixed width on < IE9 for sanity. – Jenness 4/2, 2014 at 14:43

+1 to @Memphian for the mobile-first remark. Since Bootstrap 3, mobile-first has really taken off it seems. – Maniac 20/2, 2014 at 21:48

S

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.

Spermous answered 24/4, 2011 at 14:6 Comment(10)

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. – Aristate 14/6, 2012 at 16:1

perfect, exactly what i was looking for! – Circumlunar 29/12, 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. – Joyajoyan 3/1, 2013 at 2:10

both do not work for me -> no javascript errors -> just doing nothing, any ideas? – Seymourseys 18/2, 2013 at 18:19

nevermind -> the .js should be included after the .css files ... xD – Seymourseys 18/2, 2013 at 18:32

"Also won't listen to the media attribute of the <link> and <style> elements." Makes it kind of useless then, doesn't it? – Kimsey 4/6, 2013 at 0:12

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). – Aeromarine 18/7, 2013 at 17:33

So instead of using sketchy javascript solutions, how about just not having a responsive site in ie8, and supporting the browsers meant to support it. I'm all for the first answer. And before you jump me and say "but it isn't an answer to his question", I know. But it's a better solution. – Vincents 6/2, 2014 at 18:30

It's only a "better solution" if you have other options. Respond.js worked great for me. Unfortunately some clients' internal apps must be IE8 compatible with no option to change browsers. – Septum 16/12, 2014 at 16:44

The script is relatively very slow. It took a couple of seconds to show the page on my old ThinkPad, Windows 7, IE8. I just speak from my experience. Upon removing the script, the page showed up immediately. To avoid javascript, the trick is to put all the desktop page rules at the top of the css, and then define media queries for small screens starting with something like (min-width: 100px). – Unorganized 4/11, 2016 at 0:49

B

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]-->