Use Modernizr to build cutting-edge websites

Modernizr is a small open-source JavaScript library designed to detect the availability of native implementations of HTML5 and CSS3 features.

ModernizrNew cool and innovative web technologies appear rapidly and developers try to use them in their solutions. And it is great, and helpful, and logical, until the moment you realize there are browsers that lag behind. For instance, the HTML5 and CSS3 specifications are only partially implemented or even nonexistent in some browsers. So how to find out which techniques are accessible, what feature to use and where apply workaround? Modernizr can help to handle this issue.

Modernizr is a small open-source JavaScript library designed to detect the availability of native implementations for next-generation web technologies. It checks whether HTML5 and CSS3 features are supported by the user’s browser. With the information received from Modernizr, designers can take full advantage of these new features if the browsers can implement them. If not, they will have easy and reliable means of controlling the user experience and creating fallbacks for browsers that lack support.

Modernizr encourages usage of progressive enhancement. This library itself was built based on this principle - develop website layer by layer, begin with a JavaScript-free foundation, then add layers of enhancement one by one. Modernizr is perfect tool for progressive enhancement. It is easy to detect what the browser is capable of.

How Modernizr works

Modernizr applies feature detection, rather than checking the browser's property, since it is a more reliable technique to establish what can and cannot be done in the current browser. This library offers tests for over 150 next-generation features. They are run quickly on page load, all in a matter of milliseconds. Then Modernizr creates a JavaScript object (named "Modernizr") with the results of these tests (displayed as boolean properties). It also adds classes to the HTML element explaining what features are and are not natively supported. Modernizr provides a script loader YepNope.js so you can pull in polyfills or other external .js and .css resources to backfill functionality in old browsers.

For more detailed information visit modernizr.com.

Connect with our experts Let's talk