Polyfill (programming): Difference between revisions

Revision as of 18:37, 11 March 2014

Latest revision as of 13:02, 2 April 2025

(124 intermediate revisions by 86 users not shown)

Line 1:

{{short description|Code to implement features in web browsers that do not support them}}

In [[web development]], a '''''polyfill''''' (or '''''polyfiller''''') is downloadable code which provides facilities that are not built into a web browser. It provides 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.<ref name=Sharp2010>{{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}}</ref> Web [[Shim_(computing)|shims]]<ref>[http://afarkas.github.com/webshim/demos/ Webshim]</ref> and [[HTML5 Shiv]]s are related concepts.

{{other uses|Polyfill (disambiguation)}}

In [[software development]], a '''polyfill''' is code that implements a new standard feature of a [[deployment environment]] within an old version of that environment that does not natively support the feature. Most often, it refers to [[JavaScript]] code that implements an [[HTML5]] or [[CSS]] [[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. Polyfills are also used in [[PHP]] and [[Python (programming language)|Python]].<ref>{{Cite book |last=Thormeier |first=Pascal |url=https://books.google.com/books?id=yprEEAAAQBAJ&dq=polyfill+php&pg=PA195 |title=Mastering CSS Grid: A comprehensive and practical guide to creating beautiful layouts with CSS Grid |date=2023-06-09 |publisher=Packt Publishing Ltd |isbn=978-1-80461-616-1 |pages=195 |language=}}</ref>

==Origin==

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.<ref name="speakingjs">{{cite book|title=Speaking JavaScript |url=http://speakingjs.com/ |author=Luis Ángel Pérez Castillo |year=2019}}</ref><ref>"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."</ref> 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.

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' [http://remysharp.com/2010/10/08/what-is-a-polyfill/ 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, or where specific to, Javascript.

==Definition==

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 is now widely used 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.

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.<ref name="introducing276">{{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]}}</ref><ref name="sharp2010">{{cite web |last=Sharp |first=Remy |title=What is a polyfill? |date=8 October 2010 |url=https://remysharp.com/2010/10/08/what-is-a-polyfill/ |access-date=13 January 2012}}</ref> Formally, "a shim is a [[Library (computing)|library]] that brings a new API to an older environment, using only the means of that environment."<ref name="speakingjs"/> Polyfills exactly fit this definition; the term ''shim'' was also used for early polyfills.<ref>{{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=https://ln.hixie.ch/?start=1201080691&count=1 |author-link=Ian Hickson |author=Ian Hickson |date=2008-01-23}}</ref> However, to Sharp ''shim'' connoted non-transparent APIs and workarounds, such as [[spacer GIF]]s for layout, sometimes known as <code>shim.gif</code>, and similar terms such as ''[[progressive enhancement]]'' and ''[[graceful degradation]]'' were not appropriate, so he invented a new term.<ref name="sharp2010"/> The term is based on the [[spackling paste|multipurpose filling paste]] brand ''[[Spackling paste#Polyfilla|Polyfilla]],'' a paste used to cover up cracks and holes in walls, and the meaning "fill in holes (in functionality) in many ([[wikt:poly-|poly-]]) ways." The word has since gained popularity, particularly due to its use by [[Paul Irish]] and in [[Modernizr]] documentation.<ref name="sharp2010"/><ref>{{cite web |url=https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills |title=HTML5 Cross browser Polyfills |website=[[GitHub]] |archive-url=https://web.archive.org/web/20100928233437/http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills |archive-date=2010-09-28}}</ref>

The distinction that Sharp makes is:<ref name="introducing276"/>

==Description==

{{blockquote|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.<ref name="speakingjs"/> 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.<ref>{{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?}}</ref> The term ''polyfiller'' is also occasionally found.<ref>{{cite book|title=HTML5 Developer's Cookbook|author1=Chuck Hudson |author2=Tom Leadbetter |year=2011 |page=[https://books.google.com/books?id=No4hLcrmvw8C&dq=polyfiller&pg=PT121 121]}}</ref>

== Examples ==

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]] [[Application Programming Interface|API]] which (as of mid-2012) is not supported in any browser and must be provided via a polyfill.<ref>{{cite web

{{refimprove section |date=July 2023}}

|title=navigator.id

|url=https://developer.mozilla.org/en/DOM/navigator.id

|publisher=Mozilla Developer Network |date=30 Jun 2012}}</ref>

=== core-js ===

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.

core-js<ref>{{Cite web|url=https://github.com/zloirock/core-js|title = Core-js|website = [[GitHub]]|date = 26 October 2021}}</ref> is one of the most popular<ref>{{Cite web|url=https://www.npmtrends.com/core-js-vs-core-js-pure-vs-es5-shim-vs-es6-shim-vs-airbnb-js-shims-vs-polyfill-library-vs-polyfill-service-vs-js-polyfills|title = Airbnb-js-shims vs core-js vs core-js-pure vs es5-shim vs es6-shim vs js-polyfills vs polyfill-library vs polyfill-service &#124; NPM trends}}</ref> JavaScript [[standard library]] polyfills. Includes polyfills for [[ECMAScript]] up to the latest version of the standard: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript proposals, some cross-platform [[WHATWG]] / [[W3C]] features and proposals like <code>URL</code>. You can load only required features or use it without global namespace pollution. It can be integrated with [[Babel (compiler)|Babel]], which allows it to automatically inject required core-js modules into your code.

==List of known ''polyfills''==

===html5shiv===

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,{{efn|The use of the term ''shiv'' here is a pun or mistake on ''shim.''<ref name="introducing276"/>}} exploits another quirk of IE to work around this bug: calling <code>document.createElement("tagname")</code> for each of the new HTML5 elements, which causes IE to parse them correctly. It also includes basic default styling for those HTML5 elements.

<code>document.createElement("tagname")</code> for each of the new HTML5 elements, which causes IE parse them correctly. It also includes basic default styling for those HTML5 elements.

====Usage====

<syntaxhighlight lang="html4strict">

<!--[if lt IE 9]>

<script src="path/to/html5shiv.js"></script>

<![endif]-->

</syntaxhighlight>

===-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.

====Usage====

<syntaxhighlight lang="html4strict">

<link rel="stylesheet" href="/css/styles.css">

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

</syntaxhighlight>

===Selectivizr===

Keith Clark's Selectivizr is a popular polyfill for making 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]].

====Usage====

<syntaxhighlight lang="html4strict">

<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]-->

</syntaxhighlight>

===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.

=== -prefix-free ===

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.

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.

====Usage====

<syntaxhighlight lang="html4strict">

=== Selectivizr ===

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

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 src="/path/to/flexie.min.js"></script>

</syntaxhighlight>

===CSS3 PIEFlexie ===

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.

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.

====Usage====

=== CSS3 PIE ===

<syntaxhighlight lang="html4strict">

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;

=== JSON 2 ===

box-shadow: #666 0px 2px 3px;

[[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|''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.

behavior: url(/path/to/PIE.htc);

}

=== es5-shim ===

</syntaxhighlight>

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.

===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.

====Usage= 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.

<syntaxhighlight lang="html4strict">

<script>

=== MediaElement.js ===

if (!window.JSON) {

John Dyer's MediaElement.js polyfills support for <code><video></code> and <code><audio></code> 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.

document.write('<script src="path/to/json2.js"><\/script>');

}

=== Polyfill.io ===

</script>

A JavaScript library created by Andrew Betts that implemented Polyfill. In February 2024, the library's ___domain was acquired by China-based company Funnull and within a few months became part of a [[supply chain attack]].<ref>{{Cite web |last=Goodin |first=Dan |date=2024-07-03 |title=384,000 sites pull code from sketchy code library recently bought by Chinese firm |url=https://arstechnica.com/security/2024/07/384000-sites-link-to-code-library-caught-performing-supply-chain-attack/ |access-date=2024-07-03 |website=[[Ars Technica]] |language=en-us}}</ref><ref>{{Cite web |title=Polyfill.io Attack Infects Over 110,000 Websites - Spiceworks |url=https://www.spiceworks.com/it-security/cyber-risk-management/news/polyfill-supply-chain-attack-infects-websites/ |access-date=2024-07-01 |website=Spiceworks Inc |language=en-US}}</ref>

</syntaxhighlight>

===es5-shim===

=== BrowserID ===

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.

{{Main articles|Mozilla Persona}}

====Usage====

[[Authentication protocol]] proposed by Mozilla, failed to gain traction.<ref>{{cite web | title = navigator.id | url = https://developer.mozilla.org/en/DOM/navigator.id | publisher = Mozilla Developer Network | date = 30 June 2012 | access-date = 9 July 2012 | archive-date = 3 August 2012 | archive-url = https://web.archive.org/web/20120803093440/https://developer.mozilla.org/en/DOM/navigator.id | url-status = dead }}</ref>

<syntaxhighlight lang="html4strict">

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

=== Webshims Lib ===

</syntaxhighlight>

===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.

====Usage====

<syntaxhighlight lang="html4strict">

<!--[if lt IE 9]>

<script src="/path/to/flashcanvas.js"></script>

<![endif]-->

</syntaxhighlight>

===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.

====Usage====

<syntaxhighlight lang="html4strict">

<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>

</syntaxhighlight>

===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.

====Usage====

<syntaxhighlight lang="html4strict">

<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>

=== Hyphenopoly.js ===

<script>

Hyphenopoly.js enables [[Syllabification#Algorithm|automatic hyphenation]] if it is not already supported by the browser for the respective document language.<ref>{{Cite web|url=https://github.com/mnater/Hyphenopoly|title = Hyphenopoly.js|website = [[GitHub]]|date = 25 September 2022}}</ref>

// Load all supported polyfills, if the browser needs them:

$.webshims.polyfill();

== See also ==

</script>

* [[Adapter pattern]]

</syntaxhighlight>

* [[Shim (computing)]]

* [[Wrapper library]]

* [[Adaptive web design]]

* [[Backwards compatibility]]

==Notes==

{{Notelist}}

==References==

Line 112 ⟶ 73:

== External links ==

*[ {{cite web |url= https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills A|title= listList of polyfills] providing HTML5 facilities, from|___location= theGitHub |publisher= [[Modernizr]] project }}

* {{cite web |url= https://html5please.com/ |title= HTML5 Polyfill List by Feature |editor1-first= Divya |editor1-last= Manian |editor2-first= Paul |editor2-last= Irish |editor-link2= Paul Irish |editor3-first= Tim |editor3-last= Branyen |editor4-first= Connor |editor4-last= Montgomery |editor5-first= Arthur |editor5-last= Verschaeve |display-editors=etal |website= HTML5 Please |quote= The recommendations... represent the collective knowledge of developers who have been deep in the HTML5 trenches }}

*[http://html5please.com/ HTML5 Polyfill List By Feature]

*[http {{cite web |url= https://www.moreonfew.com/what-are-polyfills-in-javascript/ |title= What are PolyFills in Javascript?] |date= 5 September 2013 |website= More on Few }}

{{Use dmy dates|date=August 2024}}

[[Category:Compatibility layers]]

[[Category:Web browsers]]

[[Category:Responsive_web_designResponsive web design]]

[[Category:Web design]]

[[Category:Web development]]