What is Modernizr?
For responsive design projects, we use a few tools to make responsive design accessible across browsers. One of them is Modernizr.
Modernizr is a JavaScript library that allows you to use HTML5 / CSS3 without having to accept that the site is not working properly in older browsers. Modernizr checks every requesting browser for what it can and can not do. The result of this check is stored in a specially created JavaScript object. In addition, Modernizr adds the HTML element to classes that explain which features are supported and which are not.
Polyfills – putty for the Web
The information that Modernizr found out about the browser now uses it to fill in the gaps with the right polyfills (Polyfilla is a putty often used in the UK).
Remy Sharp , who coined the term, defines it like this:
A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you need . Flattening the API landscape if you want.
Loosely translated: A polyfill or polyfiller is a snippet of code or plug-in that provides the technology that developers expect the browser to bring with them. You could say it balances the API landscape.
A browser is therefore comparable to a wall full of cracks. With the putty these cracks are compensated, the wall is beautifully smooth and uniform. A polyfill is a script that allows developers to program websites to the latest technical standards. If a browser does not support a specific feature-for example, IE7 sessionStorage- a plug-in that stuffs that hole is used. The developer does not have to worry about how to create a workaround for IE7. Meanwhile, there is the suitable polyfill to hedge for almost every HTML5 feature
How do I use Modernizr?
On the Modernizr website you can download two versions:
On the one hand you will find the “Development” version , which contains the complete code in a non-compressed version. If you want to see exactly how it all works, or if you would like to continue developing Modernizr, download the complete code. This version is well commented, so that with some knowledge of JavaScript you understand what happens.
Those who do not want to go deep into the code but want to use Modernizr quickly for a concrete project use the “Production” version .
Here you first come to a configuration tool. By means of a selection list, you can have your own Modernizr package wrapped up, which contains only the features that are needed for the specific project. For example, I can put together this package:
- CSS3 : box-shadow and border-radius
- HTML5: HTML5 Video, Drag ‘n Drop and History
In addition, I can pack Modernizr.load () , a loading tool specially designed for Modernizr. It enables asynchronous, parallel loads, which saves bandwidth and improves performance. My self-made package includes 8 KB.
Now all I have to do is to include the script in the header after the stylesheet references. In the header, because it has to be included BEFORE theis executed, AFTER the stylesheets, because Modernizr adds CSS classes.
Conclusion
With Modernizr, the weaknesses of the browser in HTML5 / CSS3 can be well intercepted. It is possible to consistently work with modern web technology without much regard. Nevertheless, one is well advised to think carefully about how far perfection should be driven. Ease of use is also linked to performance. The more scripts you need to load, the slower the page will build. Very few visitors look at a website in more than one browser, so that smaller differences in the presentation are not important. In addition, minor blemishes are not as uncomfortable as a website that loads only cumbersome.