Not all browser are update to the latest version to support the HTML5 or CSS3 features. If you have developed a website with latest features some users might have problems even browsing your page. We can solve this problem adding some script in our webpage.Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Let’s se how it works.
About Modernizr Script
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
How to install Modernizr JavaScript
Over the Download page, and select which features you intend to use in your project.
Drop the script tags in the <head>
of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>
, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.
Modernizr Tutorials
Modernizr.load is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It’s optional in your build, but if you are loading polyfills, There’s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load syntax is generally very easy to understand, so we’ll start with a basic example:
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
Use the build tool below to pick only the tests you need. Generate Modernize Script