Polyfilling HTML5 and CSS3 With Modernizr

HTML5 and CSS3 offer web developers a lot of great options for making their websites much more beautiful and with much less work than what was previously possible. There’s one looming problem though: the lack of browser support. Thankfully, though, many JavaScript developers have been hard at work creating shims and polyfills to bring these wonderful capabilities to even the most feeble browsers.

Modernizr

Modernizr isn’t actually a library that polyfills these features, but their site is hot pink so that makes up for it. Just kidding. Anyway, like I said, Modernizr doesn’t do any polyfilling. Instead, it does two main things really well. It detects features and implements the YepNope API for loading script files based on conditions.

Feature Detection

Modernizr is well known for its feature detection. When it is first loaded, it runs a bunch of tests and saves the results of those tests as properties on the main Modernizr object. If you want to know if the browser you’re on supports canvas, just use Modernizr.canvas. If it is true, then your browser supports canvas, otherwise it doesn’t. You might not think this is a big deal (or you might think it’s a huge deal, I can’t tell) because you could always just write the tests yourself and save on a bunch of bandwidth rather than downloading Modernizr. That’s true, but then you have to know the best way to test for features and you miss out on the YepNope stuff that I’ll get to later. The people behind Modernizr have spent a lot of time figuring out the best and most effective ways to detect support for each and every feature. If you’re wondering which features Modernizr looks for, you can take a look here.

YepNope

YepNope is a separate script loader library that works in a very different way from normal script loaders. Normally script loaders will only take a few file names and will load those asynchronously, and if you supply a callback function, will run that after the files have loaded and executed. Well, YepNope can do this too, but it has some more awesomeness baked in. Let’s take a look at a small snippet of code to see what I mean:

yepnope({
    test: someConditionalExpression,
    yep : 'normalScript.js',
    nope: 'polyfillScript.js'
});

This is the main syntax used with YepNope. First you’ll see that the yepnope function was called with an object literal as its only argument. The first property of that object is test, which should be a conditional expression. The yep property contains the file name for the script you want to load in if the conditional evaluates to true. The nope property is the file name for the script you want to load in if the conditional evaluates to false.

So, if you test for a new feature, then you can load in a polyfill script via nope if the feature doesn’t exist in that browser. Now, one of the great things is that Modernizr comes with that YepNope API built in and hooked up to Modernizr.load. So if we’re running Modernizr, we could convert the above example to look like this:

Modernizr.load({
    test: Modernizr.someFeature,
    yep : 'normalScript.js',
    nope: 'polyfillScript.js'
});

It’s a simple conversion and, since we’re using Modernizr anyway, the test can be done using the Modernizr feature detections. By the way, this isn’t even close to the full extent of the YepNope and Modernizr capabilities. If you want to learn more, I suggest you take a good long look at the documentation on those two sites that I linked to earlier in the post.

Polyfill Scripts

The above examples are pretty useless if you don’t know which polyfills exist, right? I mean how can you utilize this power if you don’t have a script to throw in for nope? Well, if this is your only concern, you’re going to be very happy very soon. Here is a website that is a VERY extensive list of polyfills and shims. This seems to have been put together by the Modernizr group, so it’s pretty good. They even list some of the specifics about each plugin/library so you know exactly what you should be getting from each of them.

Conclusion

Wouldn’t it be nice if we just lived in a world where the moment a new feature came out, it was available for use everywhere? Well, you let me know if you can find a world like that and we can move there together. In the mean time, Modernizr and polyfills can bring us about as close to that dream world as we’ll ever get. It may be a bit more work, but at least we can still play with nearly every cool new feature that meets the light of day! God bless and Happy coding!