By Mat Marquis CHAPTER 5Eventually we realized that the test lined up closely with support for
media queries, which is the key component in our complex layouts and a far
more relevant test. In addition, it gave us a native method for conditionally
delivering these style sheets, removing the dependency on JavaScript.
Here, the basic style sheet is linked as usual. Everyone gets that. The
media="only all" attribute on the enhanced style sheet ensures that the
style sheet is only applied by browsers that understand media queries.
Of course, this means excluding older versions of IE — but we’ve given
ourselves some options there. We can still deliver our enhanced style
sheets to Internet Explorer through conditional comments, while ensuring
that versions of IE prior to the minimum version we’ve specified get
a perfectly usable basic experience. Rather than choosing a minimum
version of IE to support and leaving the site broken in earlier versions, we
simply provide earlier versions of IE with the basic experience.
We serve up our enhanced CSS the old-fashioned way for IE8 and
above, while other browsers will still use the media qualified link. True,
IE8 still doesn’t know what to do with a media query, so we might include
Filament’s Respond.js^9 , a lightweight script that parses and translates min-
width and max-width media query support for IE 6–8.