How to get IE6-8 to understand CSS media queries

Option 1 – Apply “mobile first” methodology

A “mobile first” approach which treats IE6-IE8 the same as mobile devices (source: Craig Buckler) is probably the best approach if you have the luxury of having enough time to write your CSS from scratch. However, this may not always be possible.

Option 2 – Use a JavaScript library

There are some JavaScript libraries you can use to add support for media queries to IE6-IE8.

  1. Respond.js – “The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under.”
  2. css3-mediaqueries.js – “A JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries.”

What are the pros and cons of Respond.js and css3-mediaqueries.js? css3-mediaqueries.js provides more comprehensive, robust support for media queries; but the downside is that it’s (reputedly) slower than Respond.js. Respond.js is focused solely on providing support for min-width  and max-width features, and ignores another aspects of the CSS3 media queries standard. But in my book, this isn’t really a disadvantage, because min-width and max-width are the only features I am using in my responsive design process today.

The bottom line

Respond.js is probably the best solution in most situations where you need to get your responsive design working on IE6-8. It’s lightweight, it’s fast, and there is even a WordPress plugin for Respond.js.

One thought on “How to get IE6-8 to understand CSS media queries

Leave a Reply

Your email address will not be published. Required fields are marked *