Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introducing the JavaScript Library Modernizr

See in this article hwo to use the JavaScript library Modernizr to verify browser support to certain HTML and CSS features, ensuring compatibility of their application with several web agents.

In this article we will talk about Modernizr, a compact JavaScript library that detects the availability of native implementations for the new generation of web technologies, that is, characteristics that originate from the specification of HTML5 and CSS3. Several of these features are already implemented, especially in most current browsers. And what Modernizr does is simply tell us which of these features are already present or not in each of these browsers.

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.
  • Creates a JavaScript object called "Modernizr" containing the results of these tests with boolean properties.
  • 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.

Installation

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>

Support

The Mordernizr supports the following browsers:

  • IE 6+
  • Firefox 3.5+
  • Opera 9.6+
  • Safari 2+
  • Chrome

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.

JavaScript Example

Let's create an example in which we will check if the property "geolocation" is supported or not in a browser. To do this we use JavaScript to give an alert stating whether such property is or is not supported by the browser in question. As we know, the geolocation property is not supported by IE and so we will be taking the test to see if we really acknowledge this characteristic.

Listing 2. JavaScript example

<html lang="pt-br" class="no-js">
	<head>
		<meta charset="utf-8">
		<title>Modernizr Tests</title>
		<script src="modernizr-custom.js"></script>
		<script type="text/javascript">
			if (Modernizr.geolocation) {
			   alert("Geolocation is accept in this browser");
			} else {
			   alert("Geolocation is not accept in this browser");
			}
		</script>
	</head>
	<body>
	 
	</body>
</html>

Figure 3. Test in Chrome result

Conclusion

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.

Links

Modernizr Download Page: http://modernizr.com/download/



Julio is a System analyst and enthusiast of Information Technology. He is currently a developer at iFactory Solutions company, working in the development of strategic systems, is also a JAVA instructor. He has knowledge and experi...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login