Chapter 1
alongside the web standards, and the browser makers are directly involved in defining the very standards
they follow. Quite simply, as soon as a browser—or a few browsers, hopefully—supports a given feature,
that’s when you can use it.
You can get up-to-date information on which browsers support which new features in
HTML5 and CSS3 as well as some of the new JavaScript APIs at Can I Use
(caniuse.com) and at HTML5 Please (html5please.com).It probably goes without saying that only newer web browsers support the newer features of HTML and
CSS; older browsers couldn’t support what didn’t exist. However, not every web surfer out there is using
the very latest browser, and even among the latest versions, not every current browser supports every
new feature equally. Even so, you can still employ some of the more advanced features of HTML5 and
CSS3 without shutting out less capable browsers and devices by following progressive enhancement.
Progressive enhancement isn’t a specific technique; it’s a general methodology, a particular approach to
making websites that applies more advanced web technologies in a layered fashion. You’ll begin with pure
content and basic structure, then enhance that with additional layers of meaning, presentation, and
behavior in such a way that browsers and devices that support those enhancements can benefit from
them, but those that don’t support the enhancements can still access the original content.
Web browsers are pretty easy-going when it comes to parsing HTML and CSS. When a browser
encounters some piece of markup or styling it doesn’t support, rather than lock up and refuse to proceed,
the browser will simply ignore that unsupported code and continue on its merry way. The directive to
ignore unsupported code is baked right into the web standards. The browsers’ built-in fault tolerance is
what makes progressive enhancement possible; they’ll just skip over any code they don’t understand and
get on with rendering the code they already know.
With progressive enhancement, you can add bells and whistles from HTML5 and CSS3 without destroying
the nutritious kernel of content underneath. The real key to a progressive enhancement methodology is to
avoid making your websites completely dependent on a specific bell or whistle. Start simple and add layers
of complexity in such a way that each subsequent layer is an optional enhancement on top of the layer that
supports it.
First give your content a solid and stable structure with simple HTML that every web-capable device will
have no trouble processing. Enhance that basic structure with some of the more cutting edge parts of
HTML5 and browsers that don’t support the newer features will still have the basic structure to fall back on.
Use simple, well-supported CSS to further enhance your content and make it more presentable. Add in
some of the newer techniques from CSS3—the ones that only the latest browsers support—and older
browsers will still render the simpler, time-tested styling (and any devices that don’t even support the
simple styling will still fall back to the unadorned HTML). Enhance that styled content even further with
layers of behavior and interaction using JavaScript, and devices that don’t support the scripting will still
render readable, accessible, styled content.