RSS Subscribe to my blog

Media Queries and Internet Explorer : Feb 01 2013

Web Design, Tutorials / Comments

Inspector Gadget

There are many methods of dealing with Internet Explorer 8 and under when it comes to responsive layouts and using media queries etc.

Polly and Phil

I did use respond.js for a while, but it didn't have total media query support last time I checked (not declarations come to mind), and you also have to rely on the script being maintained to keep up with media query advancements. I guess this is a usual consideration when using a JavaScript polyfill. They aren't silver bullets, and an acceptance of this, and an appropriate expectation of what they can do, is always needed.

There is also the consideration of how things look with JavaScript disabled. Depending on how you are approaching responsive layouts, your design will either fallback to an inappropriate layout designed for smaller resolutions, or actually look a mess if - like me - you specify global styles outside of media queries first, rather than the "mobile first" approach. Swings and roundabouts on that score.

Conditional comments

This is what I now lean towards. The thing I have always liked about conditional comments is the clear segmentation between the good stuff, and the stuff you put in that says: "OK. Look. Whatever IE. Just do this and get out of my face you swine you!"

Here are a couple of conditional comment examples. Notably the ones for IE8 and under, and IE7 and under:

<!--[if lt IE 9 ]>
<link rel="stylesheet" href="ie8_and_under.css" />

<!--[if lt IE 8 ]>
<link rel="stylesheet" href="ie7_and_under.css" />

Straight out of the box

What I also now use, to make % values a whole load easier to calculate and implement, is:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

This basically allows you to specify a width that includes padding and border values within it, which is extremely useful.

But the issue is that IE7 and under do not support box-sizing, and of course IE8 and under do not support media queries. Bum.

Oh what to do?

An easy method is to segment your CSS so all your standard desktop rules live in a separate CSS file, that can then be placed between the appropriate media queries, but also then included as a stand-alone CSS file for IE8 and under. Voilà. The fallback is a fully working "desktop" version of the site for IE8 and under. Or is it?

We're not finished there ...

Meh! We still have the box-sizing issue in IE7 and under. My approach is to add adjusted values to an IE7 and under CSS file. But going through all the CSS to recalculate values manually can be a bit of a chore. And so:

Browser developer inspection tools to the rescue!

I find that if you open your site up in a modern browser, resize the window to the desktop resolution, you can then use developer tools to inspect elements and view the output values for widths and such:

  • In Firebug you'll find these values under the Layout tab whilst inspecting
  • In Chrome they are listed in Computed Style

So the tools have done the math for you. You can then copy these values into a separate style sheet for IE7 and under. Jobs a'good'un.




Keyword Search for an Article:

Article Category List:

Article by Date:


Latest Articles:

Flat has some depth

Web Design

A post in-which I discuss the fact that flat web design is more than a passing trend, and also some reasoning as to why it...  ( more )

Twitter & Flickr