What is Modernizr?

It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.

Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user’s browsers. Rather than blacklisting entire ranges of browsers based on “UA sniffing,” Modernizr uses feature detection to allow you to easily tailor your user’s experiences based on the actual capabilities of their browser.

With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.

What is feature detection?

In the dark ages of web development, we often had to resort to UA sniffing in order to determine if their user’s would be able to make use of Awesome-New-Feature™. In practice, that means doing something like the following

  if (browser === "the-one-they-make-you-use-at-work") {
    getTheOldLameExperience();
  } else {
    showOffAwesomeNewFeature();
  }

Now that looks ok, right? We are using Awesome-New-Feature™, and of course it isn’t supported in an old crusty browser like that, right? That could very well be the case – today. But what if the next version of that browser adds support for Awesome-New-Feature™? Now you have to Go back and audit your code, updating every single place that you are doing this check. That is assuming that you have the time to find out about every feature update for every single browser. Worse still, until you realize that it actually works in the newest version, all of those users back at the office getTheOldLameExperience, for no reason whatsoever.

Those users – given a substandard website for apparently no reason – can actually Go into their browser and OS settings and change the name of the browser (or user-agent – what we compare against in code when performing a UA sniff) to whatever they would like. At that point – your code is meaningless. You are blocking out users who may actually support all of your features, and possibly letting those in who don’t. Nearly everyone gets a broken experience. There has to be a better way!

There is, and it is called Feature Detection, and it looks more like this

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldLameExperience();
  }

Rather than basing your decisions on whether or not the user is on the “one-they-make-you-use-at-work“` browser, and assuming that means they either do or do not have access to Awesome-New-Feature™, feature detection actually programmatically checks if Awesome-New-Feature™ works in the browser, and gives you either a true or false result. So now as soon as your least favorite browser adds support for Awesome-New-Feature™, your code works there – automatically! No more having to update, ever. The code ends up being similar, but much more clear to its actual intention

Why do I need it?

All web developers come up against differences between browsers and devices. That’s largely due to different feature sets: the latest versions of the popular browsers can do some awesome things which older browsers can’t – but we still have to support the older ones.

Modernizr makes it easy to deliver tiered experiences: make use of the latest and greatest features in browsers which support them, without leaving LESS fortunate users high and dry.

official modernizr.com