FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Detect & Respond: Deploying Modernizr

Hi, and welcome back to BombProof web design. In this lesson you are going to learn how to deploy the awesome Modernizr script into your projects. You have already dealt with situations where there's no support for Java Script. You have also dealt with a complete blanket, no support stance for all the browsers and for Opera Mini. The next step that you're going to take will get rid of a raft of issues in cross compatibility for you in one fell swoop. And the way that's going to happen is through using this script named You're going to want to incorporate this script into pretty much every project that you're doing and you'll see why in just a minute. To get started, head to So I'll put a link to this site in the notes below. And then you're gonna head over and click the production button. Now what Modernizr does is, two main things. On the one hand, it will perform several video detections for you, so all of these properties you see listed here. It will check if these properties are operational in the browser in question, and it will give you information that you can use to, then, either loading a polyfill or provide some other type of fallback for the missing functionality. What it will also do is allow you to easily load in a couple of the most necessary polyfills that you will probably wanna have in place as a matter of course, and they include the HTML5 So, that allows the header, footer, main, and side elements to be recognized in all the browsers. And also, when you come to this page, I want you to check this Media Queries box as well, because by checking that box when you led Modernizr into your site, you'll be absolutely sure that media queries will work in all browsers. And they're gonna be really necessary for your responsive functionally. So on top of that you can have a look at all of these properties listed under the CSS3 heading and under the HTML5 heading. And any that you have decided to use that you know you wanna provide some type of fallback for, you check the box. So in this case we're gonna just tick all the boxes under the CSS3 and HTML5. And there are also some additional boxes that you can check here. But for now, we'll just keep it to to these options listed at the top. So when you're done, go ahead and click Generate. And it will create this version of Modernizr for you, depending on what you have selected at the top. And then you can hit the download button and pull that Modernizr JavaScript file into your project. Now let's jump over and have a look at it in action. Back to our simple page layout here. And as well as what you saw in the previous videos, I've added a CSS3 drop shadow on these boxes, and I've also added in a little HTML5 video player. Now if you are on a browser that doesn't support any of these attributes, then this is what you will see. So right here, in IE 8, and this will be the same in Opera Mini. The semantic tags are not recognized, so there's no formatting applied to any of those boxes, let alone a drop shadow. And there's also no video. So just instead, it says the browser does not support the video tag. We're going to fix these things just by using Modernizr. This is the code for the site that you were just looking at. So we've got our CSS3 shadows. And we have our HTML5 videos, and we have our semantic elements, header, main, footer. The first thing we're going to do is make sure the semantic elements are recognized by all browsers. And that's very, very easy. We have added the Modernizr script that we just downloaded into a JavaScript sub folder of this project, so all we have to do is load Modernizr into this project, and it will instantly make the semantic elements recognizable. So here is our little snippet that loads Modernizr in, so we'll save that and go back and look at the results in IE8. So we will refresh this page and now you can see the semantic elements are all being recognized and they're being properly formatted. Next we will make the drop shadow work. When you downloaded Modernizr, you'll notice that this box here was checked, add CSS classes. So what that will do is add a list of CSS classes to your HTML tag in your project. And those CSS class names will reflect which of the properties that you have checked off here are supported in the browser. So if you look at a fully functional browser. We'll just inspect the code here. You can see all of these classes have been added to the HTML tag. For example, you can see here box shadow has been added which tells us that CSS3 box shadows are functional. And then further down, video. Which tells us that HTML5 videos are functional. However, if we are to do the same inspection on IE8, you'll see that all of those same properties have the word no, with a hyphen in front of the property. Rather than saying video, it will say no video. Rather than saying box shadow, it will say no box shadow. So you can use these classes to create supplementary CSS to try and recreate the proper effect as best you can. For example, the class that we have the regular CSS3 shadow applied to is named wrapper. So what we can do is use one of the classes that has been added to the page when drop shadows don't work to generate a similar effect. So because we're using this class that specifically only shows up if box shadows aren't supported, this IE specific code will also only show up if box shadows aren't supported. Let's have a look at the effect of that in IE8. We'll refresh the page and now you can see that a drop shadow has been added successfully to the boxes. The last thing that we want to do is get video going. Now, as well as giving you these CSS classes in your code that you can use to create fallbacks, Modernizr will also allow you to conditionally load extra JavaScript. So it will allow you to pull in polyfills as they are required in order to create full support for your site. Here is a basic example of how you can use this functionality to bring in a polyfill for the HTML5 video element. What you're looking at here is the Modernizr load functionality. We're running a little test that asks the browser if video is available. And if the answer to that question is nope, then we load in the HTML5 media JavaScript polyfill. And that will allow the video to play through a Flash based player instead of the native HTML5 video player. Let's test that out. We'll refresh the page once more. And there we go. A nice Flash based player. Now this specific polyfill won't solve all of your problems, because there will be situations where you don't have support for video and you also don't have support for Flash. In that case, that's where you just need to provide the user with a good fall back message to let them know that there is something missing in that part of the page, and what they would need to do to be able to view that content. You're now all set up with a complete process for handling unsupported setups. Next, well move on to creating cross compatible websites starting with web type.

Back to the top