Modernizr - Detecting HTML5 and CSS3 features in client browser easily! <Part 2>

Continuing with the Modernizr series, we now start with the implementation.

So how to go about implementing these compatibility checks?

Until recently, we have been using many techniques for Browser Detection, the most common of which is to use JavaScript for getting information from the user-agent header.

Listing 1 provides us an idea about implementing the user-agent header check (a.k.a. UA sniffing).

   1: <script type="text/javascript">   2: ieDetectionFunction(){   3:   if ( navigator.userAgent.indexOf("MSIE") > 0 ) {   4:     // Yes, we have IE, now do IE related stuff!   5:   }   6: }   7: </script>

Listing 1: Function with user-agent header check

Though UA sniffing has been a standard practice, nevertheless it poses some issues. Considering the above example, we are faced with the inability to ascertain the exact ‘MSIE’ version in this case. Moreover, it also doesn’t provide any function specific checking.

For checking versions, the workaround is to use the navigator object in combination with regular expressions to detect the various browsers and their exact versions.

Specifically, we would query the navigator.appName and navigator.userAgent properties. However, using this approach again won’t solve the feature detection handicap mentioned above.

It would be both faster and more reliable to have the ability of using probing functions which can confirm the availability of objects, methods, attributes and so on (i.e. catering to the 4 points mentioned in the previous section)

We can always create these probing functions which then query for the required stuff, and if not found return null. But the overheads for these custom monitor functions increase if we are having a big web based project, intended to run on multitude browsers.

Enter the JavaScript library, Modernizr.

Modernizr – an introduction

Modernizr provides standard detection functions which easily detect HTML5 and CSS3 based features. It is an MIT-licensed JavaScript library which readily detects the specifics of the HTML5 and CSS3 standards. What Modernizr actually does is to provide the developer with the information as to whether the current browser has native support for a particular feature or not.

Unlike the UA sniffing examples above, feature detection using this library is more reliable and convenient.

The developer version of the script library can be downloaded from http://modernizr.com/downloads/modernizr-latest.js. This URL always points to the latest version (which is v2.6.2 as of writing).

The above version is an uncompressed script version and contains all the possible checks the library offers. Ideally, this should be used for development and learning purposes.

For use in a production environment, a feature selection tool or a build tool is provided (http://modernizr.com/download/) which can be used for selecting only the required feature detection tests.

On generation, this will create a feature specific, optimized and compressed version of the script, ideal for production environment.

Figure 1: Screen shot showing the stats results after profiling JS code.

Using Modernizr hands-on

After getting the script to your local workspace, you need to include it in your document’s <head> tags.

   1: <!DOCTYPE html>   2: <html>   3: <head>   4:  <meta    5: charset="utf-8">   6:  <title>HTML5 feature detection via    7: Modernizr</title>   8:  <script    9: src="modernizr.min.js"></script>  10: </head>  11: <body>  12: <p>Having   13: Modernizr in my head!</p>  14: </body>  15: </html>

Listing 2: Including Modernizr script in an HTML document

After including it in your document, you have a variety of functions at your disposal to check for the required browser capability or features.

As we know in HTML5 the <canvas> element provides a bitmap based canvas for rendering custom graphics (chart or game related) and other images. So as an example, let’s use the script to check for the canvas element.

   1: if (Modernizr.canvas) {   2:  // Ok, we have the canvas, so use it!   3: }    4: else {   5:  // oops, no inbuilt canvas support! Our alternate code goes    6: here.   7: }

Listing 3: Checking for canvas support

So Listing 3 helps us confirm (easily) that the client browser is actually capable of showing our canvas effects, or if we have to use the fallback alternatives (which we need to have in place).

We can also couple up the element specific getter functions with the probing functions as shown in Listing 4.

   1: function getCanvasContext() {    2:  if (!canvasSupported()) {    3:     4:  return null;    5:  }   6:  var canvasObject =    7: document.createElement('canvas');    8:  var canvasContext =    9: canvasObject.getContext('2d');   10:  return canvasContext;   11: }  12:    13:    14: function canvasSupported(){   15:  if (Modernizr.canvas) {   16:    17:  return true;  18:  }   19:  else {  20:    21: return false;  22:  }   23: }

Listing 4: Creating a canvas context when canvas support exists in browser

There's many more ways and inbuilt functions to check for the browser specific HTML5 and CSS3 features.

You can explore these further by referring to the Modernizr homepage (check the links in the conclusion / follow-up section).

Modernizer – The shortfalls (what cannot be detected)

Although the Modernizr library tries to make feature speculation more conclusive, it does have its shortfalls. Some of the featured which are yet undetectable are:

· Drag/Drop feature

· Some UI detection (web-forms / date-picker / color-picker UI etc.)

· Audio / Video loop attribute

· Font rendering effects (anti-aliasing, smoothening etc.)

· Keyboard events and event process priority (mouse & keyboard) and so on.

It is hoped that the coming versions would cater to more feature checks, until then the above features can be detected with use of older techniques like UA sniffing.

Links in this conclusion section can be pursued for further details and usage of the same.

Conclusion & follow up

The above introduction should help us evaluation browser capabilities faster and more accurately. In coming issues we will further discuss HTML5’s other new concepts. More information about Modernizr can be had by visiting the following links:

· About HTML5 – http://en.wikipedia.org/wiki/HTML5

· HTML5 & CSS3 latest features in action! A video presentation - http://channel9.msdn.com/Events/Build/2012/3-114

· Modernizer Homepage - http://modernizr.com/

· Modernizer Github - https://github.com/Modernizr/Modernizr

· HTML fallback list – https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

· Modernizr Undetectable features – https://github.com/Modernizr/Modernizr/wiki/Undetectables