Table of Contents for

The Modern Web

Polyfills and Shims

A shim (sometimes called a shiv) is a piece of code that intercepts an API call and provides a layer of abstraction, and a polyfill is a specific type of shim that adds support for new or experimental features in browsers that don’t support them natively. CSS multi-columns aren’t supported in many older browsers, for example, so a multi-column polyfill would use JavaScript to replicate their functionality in those browsers.

The idea behind a polyfill is that it happens invisibly; other than including a link to the polyfill file, no (or very little) more should be required from the author. In the case of multi-columns, the CSS to create the columns should be all you need. Of course, multi-columns create a dependency on JavaScript so you have to consider an acceptable fallback state, but that should be part of your everyday workflow anyway.

Honestly, there are far too many polyfills covering far too many features for me to even think about providing a list here. The Modernizr wiki holds a regularly updated list that should be your first port of call; just think about the feature you want to consider a polyfill for, and it will most likely be on that page.

Modernizr and YepNope are actually perfect for providing polyfills only to browsers that need them, improving the performance for pages that don’t. To return to the multi-column example once more, you might use this to load the polyfill only for browsers that don’t support the feature:

Modernizr.load({
  test: Modernizr.csscolumns,
  nope: 'css3-multi-column.js'
});

Polyfills cause performance considerations, and they do create a dependency on JavaScript, so I suggest carefully considering the potential drawbacks before deciding to use them.