HTML5 Recipes: Using Modernizr

In an earlier recipe, we looked at tools like HTML5Test and CaniUse to determine browser capabilities. These are websites that you access from the browser that you want to check for a particular HTML5 feature. While this might suffice while you are learning, developing or planning out which HTML5 feature to incorporate, you still do not have any control over the browser that your users might use to access your brand new web application, which incorporates some nifty HTML5 stuff.

The approach typically taken is put in the appropriate detection logic in your Javascript and then incorporate a fallback logic in case there is no support. The common way to go around that is via an if-else statement. To do that, you will need to have a good handle over the particular Javascript object that represents the HTMl5 feature that you want to detect support for in your browser. For e.g. consider the following snippet of code, taken from an earlier post on Geolocation.

var geoService = navigator.geolocation;
 	if (geoService) {
  		alert("Your Browser supports GeoLocation");
  		navigator.geolocation.getCurrentPosition(showCurrentLocation,errorHandler,{enableHighAccuracy: true});
  	} else {
  		alert("Your Browser does not support GeoLocation.");
  	}

The above code uses the fact that we need to check for the presence of the navigator.geolocation object. If that object is present i.e. your browser supports it, then we invoke the methods supported by the object. If the object is not present, then we need to fallback to either displaying a message that it is not supported (as the above code indicates) or in some cases probably make some other call (over network or use some plugin, etc).

The point is that as a developer you will need to know about all these objects and check for them depending on the functionality that you need in your application. What if there was a library, then did all the heavy duty lifting of knowing these internal objects and support of certain HTML5 features and then simply let us invoke detection in our Javascript code in a simple and consistent fashion. Not just that, it would be great if it was extensible in the sense that if new elements and support get added, we still follow the same consistent way to detecting those new features too. We do have a great library that is available to us, called Modernizr and it is used by several web sites today to detect features and fallback in a consistent manner.

The Modernizr library as the site mentions is a Javascript library that helps you detect emerging technologies like (HTML5, CSS3) in your browsers with an easy way to fallback in case the feature in not supported in current or older browsers. Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false. What the Modernizr library does at startup is to immediately detect a set of several features and then create a Modernizr object that contains the results of these tests as boolean properties. So if a particular feature is supported, you can simply check for a boolean property, where true will indicate that it supports it and false means that it does not support it. For a full list of features that it supports, please visit the documentation page.

To incorporate Modernizr in your web page, simply follow these steps:

  • Download the latest version of modernizr from the official website. The current release is 1.6.
  • Include the above script file in your web page.
  • Incorporate code to detect a particular feature by using the global Modernizr object. For e.g. Modernizr.geolocation evaluates to true if the your browser has Geolocation support.

The above code can be rewritten as shown below:

if (Modernizr.geolocation) {
		alert("Your Browser supports GeoLocation");
		navigator.geolocation.getCurrentPosition(showCurrentLocation,errorHandler,{enableHighAccuracy: true});
	} else {
		alert("Your Browser does not support GeoLocation.");
	}

Similarly, if you wish to check for Session or Local Storage, you can use Modernizr.sessionstorage and Modernizr.localstorage respectively. Modernizr does much more than just detecting features and I suggest that you check out the official site and make Modernizr a part of your HTML5 arsenal, just like how other applications have done.


HTML5 Feature Detection Recipes

  1. Browser Capabilities Tools
  2. Using Modernizr

Back to HTML5 Series

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s