In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. Most often, it refers to a JavaScript library that implements an HTML5 web standard, either an established standard (supported by some browsers) on older browsers, or a proposed standard (not supported by any browsers) on existing browsers. Formally, "a polyfill is a shim for a browser API".[1]
Polyfills allow web developers to use an API regardless of whether or not it is supported by a browser, and usually with minimal overhead. Typically they first check if a browser supports an API, and use it if available, otherwise using their own implementation.[1][2] Polyfills themselves use other, more supported features, and thus different polyfills may be needed for different browsers. The term is also used as a verb: polyfilling is providing a polyfill for a feature.
Definition
The term is a neologism, coined by 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.[3][4] Formally, "a shim is a library that brings a new API to an older environment, using only the means of that environment.",[1] and polyfills exactly fit this definition; the term shim was also used for early polyfills, such as HTML5 Shiv.[5]{{efn|The use of the term shiv here is a pun or mistake on shim.[3]}} However, to Sharp shim connoted non-transparent APIs and workarounds, such as spacer GIFs for layout, sometimes known as shim.gif, and similar terms such as progressive enhancement and graceful degradation were not appropriate, so he invented a new term.[4] The term is based on the multipurpose filling paste brand Polyfilla, a paste used to cover up cracks and holes in walls, and the meaning "fill in holes (in functionality) in many (poly-) ways". The word since gained popularity, particularly due to its use by Paul Irish and in Modernizr documentation.[4][6]
The distinction that Sharp makes is:[3]
{{quote|What makes a polyfill different from the techniques we have already, like a shim, is this: if you removed the polyfill script, your code would continue to work, without any changes required in spite of the polyfill being removed.}}
This distinction is not drawn by other authors.[1] At times various other distinctions are drawn between shims, polyfills, and fallbacks, but there are no generally accepted distinctions: most consider polyfills a form of shim.[7] The term polyfiller is also occasionally found.[8]
Examples
//HTML5 Shiv">HTML5 Shiv: In IE versions prior to 9, unknown HTML elements like {{tag|section|o}} and {{tag|nav|o}} 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.
-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.
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.
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.
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.
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; Since json2.js now implements features native to newer browsers into older browsers, it has become a polyfill instead of a library.
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.
FlashCanvas
FlashCanvas is an implementation of the HTML5 Canvas API using an Adobe 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.
MediaElement.js
John Dyer's MediaElement.js polyfills support for and 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.
//BrowserID">BrowserID:[9] Authentication protocol proposed by Mozilla, failed to gain traction.
[https
//afarkas.github.com/webshim/demos/ 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.
See also
Adapter pattern
Shim (computing)
Wrapper library
Notes
{{Notelist}}
References
1. ^1 2 3 {{cite book|title=Speaking JavaScript |url=http://speakingjs.com/ |author=Axel Rauschmayer |year=2014 |at=Shims Versus Polyfills}} 2. ^"It typically checks if a browser supports an API. If it doesn’t, the polyfill installs its own implementation. That allows you to use the API in either case." 3. ^1 2 {{cite book |title=Introducing HTML5 |author1=Bruce Lawson |author2=Remy Sharp |section=Introducing Polyfills |pages=[https://books.google.com/books?id=a8HQCk4pbQkC&pg=PA276 276–277]}} 4. ^1 2 {{cite web |last=Sharp |first=Remy |title=What is a polyfill? |url=http://remysharp.com/2010/10/08/what-is-a-polyfill/ |accessdate=13 January 2012}} 5. ^{{cite web |quote=“This piece of information makes building an HTML5 compatibility shim for IE7 far easier than had previously been assumed.” |title=Mistakes, Sadness, Regret |url=http://ln.hixie.ch/?start=1201080691&count=1 |authorlink=Ian Hickson |author=Ian Hickson |date=2008-01-23}} 6. ^{{cite web |url=https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills |title=HTML5 Cross browser Polyfills |archiveurl=https://web.archive.org/web/20100928233437/http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills |archivedate=2010-09-28}} 7. ^{{cite web |url=https://stackoverflow.com/questions/6599815/what-is-the-difference-between-a-shim-and-a-polyfill |title=What is the difference between a shim and a polyfill?}} 8. ^{{cite book|title=HTML5 Developer's Cookbook|author1=Chuck Hudson |author2=Tom Leadbetter |year=2011 |page=[https://books.google.com/books?id=No4hLcrmvw8C&pg=PT121&dq=polyfiller 121]}} 9. ^{{ cite web | title = navigator.id | url = https://developer.mozilla.org/en/DOM/navigator.id | publisher = Mozilla Developer Network | date = 30 June 2012 }}
External links
{{cite web |url= https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills |title= List of polyfills providing HTML5 facilities |location= GitHub |publisher= Modernizr project }}
{{cite web |url= http://html5please.com/ |title= HTML5 Polyfill List by Feature |editor-first1= Divya |editor-last1= Manian |editor-first2= Paul |editor-last2= Irish |editor-link2= Paul Irish |editor-first3= Tim |editor-last3= Branyen |editor-first4= Connor |editor-last4= Montgomery |editor-first5= Arthur |editor-last5= Verschaeve |display-editors=etal |website= HTML5 Please |quote= The recommendations... represent the collective knowledge of developers who have been deep in the HTML5 trenches }}
{{cite web |url= http://www.moreonfew.com/what-are-polyfills-in-javascript/ |title= What are PolyFills in Javascript? |date= Sep 5, 2013 |website= More on Few }}
5 : Compatibility layers|Web browsers|Responsive web design|Web design|Web development