HTML5, Cascading Style Sheets level 3 (CSS3), and related technologies such as canvas and WebSockets bring many useful new features to the table that
can take web applications to the next level. These new technologies enable applications to be built using only HTML, CSS, and JavaScript, allowing them
to be viewed on a variety of form factors, including tablets and smartphones. Although HTML5 features offer a lot of promise, it isn't realistic to
develop applications using the latest technologies without worrying about supporting older browsers in the process. If history has taught us anything,
it's that old browsers stick around for years, which means that developers have to deal with backward-compatibility issues. This is especially true
when deploying to the Internet applications that target the general public. This begs the question "How can you move forward with HTML5 and CSS3
technologies while gracefully handling unsupported features in older browsers?"
Although you can write code by hand to detect different HTML5 and CSS3 features, doing so is not always straightforward. For example, to check for
canvas support, you need to write code similar to the code shown in Figure 1. Or, if you want to check for local storage support, you can write code
like that in Figure 2 to perform a check. This check is more involved than it should be because of a bug in older versions of Firefox that has to be
accounted for.
Looking through the code in Figure 1 and Figure 2, you can see that there's more than meets the eye when it comes to checking browsers for HTML5 and CSS3
features. It takes a lot of work to test every possible scenario and every version of a given browser. Fortunately, you don't have to resort to writing
custom code to test what HTML5/CSS3 features a given browser supports. By using a script library called Modernizr, you can add
checks for different HTML5/CSS3 features into your pages with a minimal amount of coding on your part. Let's look at some of the key features Modernizr
offers.
Getting Started with Modernizr
The first time I heard the name "Modernizr," I thought it "modernized" older browsers by added missing functionality. In reality, Modernizr doesn't
actually handle adding missing features or "modernizing" older browsers. The Modernizr website states, "The name Modernizr actually stems from the goal
of modernizing our development practices (and ourselves)." Because it relies on feature detection rather than browser sniffing (a common technique used
in the past - and that never worked well), Modernizr definitely provides a more modern way to test features that a browser supports and can even handle
loading additional scripts, called shims or polyfills, that fill in holes that older browsers might have. It's a great tool to have
in your toolkit if you're a web developer.
Two different types of scripts are available for download on the Modernizr website: a development script and a custom production script. To generate a
production script, the site provides a custom script-generation tool rather than providing a single script that has everything under the sun for
HTML5/CSS3 feature detection. Using the script-generation tool, you can pick the specific test functionality that you need and ignore everything that
you don't need. That way, the script is kept as small as possible. Figure 3 shows an example of the custom script download screen. Notice that specific
CSS3, HTML5, and related feature tests can be selected.
Figure 3: The Modernizr custom script download screen
Once you've downloaded your custom Modernizr script, you can add it into your web page using the standard <script> element, as in the following
code:
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
Now you're ready to start using Modernizr.
Modernizr and the HTML Element
Once you've add a script reference to Modernizr in a page, Modernizr will go to work for you immediately. In fact, adding the script will add several
different CSS classes to the page's <html> element at runtime. These classes define what features the browser supports and what features it
doesn't support. Features that aren't supported get a class name of "no-FeatureName" -- for example, "no-flexbox." Features that are supported get a
CSS class name based on the feature, such as "canvas" or "websockets." Figure 4 shows an example of classes added by Modernizr when running a page in
Chrome. Figure 5 shows an example of what the <html> element looks like at runtime with Internet Explorer (IE) 9.
When using Modernizr, it's a common practice to define an <html> element in your page with a no-js class added, like this:
<html class="no-js">
You'll see starter projects such as HTML5 Boilerplate or Initializr that follow this approach. (See my
article "Getting Started Using HTML5 Boilerplate," for more information about HTML5 Boilerplate.)
Adding the no-js class makes it easy to tell whether or not a browser has JavaScript enabled. If JavaScript is disabled, then no-js will stay on the
<html> element. If JavaScript is enabled, no-js will be removed by Modernizr and a js class will be added along with other classes that define
supported and unsupported features.