New Perspectives On Web Design

(C. Jardin) #1
By Mat Marquis CHAPTER 5

iOS6, Android 4.0, Chrome 24,
Firefox, IE 9, Opera 12 Opera 11
only all Downloaded Downloaded

(min-width: 9999px) Downloaded Downloaded
(min-device-width:
9999px) Downloaded Downloaded
(min-device-
pixel-ration: 7) Downloaded Downloaded
tv Downloaded Downloaded
handheld Downloaded Downloaded
dinosaur Downloaded No request

While eCSSential didn’t give us the definitive way forward we’d been
hoping for, it did lead to a number of bugs filed against browsers, and
conversations are taking place right now about how browsers might
asynchronously download inapplicable style sheets in an optimized, non-
blocking way.


JavaScript
The same approach we took with our CSS applies to our custom JavaScript:
we start with a basic set of scripts for everyone, and use the same test to
determine whether they get the enhanced JavaScript experience: media
query support.
The initial JavaScript payload includes: Filament’s Enhance.js^11
to conditionally request scripts and style sheets; Modernizr^12 as our


11 https://github.com/filamentgroup/enhance
12 http://modernizr.com/


Requested media attribute table: Interestingly, somewhere between version 11 and 12, Opera
decided that it should account for me plugging my laptop into an external brachiosaurus.
Free download pdf