File Under: HTML5, JavaScript

Load Only What You Need With Yepnope.js

If you’ve started using HTML5 and CSS 3 in your projects, chances are you’re using Modernizr to detect for features and gracefully degrade for those browsers that don’t support the latest and greatest on the web.

Modernizr adds classnames to your page which you can then use for browsers that support the HTML5 features you’re using. It’s a great tool, but it does have some overhead; wouldn’t it be cooler if you could just test for features and load polyfills all in one step?

That’s the thinking behind the powerful (and cleverly named) Yepnope.js. Yepnope is an asynchronous conditional resource loader which loads only the scripts that your users need. And at 1.6kb it won’t add much overhead to your page.

In fact, Yepnope.js is so handy it will be integrated into Modernizr 2, which is currently a beta release.

That said, Yepnope.js isn’t right for every situation and the project freely admits that some other conditional loaders are a bit faster. One gotcha to be aware of is that Yepnope.js requires that your server sends proper cache headers. Hopefully your sever does, but with some shared hosting setups that just isn’t possible.

If Yepnope.js doesn’t do quite what you want there are other options like the larger, but more feature-rich RequireJS.

See Also: