Friday, April 8th, 2016
Saturday, October 29th, 2011
#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.
Tuesday, April 12th, 2011
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]-->
Saturday, January 29th, 2011
Visualising the Republic of Letters.