responsive web design technical notes

responsive web design technical notes

responsive web design technical notes

It should be noted that media queries enjoy incredibly robust support among modern browsers. Desktop browsers such as Safari 3+, Chrome, Firefox 3.5+, and Opera 7+ all natively parse media queries, as do more recent mobile browsers such as Opera Mobile and mobile WebKit. Of course, older versions of those desktop browsers don’t support media queries. And while Microsoft has committed to media query support in IE9, Internet Explorer currently doesn’t offer a native implementation.

However, if you’re interested in implementing legacy browser support for media queries, there’s a JavaScript-tinted silver lining:

•A jQuery plugin from 2007 offers somewhat limited media query support, implementing only the min-width and max-width media properties when attached to separate link elements.

•More recently, css3-mediaqueries.js was released, a library that promises “to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test, and apply CSS3 Media Queries” when included via @media blocks. While very much a 1.0 release, I’ve personally found it to be quite robust, and I plan to watch its development.

But if using JavaScript doesn’t appeal, that’s perfectly understandable. However, that strengthens the case for building your layout atop a flexible grid, ensuring your design enjoys some measure of flexibility in media query-blind browsers and devices.

Posted 2016-03-13 05:30:56