The need of feature detection

When there’s a new feature coming to web world. It takes some time to be adopted by browsers and web clients. Same thing happened.. In fact happening with HTML5 and CSS3. Not ever browser supports every feature of HTML5 and CSS3..

What? Modernizr? What is it?

Modernizr is a javascript library which detects features that are implemented by the next generation web technologies HTML5 and CSS3.

No more User Agent Sniffing

When Modernizr came in to existance, UA Sniffing was no more needed. Rather than using highly inconvenient method of detecting browser using navigator.userAgent, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do.

Getting Started!

First things first, download Modernizr

Download Modernizr

Create an HTML Document and include Modernizr

You can create a new HTML document using standard HTML5 syntax and use <script> </script> to include modernizr.js.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Dive Into HTML5</title>
 <script src="modernizr.min.js"></script>
</head>
<body>
 ...
</body>
</html>

Let’s detect

We can detect any HTML5 feature by writing a function with a lot of code in it. Well, this traditional method works but why use it if we can achieve same thing with a single line of code? Let me illustrate it with an example.

Suppose I want to check if a browser supports HTML5’s canvas feature. I would write the function below that checks whether the browser supports canvas function or not.


function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

function support_canvas() will return boolen value either true or false. Well, though this is a single line code as well, this takes much more effort if you compare it with a simple modernizer detection function.


if (Modernizr.canvas) {
 // let's draw some shapes!
} else {
 // no native canvas support available
}

Isn’t it simple enough? You can detect almost every HTML5 feature with Modernizr. The table below lists remaining functions that can be detected using Modernizr.

HTML5-related featuresModernizr property (class)
Application cacheapplicationcache
Audioaudio.type (ogg, mp3, wav, m4a)
Canvascanvas
Canvas textcanvastext
Drag and dropdraganddrop
Form input attributesinput.attributeName
Form input elementsinputtypes.elementName
Geolocationgeolocation
hashchange eventhashchange
History managementhistory
IndexedDBindexeddb
Inline SVGinlinesvg
Local storagelocalstorage
Messagingpostmessage
Session storagesessionstorage
SMILsmil
SVGsvg
SVG clip pathssvgclippaths
Touch eventstouch
Videovideo.type (ogg, webm, h264)
WebGLwebgl
Web socketswebsockets
Web SQL databasewebsqldatabase
Web workerswebworkers

Isn’t it easy to use and must to have feature? Life’s so easy with libraries like Modernizr.

HTML5, the next big thing!

Well, HTML5 alone is a big itself. Flash and Silverlight killer at some extent I would say. I don’t care what Zuckerberg say, HTML5 makes web world easy. I hope developers will stop arguing and adopting this beautiful thing. Let’s make use of it.