In web development , a polyfill is That code implements a feature is web browsers That do not feature the media. Most Often, it Refers to a JavaScript library That year implements HTML5 standard web , Either Established year standard (supported by Some browsers) is older browsers, gold has proposed standard (not supported browsers By Any) 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 it is supported by a browser or not, 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, more supported features, and thus different polyfills may be needed for different browsers. The term is also used as a: polyfilling is providing a polyfill for a feature.

Definition

The term is a neologism , coined by Remy Sharp, who needed a word that means “replicate an API using JavaScript (or Flash or whatever) if the browser does not have it natively” while co-writing the book Introducing HTML5 in 2009. [3] [4] Formally, “a shim is a library that 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] [a] However, to sharp shim connoted non-transparent APIs and workarounds, such as Spacer GIFsfor layout, as shim.gif, and similar terms, 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 Polycell , 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 ict use by Paul Irish and in Modernizr documentation. [4] [6]

The distinction that Sharp makes is: [3]

What makes it different? We have already done so, like this: If you removed the polyfill script, your code would have been 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 longer accepted distinctions: most consider polyfills a form of shim. [7] The term polyfiller is also sometimes found. [8]

Examples

HTML5 Shiv
In versions prior to IE 9, unknown HTML Elements like <section>and <nav>Would Be parsed as empty twigs, breaking the page’s structure and making nesting Those Elements not to style using CSS . One of the most widely used polyfills, html5shiv, exploits another quirk of IE document.createElement("tagname"), which causes IE to parse them correctly. It also includes basic HTML for HTML5 elements.
-prefix-free
The 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 recognize the unprefixed versions of several CSS3 properties instead of requiring the developer to write to the vendor prefixes. It reads the page’s stylesheets and replaces any unprefixed properties with their prefixed counterparts.
Selectivizr
Keith Clark’s Selectivizr is a popular polyfill that makes many CSS3 selectors work in IE 8 and below. CSS3 selectors, then uses a JavaScript code to search the document for elements matching those selectors, applying the styles directly to these elements. It supports multiple JavaScript selector libraries such as jQuery .
Flexie
Possibly one of the most anticipated features of CSS3, Flexible Box Layout (aka Flexbox). WebKit and Mozilla engines have a 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 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. Oked Inv oked Inv Inv Inv Inv Inv HTC HTC HTC V Inv V V V V V V V V V V V V V V V V V V V V V V V V V V V dynamic DOM handles 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 has become so widely used that it is de facto standard ; json2.js was transformed from a library to a polyfill after the fact. clarification needed ]
ES5-shim
ECMAScript 5th Edition (“ES5”) are some of the most useful scripting features, and they are mostly compatible with older JavaScript engines. 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 that rely 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, and a version free, which lacks a few advanced features like shadows.
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 for these elements, which is consistent across all browsers.
BrowserID
[9] Authentication protocol proposed by Mozilla, failed to gain traction.
Webshims Lib
Alexander Farkas’s Lib Webshims aggregates many other polyfills together.

See also

  • Adapt pattern
  • Shim (computing)
  • Wrapper library

Notes

  1. Jump up^ The use of the termshivhere is a pun or mistake youshim. [3]

References

  1. ^ Jump up to:d Axel Rauschmayer (2014). Speaking JavaScript . Shims Versus Polyfills .
  2. Jump up^ “It typically checks if a browser supports an API .If it does not, the polyfill installs its own implementation.
  3. ^ Jump up to:c Bruce Lawson; Remy Sharp. “Introducing Polyfills”. Introducing HTML5 . pp. 276-277 .
  4. ^ Jump up to:c Sharp, Remy. “What is a polyfill?” . Retrieved 13 January 2012 .
  5. Jump up^ Ian Hickson (2008-01-23). “Mistakes, Sadness, Regret” . “This piece of information makes building an HTML5 compatibility shim for IE7 far easier than had previously been assumed.”
  6. Jump up^ “HTML5 Cross browser Polyfills” . Archived from the original on 2010-09-28.
  7. Jump up^ “What is the difference between a shim and a polyfill?” .
  8. Jump up^ Chuck Hudson; Tom Leadbetter (2011). HTML5 Developer’s Cookbook . p. 121 .
  9. Jump up^ “navigator.id” . Mozilla Developer Network. June 30, 2012.