Instead of making a traditional "UA sniffing" - but highly recommended - which, in turn, detects the browser itself using thenavigator.userAgent property, Modernizr performs a detection of the features that the browsers may or may not support. Moreover, the same engine rendering may not necessarily support the same things, and in some cases, users change their userAgent strings to access poorly developed sites that do not allow them to perform certain tasks. The focus of Modernizr faces to the end of the use of the AU Sniffing,once using a detector characteristics is more reliable mechanically to define what can or can not be developed in a particular browser, and Modernizr becomes convenient for us developers in many ways:
- Performs the tests over more than forty characteristics, all in just a few milliseconds.
- Adds classes in HTML, explaining precisely what features are or are not natively supported.
- It has a loaded script that we can use in the polyfills to implement in older browsers.
Knowing what Modernizr can do for us developers, we can take advantage of the most current browsers that can render or use these features, and still have an easy and reliable method to control the situation for those browsers that can not display such implements.
To make use of this tool, first we have to download the same, through the link available at theLinks section in the end of this article. On the home page we have two options (Figure 1):
- Add your detects: to choose the features we want to use in our project. In this way we will copy only the code componenents we need, thus saving bits in our script. Click on it and, after all the desired options are selected, click on "BUILD". It will show a screen with various options (Figure 2), such as the build final file (copy to clipboard or download), the command line config (in JSON), the Grunt config (for Grunt purposes) and the possibility to open the file at codepen.io website. Click in the Download link for the Build option so, this way, we can get our custom library of Modernizr.
- Development build: if you do not have the certainty of what components of the library you need to use, you can choose to download the version for developers containing the entire library, but not compressed, by clicking on it and following the same steps as previous item, once it'll check all the options necessary for development purposes into the whole library. This is the option we're going to use.
Figure 1. Download options at Modernizr Home Page.
Figure 2. Download of build options
Next step is to include this library into our HTML document. It is recommended to put the script import inside the <head> tag to improve the loading performance of the site, right after our stylesheets.
Listing 1. Inserting Modernizr into our HTML page.
<html lang="pt-br"> <head> <meta charset="utf-8"> <title>Modernizr Tests</title> <script src="modernizr-custom.js"></script> </head> <body> </body> </html>
The Mordernizr supports the following browsers:
- IE 6+
- Firefox 3.5+
- Opera 9.6+
- Safari 2+
It also has support for the following mobile browsers:
- iOS`s Mobile Safari
- Android`s Webkit browsers
- Opera Mobile
- Firefox Mobile
Polyfills and Modernizr
A polyfill or polyfiller is a library or plugin to amplify the functionalities of the older browsers that don't have support for modern features. To be able to fully understand this concept, think of HTML5, which brings various APIs to work with Storage and Web Sockets, etc. Current browsers no longer has full support for these technologies, imagine now dealing with older browsers, support is even worse. Then we can load a polyfill in order to let these browsers with compatibility for some of these technologies.
The polyfill has no way to be built the same way as the native API in browsers, however it is like an emulator that will provide us the same interface so that we can work on old web clients the same way we work nowadays.
The polyfill is not part of Modernizr specifically, but provides elements to load it in the browser when there isn't native support. Thus, we can have an instant support for some features of HTML5 and CSS3.
Figure 3. Test in Chrome result
Thus we conclude that Modernizr is a supplement that appeals to us developers who want to use the latest technologies, but who are committed to the compatibility of the browsers.
The basic Modernizr features for HTML and CSS that support detection are already quite interesting in themselves. Therefore, with the possibility of loading pollyfiles, it becomes an excellent tool that allows us to move forward to many standards that are not yet universalized.
Modernizr Download Page: http://modernizr.com/download/