As we have discussed in an earlier post, not all modern browsers have the same HTML5 features. And there is always the problem of the use of old browsers lacking HTML5 support. That’s where the concept of polyfills comes in. What is a polyfill? A polyfill is a code plugin that supplies functionally natively available in the newest browsers. They are also known as HTML5 fallbacks or regressive enhancements. The concept of polyfills comes from the British spackling product used to cover cracks in walls. Thus, with a polyfill a developer can plug a ‘hole’ in browsers missing support for a particular HTML5 feature. These are often written using JavaScript and they imitate the APIs of the HTML5 feature they are substituting for.

Modernizr.js, a JavaScript plugin that determines which HTML5 or CSS3 features are available in a browser, along with another plugin, yepnope.js (pronounced Yep Nope), which is an asynchronous conditional resource loader, are the perfect pair for loading polyfill scripts as they are needed. Once modernizr.js determines that the user’s browser does not support a particular feature yepnope.js is called to load one or more JavaScript plugins and/or css files to cover the missing functionality. In some cases another resource loader, require.js, might do a better job than yepnope.js.

Thus, through the use of polyfills along with modernizr.js and yepnope.js, gaps in a browsers’ HTML5 functionality are no longer a barrier to making use of HTML5 features.

For more information, see:

HTML5 Cross Browser Polyfills
yepnopejs.com
modernizr.com
requirejs.org