!!document.createElement('canvas').getContext

This line does several things. First, it uses two negation (!!) operators to coerce an undefined value explicitly to false. Then, it manually creates a canvas element and adds it to the DOM. Finally, it calls the getContext function, which is the most basic form of feature detection. Using this statement and similar ones provides a more reliable way to query the features supported by the browser. For more information on manual feature detection, see diveintohtml5.info/everything.html.

Using Modernizr for Feature Detection

Manual feature detection certainly improves over UA sniffing, but it still requires you to do a lot of work to check whether features are available and decide what to do when they are not. While the Canvas example is simple with just one line of code, not every feature you want to check will be that simple — detection code can vary across different browsers. For example, detecting support for the CSS3 modules used earlier (border-radius and box-shadow) can be a little tricky.

Fortunately, Modernizr (modernizr.com) offers a better way. Modernizr is a JavaScript library that “... detects whether a native implementation of the next generation web technologies (the features that derive from HTML5 and the CSS3 specifications) is available.” Adding a reference to Modernizr on your page provides the following four features:

1. Provides a comprehensive list of supported features, smartly adding classes for conditional CSS definitions.
2. A JavaScript object to facilitate feature detection using scripts.
3. Adds all HTML5 new tags to the DOM at runtime, making it easier for IE8 and earlier IE browsers to handle (and you will learn it does even more than that shortly).

4. A script loader that conditionally loads polyfills into the page.

This article will not delve deeper into the first item, but I encourage you to visit modernizr.com to learn about this feature and its documentation. For the second item above, you can change the following code:

!!document.createElement('canvas').getContext

to this line of code:

Modernizr.canvas

This line of code returns a boolean indicating if the page supports the Canvas element. The benefit of using Modernizr over doing feature detection yourself is that Modernizr is a well-tested, robust, widely adopted library that has done a lot of heavy lifting for you. Twitter, Google, Microsoft, and countless other organizations and developers are using Modernizr, and you can too. In the ASP.NET MVC 3 Toolkit update (released April 2011), Microsoft even bundled Modernizr with new ASP.NET MVC applications. Of course, what we have done so far is merely check if support for

if (Modernizr.canvas) { // Execute canvas code here. }

Add features to your site based on the additional browser capabilities, a practice called “progressive enhancement,” as the experience enhancement targets browsers with better capabilities. The opposite is “graceful degradation,” where the absence of a feature should not break or cause failure in the browser; rather, it should provide users with a diminished functionality or alternative capability. For older browsers, graceful degradation should not be assumed as the default option. In many cases, it may not even be the best choice. Instead, with the help of Modernizr, you can typically use several available browser polyfills to bring HTML5-like functionalities to browsers that do not support HTML5.

What is a Polyfill?

According to the Modernizr website, a polyfill is “a JavaScript supplement that replicates standard APIs on older browsers.” “Standard APIs” refer to HTML5 technologies or features, like Canvas. “JavaScript supplements” refer to the additional JavaScript code or libraries that are dynamically loaded to simulate these standard APIs in browsers that do not support them. For example, a geolocation polyfill can add a global geolocation object on the navigator object, as well as the getCurrentPosition function and the ‘coords’ callback object, all of which are defined by the W3C Geolocation API. Because polyfills mimic standard APIs, they enable development towards these APIs in a way that considers all browsers’ futures, with the ultimate goal being: once support for these APIs reaches a substantial majority, the polyfills can be easily removed without any extra work.

By adding a reference to Modernizr on the page, I received the direct benefit of polyfills related to this example. The page displayed without styles because IE8 does not recognize

Modernizr.load({

Modernizr.load({