Media queries and IE8

I am developing a website and the way he wants it basically works best with a wide pc screen, so am needing to look at the css3 mediq queries option so that I can try and make it a bit better of laptops, tablets etc, but the client is using a windows xp operating sytem with ie8.

So basically will the css3 media queries css files work with IE8?

No, IE8 doesn’t recognise them. There are some JavaScript workarounds if you really need support for that, or you could serve up a conditional style sheet for IE. but the @media rules will work ok for other devices, so you may not need to worry, unless the client is on a smaller device.

Hi ralph.m,

Thanks for getting back to me.

Ye thought as much, but like you say it will work for tablets and mobiles, so best thing to do I suppose is just carry on and do it.

Cheers

Since IE6-8 aren’t really found on mobile devices, I typically serve the full desktop CSS files using IE conditionals.


<link rel="stylesheet" href="mobile.css?201307291055" type="text/css" media="all">

<link rel="stylesheet" href="style.css?201307311704" type="text/css" media="only all and (min-width:850px)">

<!--[if (!IEMobile) & (lt IE 9)]>
    <link rel="stylesheet" href="desktop.css?201307311704" type="text/css">
<![endif]-->

There are also some javascript libraries to enable media query support: http://danielsworkshop.com/blog/2013/01/05/how-to-get-ie8-to-understand-css-media-queries/. However, I’ve never used them, so I can’t personally attest to their effectiveness.

Yes, it doesn’t really matter if older IEs don’t get @media rules, as they will still get your large screen styles if they are not within media queries.