Modernizr - The Right Way to Download a Polypol / Using Custom Detectives

Question

I want to use some new HTML5 form attributes and input types on a web page. Some browsers already support them, others do not and never will. That's why I want to use Modernizr - and that was my problem.

As far as I understand, Modernizr itself is not a polyfill, but a script that can check if the browser is capable of some new HTML5 / CSS3 materials. If necessary, you can download a polyfill that "emulates" these functions so that they can be used in unworkable / old browsers. Is that right, I think?

As for testing / loading: What is the right or best way to load polyfills with Modernizr?
In the documentation, I found this:

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); 

but some pages also do it like this:

 if (Modernizr.touch){ // bind to touchstart, touchmove, etc and watch `event.streamId` } else { // bind to normal click, mousemove, etc } 

Also, how do I know how these functions are called? Something like Modernizr.geolocation probably exists to detect every function?

The Modernizr GitHub repository also has many custom discovery features. How to implement this in my version of Modernizr? Or is it best to use their builder?

Safari works with HTML5 form validation, but there is no interface for displaying error messages. In principle, the function is only half implemented. This is why Modernizr gives a false positive in Safari, as already mentioned here: https://github.com/Modernizr/Modernizr/issues/266 Apparently, someone fixed this with such a user test, but I still haven't I understand how to use it. 1

Answer 1

Both methods that you see are valid.

In the case of the yep / nope this is the ideal way to load the polyfill, which should be included from a separate file. It should not be Javascript - it could also be a CSS file.

In the case of the standard JS if() block, this would be more useful if you had block-dependent code in the same JS file that you would like to enable or disable, depending on whether this function was available.

Thus, both options have their place.

However, you can also see that the if() block parameter is used to include individual JS files, since yep / nope not available in some earlier versions of Modernizr. Yepnope is actually a completely separate library that was included in Modernizr to make the syntax for loading polyfill files more readable.

Return your question about how to find out what features Modernizr can detect, the answer, of course, is in the documentation of Modernizr.

Look in the docs ( http://modernizr.com/docs/ ) in the section "Features Detected by Modernizr". It has a list of all detected symptoms, as well as the name given to it by Modernizr.

Repeat the malfunction described by you - the ticket you contacted was marked as closed almost a year ago, and it looks from the notes on the ticket, as if the code for the improved test was added to the main Modernizr code. Make sure you are using the latest version and double check if this works for you.

Answer 2

Starting with Modernizr v3, the use of Yepnope via Modernizr.load () has been deprecated . A good alternative is to use jQuery:

 if (Modernizr.geolocation){ console.log('match'); } else { // load polyfill $.getScript('path/to/script.js') .done(function() { console.log('script loaded'); }) .fail(function() { console.log('script failed to load'); }); }