IE8 support for CSS Media Query

Question

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

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 — NoWomenNoCry, Mar 17 '17 at 09:46

score 339 · Answer 1 · edited Jul 08 '13 at 12:50

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.

edited Jul 08 '13 at 12:50

Dave Everitt

17,193
6
67
97

answered Apr 24 '11 at 14:06

Knu

14,806
5
56
89

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 '12 at 16:01
perfect, exactly what i was looking for! – somdow Dec 29 '12 at 04: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 03 '13 at 02:10
both do not work for me -> no javascript errors -> just doing nothing, any ideas? – kaljak Feb 18 '13 at 18:19
3

nevermind -> the .js should be included after the .css files ... xD – kaljak Feb 18 '13 at 18:32
"Also won't listen to the media attribute of the and – Miles Pfefferle Jun 04 '13 at 00:12
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). – Anton Boritskiy Jul 18 '13 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. – Sean Feb 06 '14 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. – Tristan Lee Dec 16 '14 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). – Wojtek Nov 04 '16 at 00:49

score 78 · Accepted Answer · edited Feb 04 '15 at 10:20

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.

edited Feb 04 '15 at 10:20

Ronald Wildenberg

31,634
14
90
133

answered Apr 24 '11 at 15:10

Aaron

1,573
11
10

4

I want conditional CSS in terms of the media type (desktop/ipad, etc) and not exactly browser.. – copenndthagen Apr 24 '11 at 16:50
94

I dont see how conditional stylesheets will resolve a responsive design problem. – James Westgate Feb 19 '12 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 '12 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 08 '13 at 04: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 ? – Gregoire D. Feb 11 '13 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 '13 at 06:52
2

| 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. – Nick M Dec 09 '13 at 23:55
4

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. – Typhoon101 Dec 13 '13 at 14:44
5

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. – Pete Duncanson Feb 04 '14 at 14:43
+1 to @Typhoon101 for the mobile-first remark. Since Bootstrap 3, mobile-first has really taken off it seems. – InanisAtheos Feb 20 '14 at 21:48

score 50 · Answer 3 · edited Oct 17 '14 at 08:55

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

Faraz Kelhini · Answer 4 · 2016-03-29T11:00:22.077

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

edited Mar 29 '16 at 11:00

answered Apr 24 '11 at 14:12

Faraz Kelhini

3,925
32
38

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);" – copenndthagen Apr 24 '11 at 17:39
Not sure if I need to do something additional as well..besides including the script.. – copenndthagen Apr 24 '11 at 17:40
Please Note that it Doesn't work on imported css. try this: – Faraz Kelhini Apr 24 '11 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.. – copenndthagen Apr 24 '11 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 09 '11 at 06:25

score 11 · Answer 5 · edited Sep 02 '13 at 15:32

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.

edited Sep 02 '13 at 15:32

DisgruntledGoat

70,219
68
205
290

answered Feb 08 '12 at 18:52

Bayo

251
2
4

+1 for telling me that doesn't work on @import'ed stylesheets! Save me a lot of time on my WP child theme. – Vinicius Garcia May 27 '14 at 03:36

score 8 · Answer 6 · edited Aug 12 '14 at 14:26

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

edited Aug 12 '14 at 14:26

Chris Marisic

32,487
24
164
258

answered Feb 19 '14 at 05:05

Ben C

395
3
8

John Slegers · Answer 7 · 2015-12-07T11:37:21.170

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

score 6 · Answer 8 · edited Aug 14 '13 at 20:45

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.

edited Aug 14 '13 at 20:45

adardesign

33,973
15
62
84

answered Apr 24 '11 at 08:32

sra

23,820
7
55
89

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.. – copenndthagen Apr 24 '11 at 08:36
Also as discussed on the link you gave, I tried setting the doctype as ...Still does not work.. – copenndthagen Apr 24 '11 at 08: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 '11 at 08: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 '11 at 08: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? – copenndthagen Apr 24 '11 at 08:57
The the import tag should end after the closing ); for what is the text behind. I've never seen that sand don't think it is conform.? – sra Apr 24 '11 at 09:07
See..It is just a simple CSS with 2 imports one after the other : @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px); – copenndthagen Apr 24 '11 at 09:10
Ah I know what you wanna do... I don't think that will work in ie. I am on ny smartphone so I can test it myself. – sra Apr 24 '11 at 09:11
Yes..I want Set1.css for iPad and Set2 for everything else...(with an option to extend it in future for other tablets..e.g. Xoom).. Also added code in my orig question.. – copenndthagen Apr 24 '11 at 09:12
Have you tried ie9? And try a relative and absolute path if you don't have done that already. – sra Apr 24 '11 at 09:18
Hey..Do you think it is actually a path issue and NOT a media issue? I mean @import url("desktop.css") screen; works correctly in IE8, while if I write @import url("desktop.css") not only screen and (device-width:768px); that does not work...So in both cases, the only diff is the media.. Could you please help.. – copenndthagen Apr 24 '11 at 13:02
Ok I now searched for the problem an edited the answer. Bad news, sorry. – sra Apr 24 '11 at 13:35
What exactly does this JS Media queries polyfill do ? – copenndthagen Apr 24 '11 at 13:44
Thanks for providing the info that IE supports `screen & print`. Good to know. – frequent Jun 11 '13 at 07:09

score 5 · Answer 9 · answered May 07 '13 at 14:21

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.

answered May 07 '13 at 14:21

user1105491

101
2
2

score 4 · Answer 10 · answered Aug 18 '14 at 06:35

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.

answered Aug 18 '14 at 06:35

sgarbesi

339
4
6

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

score 3 · Answer 11 · answered Apr 24 '11 at 14:01

3

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

answered Apr 24 '11 at 14:01

Boris Zbarsky

34,758
5
52
55

IE8 support for CSS Media Query

11 Answers11

A Javascript based workaround

The alternative

Linked

Related