HTML and CSS Reference
In-Depth Information
At this point, the form is more or less fully functional for most recent versions of all
browsers (with the exception of Safari). In the next section, you'll learn how to perform
rock-solid feature detection using the Modernizr library and how to plug feature gaps using
polyfills.
2.5. Providing fallbacks for unsupported browsers
One of the main drawbacks to using HTML5's new features is that browser support isn't
uniform. Thus, you need to find ways to allow those with the latest and greatest browsers to
make use of HTML5 features while ensuring that those using slightly older versions aren't
left behind.
In this section, you'll learn
• How Modernizr simplifies detection of browser support for various features of
HTML5 and conditionally loads fallbacks
• How to plug gaps in browser support with polyfills, a JavaScript fallback, that will
only deploy if the browser lacks native support
• How to use JavaScript to implement basic fallback validation for those browsers
that don't yet fully support the Constraint Validation API
You'll learn about these topics as you build out your form using these three steps:
• Step 1: Build feature detection and conditionally deploy a fallback for month-pick-
er.
• Step 2: Build fallback constraint validation for Safari 5.1.
• Step 3: Build fallback constraint validation for IE9.
First up, though, we'd like to give you an overview of feature detection with Modernizr.
2.5.1. Detecting features and loading resources with Modernizr: an overview
An important concept when you're working with HTML5's new APIs is that of feature
detection—testing to see if the browser supports a given feature. Unfortunately, the ap-
