Definition

A polyfill is JavaScript code that emulates a native feature for older browsers. For example, IE 7 doesn’t understand the new HTML5 tags such as <nav> or <section>. By using a polyfill, you can use those newer features in IE 7.

If you really want to understand them, write your own polyfill; JavaScript Playground has a tutorial on doing just that.

List of Polyfills

A good list of current polyfills is maintained on Github by Modernizr. HTML5 Please also maintains a list and has helpful information about each use.

The ones I tend to use the most are:

• Respond: Used so that IE8 understands min-width and max-width media queries; indispensible when creating responsive layouts. This can come with an Initializr build.
  To enable it, load Respond after all the CSS has been loaded. You can use Moderizr's yepnope to load it via:
  Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: 'polyfill.js'
});
  
  To use it, just include the library after the CSS has been loaded. If Respond isn't working for you, try the "css3-mediaqueries.js" polyfill instead.
• css3-mediaqueries.js: Similar to Respond, but may work better at the expense of being a bit slower.
• HTML5shiv: Allows you to use HTML5 structure tags (<section>, <header>, etc.) in older browsers.

How to Use a Polyfill

A typical pattern is to call Modernizr, and then dynamically load polyfills if they are required by the current browser. I have another page that talks more about Modernizr.

Feature Support

Shows a table of which browser supports which feature.

http://caniuse.com/

http://html5please.com/

More Information

• This site tells you what your browser supports (the one you are using right now). http://fmbip.com/
• These slides talk about HTML5 and there is some good info on polyfills towards the end of the slides.