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.
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:
The script then executes those blocks if the specified conditions are met. You can see it action on the demo page.
Use whichever solution works best for you, but note that two things remain constant:
You should still begin with linearised styles and only apply
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]-->
Find photos that I took on April 12th, 2011.