Yesterday I documented the way I invoke media queries on Huffduffer while making sure that desktop versions of Internet Explorer get the layout styles. There’s an alternative way of serving up layout styles to IE that doesn’t involve splitting up your stylesheets.
Supersmart Scott Jehl has written a handy script called Respond that’s a textbook example of a browser polyfill:
A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will
In the case of Respond, you just need to make sure that you close every min/max-width media query declaration block with a comment:
/*/mediaquery*/
The script then executes those blocks if the specified conditions are met. You can see it action on the demo page.
The advantage of using this solution is that you don’t have to split up your styles into two documents (one for content styles, one for layout). The disadvantage is that it introduces a JavaScript dependency.
Use whichever solution works best for you, but note that two things remain constant:
You should still begin with linearised styles and only apply float and width declarations within media query blocks—think Mobile First (though I think of this as device-independence first).
You might still want to use a conditional comment to pull in Respond to avoid the extra HTTP hit for non-IE browsers. In that case, you may as well use the same clause to stop IE Mobile from parsing the script:
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="/js/respond.min.js"></script>
<![endif]-->