What is Modernizr?
For responsive design projects, we use a few tools to make responsive design accessible across browsers. One of them is Modernizr.
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:
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.
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.