By testndtv

2011-04-24 08:21:28 8 Comments

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


@Faraz Kelhini 2011-04-24 14:12:51

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

@testndtv 2011-04-24 17:39:54

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

@testndtv 2011-04-24 17:40:19

Not sure if I need to do something additional as well..besides including the script..

@Faraz Kelhini 2011-04-24 18:47:38

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" />

@testndtv 2011-04-24 18:59:39

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

@Capagris 2011-11-09 06:25:56

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

@John Slegers 2015-07-10 16:23:36

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

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

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"/>

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

@Aaron 2011-04-24 15:10:05

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"/>

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

@testndtv 2011-04-24 16:50:33

I want conditional CSS in terms of the media type (desktop/ipad, etc) and not exactly browser..

@James Westgate 2012-02-19 22:09:13

I dont see how conditional stylesheets will resolve a responsive design problem.

@Klikerko 2012-03-19 19:48:59

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.

@Jason 2013-01-08 04:18:55

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.

@Gregoire D. 2013-02-11 10:24:48

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 ?

@Arkana 2013-05-10 06:52:49

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

@Nick M 2013-12-09 23:55:25

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

@Typhoon101 2013-12-13 14:44:19

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.

@Pete Duncanson 2014-02-04 14:43:23

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.

@Athoxx 2014-02-20 21:48:18

+1 to @Typhoon101 for the mobile-first remark. Since Bootstrap 3, mobile-first has really taken off it seems.

@Brandon Pugh 2014-01-09 21:39:03

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>

It's also the recommended method if you're using bootstrap:

@sgarbesi 2014-08-18 06:35:24

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

@Luca 2014-09-10 10:46:07

Style rules defined in the that block will only be applied in IE8, other browsers will ignore them.

@John Slegers 2015-07-10 16:24:59

@Luca Additionally, it doesn't allow to specify a min-width, max-width, etc.

@Ben C 2014-02-19 05:05:41

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

@Bayo 2012-02-08 18:52:25

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.

@Vinicius Garcia 2014-05-27 03:36:01

+1 for telling me that doesn't work on @import'ed stylesheets! Save me a lot of time on my WP child theme.

@sra 2011-04-24 08:32:26

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.

@testndtv 2011-04-24 08:36:09

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

@testndtv 2011-04-24 08:38:27

Also as discussed on the link you gave, I tried setting the doctype as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> ...Still does not work..

@sra 2011-04-24 08:44:08

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 2011-04-24 08:47:35

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

@testndtv 2011-04-24 08:57:40

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?

@sra 2011-04-24 09:07:02

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

@testndtv 2011-04-24 09:10:38

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

@sra 2011-04-24 09:11:22

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.

@testndtv 2011-04-24 09:12:33

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

@sra 2011-04-24 09:18:01

Have you tried ie9? And try a relative and absolute path if you don't have done that already.

@testndtv 2011-04-24 13:02:58

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

@sra 2011-04-24 13:35:24

Ok I now searched for the problem an edited the answer. Bad news, sorry.

@testndtv 2011-04-24 13:44:43

What exactly does this JS Media queries polyfill do ?

@frequent 2013-06-11 07:09:57

Thanks for providing the info that IE supports screen & print. Good to know.

@Knu 2011-04-24 14:06:49

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.

@RichW 2012-06-14 16:01:53

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.

@somdow 2012-12-29 04:13:10

perfect, exactly what i was looking for!

@Ingusmat 2013-01-03 02:10:15

Thank you!! This answer, and respond.js, saved me a ton of time trying to do a workaround for mediaqueries in ie8.

@kaljak 2013-02-18 18:19:14

both do not work for me -> no javascript errors -> just doing nothing, any ideas?

@kaljak 2013-02-18 18:32:17

nevermind -> the .js should be included after the .css files ... xD

@Miles Pfefferle 2013-06-04 00:12:17

"Also won't listen to the media attribute of the <link> and <style> elements." Makes it kind of useless then, doesn't it?

@Anton Boritskiy 2013-07-18 17:33:33

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

@Sean 2014-02-06 18:30:17

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.

@Tristan Lee 2014-12-16 16:44:21

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.

@Wojtek 2016-11-04 00:49:48

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

@user1105491 2013-05-07 14:21:20

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.

@Boris Zbarsky 2011-04-24 14:01:11

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

Related Questions

Sponsored Content

33 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 2061097 View
  • 3208 Score
  • 33 Answer
  • Tags:   css css-selectors

24 Answered Questions

[SOLVED] Maintain the aspect ratio of a div with CSS

28 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1524496 View
  • 2288 Score
  • 30 Answer
  • Tags:   html css opacity

36 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

5 Answered Questions

[SOLVED] What is the difference between "screen" and "only screen" in media queries?

  • 2011-12-18 02:56:33
  • Jitendra Vyas
  • 382077 View
  • 490 Score
  • 5 Answer
  • Tags:   css media-queries

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 243224 View
  • 2829 Score
  • 19 Answer
  • Tags:   javascript html css

12 Answered Questions

[SOLVED] Is it possible to put CSS @media rules inline?

Sponsored Content