Polyfill (programming)

In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape. For example, many features of HTML5 are not supported by versions of Internet Explorer older than version 8 or 9, but can be used by web pages if those pages install a polyfill. Web shims and HTML5 Shivs are related concepts.

Origin

The term originated with Remy Sharp who required a word that meant “replicate an API using JavaScript (or Flash or whatever) if the browser doesn’t have it natively” while co-writing the book 'Introducing HTML5' in 2009. Shim, to him, meant a piece of code that you could add that would fix some functionality, but it would most often have its own API, thus did not fulfill Sharp's terminology requirements. The terms progressive enhancement and graceful degradation similarly did not meet his needs since they didn't specifically require, nor were they specific to, JavaScript.

Sharp decided upon the term polyfill that can imply filling in missing browser functionality and using any number of techniques (poly can mean “many” in Greek). Polyfilla, a paste used to cover up cracks and holes in walls, was also a visualization that Sharp found fitting for the term. He has received feedback stating that the “word should be changed”, but the term has now grown more popular amongst web developers. Sharp intentionally did not promote the term widely, only using it in specific cases and believes that it received a large amount of exposure after Paul Irish directly referenced the term in a presentation months after its inception and was helped become popular due to Modernizr's “HTML5 shims & polyfill” page.

Description

Polyfills allow fixing issues with a browser's API or adding interfaces that haven't been implemented at all. A polyfill is a shim for a browser API. Typically, a developer will programmatically check if a browser supports an API and will load a polyfill if the API is absent. This allows development to proceed as if the API was native to the browser. An example of this is BrowserID, which relies on a Javascript API which (as of mid-2012) is not supported in any browser and must be provided via a polyfill.

Polyfill differs from a shim, in that it can be removed without any changes to the rest of the code once the un-implemented API it substitutes for is properly included in the browser.

List of known polyfills

html5shiv

In IE versions prior to 9, unknown HTML elements like <section> and <nav> would be parsed as empty elements, breaking the page's nesting structure and making those elements impossible to style using CSS. One of the most widely used polyfills, html5shiv exploits another quirk of IE to work around this bug: calling document.createElement("tagname") for each of the new HTML5 elements, which causes IE to parse them correctly. It also includes basic default styling for those HTML5 elements.

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

-prefix-free

Though most polyfills target out-of-date browsers, some exist to simply push modern browsers forward a little bit more. Lea Verou's -prefix-free polyfill is such a polyfill, allowing current browsers to recognise the unprefixed versions of several CSS3 properties instead of requiring the developer to write out all the vendor prefixes. It reads the page's stylesheets and replaces any unprefixed properties with their prefixed counterparts recognised by the current browser.

<link rel="stylesheet" href="/css/styles.css">
<script src="/path/to/prefixfree.min.js"></script>

Selectivizr

Keith Clark's Selectivizr is a popular polyfill that makes many CSS3 selectors work in IE 8 and below. It reads the page's stylesheets looking for a number of known CSS3 selectors, then uses a JavaScript selector library to query the document for elements matching those selectors, applying the styles directly to those elements. It supports several JavaScript selector libraries such as jQuery.

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="/path/to/selectivizr-min.js"></script>
  <noscript><link rel="stylesheet" href="/path/to/fallback-styles.css" /></noscript>
<![endif]-->

Flexie

Possibly one of the most anticipated features of CSS3, Flexible Box Layout (a.k.a. Flexbox) promises to be an extremely powerful tool for laying out interface elements. WebKit and Mozilla engines have supported a preliminary draft syntax for years. Flexie implements support for that same syntax in IE and Opera.

However, the draft spec has undergone a drastic revision to a new (and much more powerful) syntax, which is not yet supported by Flexie. Flexie can still be used along with the old syntax, but the developer must make sure they include the new syntax for future browsers as well.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/flexie.min.js"></script>

CSS3 PIE

PIE (“Progressive Internet Explorer”) implements some of the most popular missing CSS3 box decoration properties in IE, including border-radius and box-shadow for IE 8 and below, and linear-gradient backgrounds for IE 9 and below. Invoked as a HTC behavior (a proprietary IE feature), it looks for the unsupported CSS3 properties on specific elements and renders those properties using VML for IE 6-8 and SVG for IE 9. Its rendering is mostly indistinguishable from native browser implementations and it handles dynamic DOM modification well.

.box {
    border-radius: 8px 8px 0 0;
    box-shadow: #666 0px 2px 3px;
    behavior: url(/path/to/PIE.htc);
}

JSON 2

Douglas Crockford originally wrote json2.js as an API for reading and writing his (then up-and-coming) JSON data format. It became so widely used that browser vendors decided to implement its API natively and turn it into a “de facto” standard; json2.js was transformed from a library to a polyfill after the fact.

<script>
if (!window.JSON) {
  document.write('<script src="path/to/json2.js"><\/script>');
}
</script>

es5-shim

ECMAScript 5th Edition (“ES5”) brings some useful new scripting features, and since they're syntactically compatible with older JavaScript engines they can mostly be polyfilled by patching methods onto built-in JS objects. This es5-shim polyfill does it in two parts: es5-shim.js contains those methods that can be fully polyfilled, and es5-sham.js contains partial implementations of the other methods which rely too much on the underlying engine to work accurately.

<script src="/path/to/es5-shim.min.js"></script>

FlashCanvas

FlashCanvas is an implementation of the HTML5 Canvas API using a Flash plug-in. A rare commercial polyfill, it comes in a paid version, as well as a free version, which lacks a few advanced features like shadows.

<!--[if lt IE 9]>
<script src="/path/to/flashcanvas.js"></script>
<![endif]-->

MediaElement.js

John Dyer's MediaElement.js polyfills support for <video> and <audio> elements, including the HTML5 MediaElement API, in older browsers using Flash or Silverlight plug-ins. It also provides an optional media player UI for those elements, which is consistent across all browsers.

<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>

Webshims Lib

Alexander Farkas's Webshims Lib aggregates many other polyfills together into a single package and conditionally loads only those needed by the visiting browser.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="/path/to/js-webshim/minified/polyfiller.js"></script>

<script>
    // Load all supported polyfills, if the browser needs them:
    $.webshims.polyfill();
</script>

External links

• A list of polyfills providing HTML5 facilities, from the Modernizr project
• HTML5 Polyfill List By Feature
• What are PolyFills in Javascript?