Modernizr - Correct way of loading polyfills / using custom detects

Question

I want to use some new HTML5 form attributes and input types on a webpage. Some browsers already support them, others don't and never will. Thats why I want to use Modernizr - and thats were my trouble begins.

To my understanding, Modernizr alone is not a polyfill but a script that can test if the browser is capable of some new HTML5 / CSS3 stuff. If necessary, a polyfill can be loaded which "emulates" these features so they can be used in non-supporting / older browsers. This is correct I guess?

Regarding the testing / loading: Whats the correct 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 actually get to know how these feature detects are called? Something like Modernizr.geolocation surely exists for every feature detect?

In the Modernizr GitHub repository, there are also many user contributed feature detects. How do I implement these into my version of Modernizr? Or is it the best to just use their builder?

In Safari, the HTML5 form validation works, but there is no UI for displaying error messages. Basically, the feature is just half implemented. That's why Modernizr gives a false positive in Safari, like already mentioned here: https://github.com/Modernizr/Modernizr/issues/266 Apparently someone fixed this with such a custom test, but I still don't understand how to use it.1

Answer 1

The two techniques you're seeing are both valid.

In the case of the yep / nope version, this is the ideal way of loading a polyfill that is to be included from a separate file. This doesn't have to be Javascript -- it can also be a CSS file as well.

In the case of the standard JS if() block, this would be more useful if you had a block feature-dependent code in the same JS file that you wanted to switch in or out depending on whether the feature was available.

So both variants have their place.

However, you may also see the if() block option being used to include separate JS files, because the yep / nope syntax was not available in some earlier versions of Modernizr. Yepnope is actually an entirely separate library that has been incorporated into Modernizr in order to make the syntax for loading polyfill files more readable.

Re your question about how to know what the features are that Modernizr can detect, the answer is, of course, in the Modernizr documentation.

Look in the docs (http://modernizr.com/docs/) for the section entitled "Features detected by Modernizr". This has a list of all the features detected, along with the name given to it by Modernizr.

Re the broken feature detect you mentioned -- the ticket you linked to was marked as closed nearly a year ago, and it looks from the notes on the ticket as though the code for the improved test have been added to the main Modernizr code. Make sure you're running the latest version, and double-check whether this is working for you.