416

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?

2
  • @user3400622 Thanks for the link, the explanation in the link is very clear.
    – Andrew Lam
    Jun 18, 2017 at 2:56
  • @user3400622 the link land on "Page not found". May 8, 2021 at 5:04

6 Answers 6

405

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

6
  • 7
    So it's mean ie7.js is also a polyfill Aug 17, 2011 at 2:34
  • 1
    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. Aug 17, 2011 at 2:35
  • 1
    I think the word Polyfills came up after HTML5. Is Shim different than Polyfills? Aug 17, 2011 at 2:37
  • 16
    A shim is more generalized. A polyfill is a type of shim. Here is a question that explains it well: stackoverflow.com/questions/6599815/… Aug 17, 2011 at 3:01
  • 6
    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. Jan 2, 2015 at 7:10
67

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/

47

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

2
  • 2
    Well explained.
    – EugenSunic
    Sep 6, 2017 at 18:08
  • Short, crisp and to the point. This should be the accepted answer. Jun 17, 2020 at 15:43
17

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

3
  • 14
    what is a shim? Jul 21, 2017 at 7:19
  • 4
    @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 Feb 20, 2018 at 3:41
  • @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
    – Qetesh
    Aug 6, 2019 at 10:13
3

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.

0

Here are some high level thoughts and info that might help, aside from the other answers.

Pollyfills are like a compatability patch for specific browsers. Shims are changes to specific arguments. Fallbacks can be used if say a @mediaquery is not compatible with a browser.

It kind of depends on the requirements of what your app/website needs to be compatible with.

You cna check this site out for compatability of specific libraries with specific browsers. https://caniuse.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.