An Introduction To Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in a user’s browser. It makes it easy for you to write conditional JavaScript and CSS to handle any situation, whether a browser supports a feature or not. In this post, we’ll feature Ben Jaffe’s introduction to Modernizr training videos to help get you started. 

Modernizr runs quickly on page load to detect features, then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Before you can add Modernizr to your website, you first have to download it. Adding it to your website is easy – you simply have to add it to a script tag.



Add Modernizr to a script tag

On the Modernizr home page, you also have the option to create a custom build. To do so, click on the Production – Configure your build button. While you will need some of the tests, you don’t necessarily need all of them. On this screen, choose the features you care about, then click generate. This will then create all of the code needed, which you can download and save to your computer. Add a script tag with a source that is equal to the file name of the download, and refresh your webpage. You’ll see that your custom build is working.


Choose features in custom build

Check out the videos below, taken from our Modernizr training course by Ben Jaffe, to see Ben take you through the process of adding Modernizr to your web page and creating a custom build.




Save $50 when you sign up for an annual Learning Library account Learn More