What is the meaning of polyfills in HTML5?

Question

What is the meaning of polyfills in HTML5? I saw this word in many sites about HTML5, e.g. HTML5-Cross-Browser-Polyfills.

So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.

I actually don't understood what is the meaning of polyfills.

Is it a new HTML5 technique or a JavaScript library? I never heard this word before HTML5.

And what is the difference between shims, fallbacks, and polyfills?

Solution 1

A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.

It's sort of an HTML5 technique, since it is used in conjunction with HTML5, but it's not part of HTML5, and you can have polyfills without having HTML5 (for example, to support CSS3 techniques you want).

Here's a good post:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Here's a comprehensive list of Polyfills and Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Solution 2

First off let's clarify what a polyfil is not: A polyfill is not part of the HTML5 Standard. Nor is a polyfill limited to Javascript, even though you often see polyfills being referred to in those contexts.

The term polyfill itself refers to some code that "allows you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in. "

Source and example of polyfill here:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Solution 3

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

Solution 4

A polyfill is a shim which replaces the original call with the call to a shim.

For example, say you want to use the navigator.mediaDevices object, but not all browsers support this. You could imagine a library that provided a shim which you might use like this:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

In this case, you are explicitly calling a shim instead of using the original object or method. The polyfill, on the other hand, replaces the objects and methods on the original objects.

For example:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

In your code, it looks as though you are using the standard navigator.mediaDevices object. But really, the polyfill (adapter.js in the example) has replaced this object with its own one.

The one it has replaced it with is a shim. This will detect if the feature is natively supported and use it if it is, or it will work around it using other APIs if it is not.

So a polyfill is a sort of "transparent" shim. And this is what Remy Sharp (who coined the term) meant when saying "if you removed the polyfill script, your code would continue to work, without any changes required in spite of the polyfill being removed".

Solution 5

A polyfill in web development is code that implements a feature on web browsers that do not support the feature. It usually refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard (supported by some older browsers) or a proposed standard (not supported by any browsers) on existing browsers. "A polyfill is a shim for a browser API," according to the definition.

The HTML5 Standard does not include a polyfill. Polyfills are not limited to Javascript, despite the fact that they are frequently mentioned in that context.

View more solutions

Comments

[Admin]

You can check for better understanding blogs.msdn.com/b/jennifer/archive/2011/08/04/…

[Andrew Lam]

@user3400622 Thanks for the link, the explanation in the link is very clear.

[Sampath Kumar]

@user3400622 the link land on "Page not found".

[Jitendra Vyas]

So it's mean ie7.js is also a polyfill

[Calvin Froedge]

Yes: "Many fixes including PNG transparency, CSS styles/selectors, rendering bug fixes, etc." It's adding this functionality via javascript which the browser does not already support.

[Jitendra Vyas]

I think the word Polyfills came up after HTML5. Is Shim different than Polyfills?

[Calvin Froedge]

A shim is more generalized. A polyfill is a type of shim. Here is a question that explains it well: stackoverflow.com/questions/6599815/…

[aaron-coding]

remysharp.com/2010/10/08/what-is-a-polyfill this link is more than a just a "good post" it's actually the full definition & origin of the word by the person who coined the word. Excerpt: "the product Polyfilla (spackling in the US) is a paste that can be put in to walls to cover cracks and holes." The post also covers the concept that shim predates and is different than polyfill. It's a must read, IMO.

[Oliver Watkins]

what is a shim?

[EugenSunic]

Well explained.

[Anurag Ratna]

@Oliver Watkins If you are familiar with the adapter pattern, then you know what a shim is. Shims intercepts API calls and creates an abstract layer between the caller and the target. Typically shims are used for backward compatibility

[Kellen Stuart]

we should actually just call them IEpolyfills because that's the only browser I ever have problems with

[Qetesh]

@AnuragRatna I wouldn't use 'intercept' to avoid confusion.. Intercept usually refers to code that (transparently) intercepts i.e. without the caller knowing. Shims provide API calls for backward compatibility

[Vibhor Dube]

Short, crisp and to the point. This should be the accepted answer.