Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Many HTML5 and CSS3 features are already implemented in at least one major browser. Modernizr tells you whether the current browser has implemented a given feature.This lets developers take advantage of new features that browsers support, yet create fallbacks for browsers that lack support. How it works: Modernizr uses feature detection, rather than checking the browser’s property, to discern what a browser can and cannot do. It considers feature detection more reliable since the same rendering engine may not necessarily support the same things in two different browsers using that engine. In addition, some users change their user agent string to get around websites that block features for browsers with specific user agent settings, despite their browsers having the necessary capabilities. Modernizr: the feature-detection library for HTML5 and CSS3 When you embed the Modernizr script in your page, it detects whether the current browser supports CSS3 features like @font-face, border-radius, border-image,box-shadow, rgba() and so forth, as well as HTML5 features like audio, video, localStorage, and the new <input> element types and attributes. With this knowledge, you can take advantage of these native implementations in browsers that support these features, and decide whether to create a JavaScript-based fallback or simply gracefully degrade the page in browsers that don’t support them. Additionally, Modernizr makes the new HTML5 elements available for styling in Internet Explorer, so that you can start using their improved semantics right away. Modernizr was created based on the principle of progressive enhancement, so it supports—encourages, even—building your website layer by layer, starting with a JavaScript-free foundation and adding layers of enhancement one by one. This is easy with Modernizr, since you’ll know what the browser is capable of. Let’s look at a practical example of how to use Modernizr to build cutting-edge websites. Getting Started with Modernizr Start by downloading the latest release at www.modernizr.com.
Next, add the class “no-js” to the <html> element: <html class=“no-js”> When Modernizr runs, it will replace that class with the class “js” which allows you to know, in your CSS, whether or not JavaScript is enabled. But Modernizr doesn’t stop there: It will add classes for every feature it detects, prefixing them with “no-” if the browser doesn’t support it. So, your <html> element will look something like this upon pageload (providing JavaScript is enabled): <html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”> Modernizr also creates a JavaScript object, simply called Modernizr, which has a list of properties that contain boolean values for each feature. Modernizr.canvas will be true if the browser supports the new canvas element, and false if the browser does not support it. The JavaScript object also contains more detailed information about certain features, for example: Modernizr.video.h264 will tell you if the browser supports that particular codec. Modernizr.inputtypes.search will tell you if the new search input type is supported, and so forth. It’s important to note that Modernizr doesn’t “fill in the gaps” (i.e., polyfill) for you. It only detects whether something is supported. But you can use Modernizr as part of the polyfilling process.
One comment
Shashi Dhar Kumar
April 17, 2014 at 5:57 pm
Nice article!