CHAPTER 5 Robust, Responsible, Responsive Web Design
Now, we’ve already gone to the trouble of ensuring that our site
remains useful, if not ideal, in browsers that don’t receive our enhanced
styles. In this way, we’ve bought ourselves some breathing room: should
we choose not to shim media query support for vastly outdated versions
of Internet Explorer, we can change our conditional comments to only
deliver the enhanced experience to IE8 and above, or serve them a separate,
static-width style sheet. Support for older versions of Internet Explorer is
no longer a black-and-white issue; we’re no longer painting ourselves into
a corner. We support older versions of IE, for certain, just differently. It just
so happens we do so in the most painless possible way for us, and in a way
that ensures users at the mercy of archaic browsers aren’t presented with
a Jackson Pollock painting of our site. It’s hard to argue with that, from any
angle.
There is one other catch aside from old IE support, and unfortunately
one that affects all other major browsers: when we qualify our style sheets
with media attributes, they aren’t applied, but they will be requested. This
makes sense since we never know if an environment is going to change. If
an external monitor is plugged in or a window is resized, we wouldn’t want
to wait for those new style sheets to be requested. As you can see from the
figure on the next page, browsers do tend to be a bit excessive about it.
These are, unfortunately, blocking requests. Even if the style sheet
could never possibly apply to a user’s context, the page will still be
prevented from loading while the style sheet is requested, downloaded and
then ignored by the browser.
We did some experimenting with asynchronously loading applicable
style sheets in a project named eCSSential^10 , but found that using
JavaScript to request our style sheets meant sidestepping a number of
browser-level optimizations. For the most part, eCSSential roughly broke
even with loading CSS the old-fashioned way — better in some browsers
and worse in others — but it did introduce a dependency on JavaScript.10 https://github.com/scottjehl/eCSSential