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.
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 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.
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.
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.
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> 
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
