Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.6 hours
  • Overview
  • Transcript

4.2 Modernizr

Modernizr is billed primarily as a feature-detection library, but it’s much more than that. In this lesson, you’ll learn about its feature-detection capabilities, as well as its conditional loading and CSS features.

Related Links

1 lesson, 00:40

Free Lesson

2.Code Editors
3 lessons, 23:10

Free Lesson
GitHub's Atom

Adobe's Brackets

Microsoft's Visual Studio

3.Runtime Environments
1 lesson, 10:41

Browser Development Tools

4.JavaScript Components
3 lessons, 39:01




5.Node Packages
2 lessons, 23:47

NPM and Browserify


1 lesson, 00:42


4.2 Modernizr

Modernizr is a tool that is somewhat controversial because its primary purpose is for determining if a browser supports a given feature, and that is something that we can do on our own with our own code. But there are some things that Modernizr does very, very well, first of all is its API, it is very easy to use, and in many cases, it's easier to use Modernizr's API than to determine on our own using the native API whether or not the browser supports a certain feature, so there's that. It also has the ability to conditionally load JavaScript, which is useful if you need to load poly fills or anything like that, so you can check to see if the browser supports a given feature, and if it doesn't then you can load in a poly fill. And then it also adds some CSS features that are very nice to use, and we're going to look at all of these things within this lesson. So first of all, let's look at the Modernizr website because whenever you download Modernizr you have several different options available to you. So you want to go to modernizr.com, and then there are two builds here, there's a Development build, which includes everything, and then there's the Production build, which if you click on Production it doesn't have anything checked, you get to check the things that you want to check the browser for. So if you only need to check if the browser supports box shadow and canvas and things like that, you can check those items, and then you have your own custom build of Modernizr. Now, for this lesson, I have a build that includes everything, so if you want to use that build, that's perfectly fine, but if you want to use your own that's perfectly fine, as well. So the first thing we need to do is add Modernizr to our webpage, and they recommend that we do so in the head of the document, as opposed to at the bottom of the body. The reason being because there are some CSS classes that Modernizr adds to the document, so the sooner those things can be done, the less likely the user is going to see any styling changes whenever the page is loading. So here we're just going to add a script element, src="js/libs/" and then modernizr.min.js, and there's nothing else here, it's simply adding the source attributes and nothing else. So once we have added this script element, we can use Modernizr, and we're not going to go over all of the features that it checks for, if you want to go that deep into Modernizr, then feel free to visit their website and look at their documentation. Let's start by looking at the basic API, everything in Modernizr revolves around this global Modernizr object, it has a capital M, and it has a variety of properties that we can use to test if the browser supports a feature. As you can see, Visual Studio is giving us a lot of properties that we can use, for example, somewhere here is localstorage, there it is, so if we wanted to check to see if the browser supports local storage, we can use an if statement, Modernizr.localstorage, and this will return a boolean value true, of course if the browser supports it, otherwise, we could get false. So every browser since IE8 and, of course, Chrome, Firefox, and all of the other browsers, support local storage, so if I go to Chrome and then refresh this page, we're going to see the alert box, because of course Chrome supports local storage. And of course we could do that on our own, but we can also check things like support for codex, for example, if we wanted to use native video and we wanted to check if the browser supports h264 we could do that. And of course we can do that with a native API, but it's also a little convoluted because we have to get that video object, we have to call a method and then we have to pass in the MIME type. This in my opinion is a lot easier to use, so Chrome also supports h264, so if we go back and then refresh we're going to see this alert box. IE also supports h264 and we see the alert box there, but if we wanted to check to see if the browser supported a webm, well now of course Chrome is going to support it so we still see that, but of course IE does not support webm, so we don't see anything. And that's the basic API, modernizr.dot, and the property name, so if we wanted to check to see if the browser supported drag and drop there's that. There's also a host of CSS three properties that we can check for, most of them begin with CSS and then something else, so like gradients, transforms, and so on and so forth. Somewhere in here is border radius and we can keep going, but we're not going to, we're going to move on to conditionally loading resources like polyfills. Modernizr has a method called load, which we use to load external resources, and we pass this method an object that must have at least two properties. The first is test, this is the test that we want to perform, and this is a boolean value, so we can use one of Modernizr's many properties, or we can use our own test. So if we wanted to conditionally load that to event shim polyfill that we very briefly looked at in the beginning of this course we could do typeof addEventListener === "undefined". If this test is true, then we want to load that polyfill, in that case, we would use another property called yep, and this is string value that contains the name of the file. But if the browser does support addEventListener, then we might want to load something else, and then we could use a nope property, and it's the same type of thing. It's a string that contains the name of the JavaScript file that we want to load, and it doesn't have to be JavaScript, we could also load CSS with Modernizr's load method. And then if we needed to, we could use an event handler called complete, this is a function that executes when everything has been loaded. Now in the case of the eventShim, we probably wouldn't want to do anything with the complete, so I'm just going to comment that out. For something like this we would probably want to put this at the top of the document as well because this is ta resource that we would want to use right out of the box if the browser did not support addEventListener, and there's not much else to this load method. There are a few other features here, like for example, you can load multiple resources by specifying an array for yep or nope, and of course each element within the array would be a file that you wanted to load. But I want to move on and talk about another feature that Modernizr brings to the table, and that is a set of CSS classes that it adds to the document, and these classes are directly related to the features that the browser either supports or it doesn't support. For example, if we go to Chrome and if we look at the elements tab in the developer tools, we can see that there are a lot of classes that were added to the HTML element. We have this js class, which means that JavaScript is enabled, then we have flexbox, flexboxlegacy, canvas, and you can see all of these classes that we have, these are all features. And because it doesn't say that there is no flex box or no flex box legacy, then we know that the browser supports those features, like if we go to Internet Explorer and if we look at the same thing we're going to see different classes. We see, once again, the js class because JavaScript is enabled, and we see flexbox because flexbox is supported in IE 11, but we also see that there is no flexboxlegacy, there's no webSQLdatabase and there's a few other things that IE 11 does not support. But if we change the document mode to IE 7 we're going to see a lot of changes, in fact most of these features are not supported, we have no flexbox, no canvas, no webSQLdatabase, no index db. These are all classes that we can use inside of our own style sheets, so if we wanted to use text shadow, we could have CSS for both cases, for those browsers that support text shadow and then for those that do not. So the class name is textshadow, for browsers that support textshadow, and then we could have our own class in our markup, simply called, shadow, and if we wanted to add a shadow to those elements, we could do that. But if we also wanted to target the browsers that do not support textshadow, we could use no-textshadow, and then have our same shadows CSS class, and then if we wanted to do something special for browsers that do not support text shadow, then we could add those CSS properties here. So even though Modernizr is primarily a JavaScript library, we can also use it without using the JavaScript API, if we wanted to use strictly the CSS features that it adds, then we can do that. It's an extremely helpful tool, and you should definitely consider it if you are planning on using HTML5 and CSS3 features.

Back to the top