A Modernizr Primer: Getting Started

By Vincent Wright

Modernizr is a JavaScript library that helps you add HTML5 capabilities to your websites. HTML5 is a combination of HTML, JavaScript, and CSS3. Why use Modernizr? Well, the problem with HTML5 is that not all browsers support HTML5 markup and those that do support it, do not always support it the same way. Modernizer helps you get a consistent experience for your end users across multiple browsers. Heck, even older browsers like Internet Explorer 6 can benefit from Modernizr (more on that later).

Modernizr detects the actual HTML5 features that a browser supports. It does this by first creating an element, setting a style instruction on the element, and then retrieving it. If a browser does not support the instruction, it will return an error or undefined.

First Steps

The first thing you need to do is get the Modernizr library. There are two ways to do this. First, you can use a Content Delivery Network (CDN) like the one from Microsoft. This is what we will use in the code samples. The second (and best) way is to use a custom build from Modernizr.com. This option allows you to choose only the portions you want. This results in a smaller file.

Modernizr is referenced just like any JavaScript code. Modernizr should be place after your CSS references. Place a script reference in the head tag of your HTML document:

	<head>
		<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
	</head>

Now What?

Now it is time to add the HTML5 elements. First, let's discuss how Modernizr makes it easier to add these elements. Let's look at rounded corners in CSS3. Each browser has its own way of implementing rounded corners. Below is the syntax for different browsers.

Mozilla FireFox:

	-moz-border-radius: 17px 17px 17px 17px;

Chrome/Safari WebKit:

	-webkit-border-radius: 17px 17px 17px 17px;

IE9:

	border-radius: 17px 17px 17px 17px;

In order to get rounded borders in all these browsers, you need to add all of these CSS3 statements in your style sheet. That is redundant and adds to the size of that file. A much easier way is to you Modernizr. You would replace all the statements above with this:

	border-radius: 17px 17px 17px 17px;

Modernizr now will set the border radius on all browsers that support this property. There a many CSS3 properties that Modernizr supports. We will look at these items later.

What about older browsers?

We all know that it is great to have a web site that supports the latest technology, but what about older browsers? We can make a great looking website and have great support for HTML5, but if only a few can access the website, then you will severely limit your audience. This is true if only one browser supports an HTML5 feature. So what do we do? Well, it is time to pull out a shiv. No, not the kind you use in prison, this is a bit of JavaScript code that provides the missing functionality.

Shivs are also called polyfills. Polyfills are used to add HTML5 functionality to older browsers or browsers that do not support a particular HTML5 feature. These are really easy to add and there are polyfills for almost all HTML5 features (at least the most common). Let's use the example above (rounded corners). What if we wanted rounded corners in something like Internet Explorer 6? Do not laugh; there are still a lot of people using this ancient browser (unfortunately).

First, we create a bit of JavaScript code that test to see if we have the border radius functionality. If not, then we load a script and apply the rounded corners. This code should be placed after the Modernizr script.

	<script>
		if (!Modernizr.borderradius) {
			$.getScript("jquery.corner.js", function () {
				$("#cornerDiv").corner();
			});
		}
	</script>

Another way to test for support is to use Modernizr.load(). The syntax for this is:

	Modernizr.load([{
		test : /* boolean(ish) - Something truthy that you want to test */,
		yep : /* array (of strings) | string - The things to load if test is true */,
		nope : /* array (of strings) | string - The things to load if test is false */,
		both : /* array (of strings) | string - Load everytime (sugar) */,
		load : /* array (of strings) | string - Load everytime (sugar) */,
		callback : /* function ( testResult, key ) | object { key : fn } */,
		complete : /* function */
	}, ... ]);

We will go more into this method in a later article.

Conclusion

As you can see, you can use Modernizr to create websites with HTML5 capabilities without worrying which browser supports what. You can even add HTML5 capabilities to older browsers or browsers that do not support certain HTML5 elements. In the next article, we will look into the different HTML5 elements and how to invoke them using Modernizr.

Code

To run the code below, click here.

	<!DOCTYPE html>
	<html>
		<head>
			<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
			<style>
				#cornerDiv {
					width: 100px;
					height: 100px;
					background-color: blue;
					color: white;
					padding: 15px;
				}
			</style>
		</head>
		<body>
			<div id="cornerDiv">Rounded Corners!</div>
		</body>
	</html>


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date