what is Polyfill?

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

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

Typically they first check if a browser supports an API, and use it if available, otherwise using their own implementation. Polyfills themselves use other, more supported features, and thus different polyfills may be needed for different browsers.

For example, a polyfill could be used to mimic the functionality of a text-shadow in IE7 using proprietary IE filters, or mimic rem units or media queries by using JavaScript to dynamically adjust the styling as appropriate, or whatever else you require.

Polyfill Examples:

• core-js
• HTML5 Shiv
• Flexie
• JSON 2
• es5-shim
• MediaElement.js..etc

Types of Polyfills:

• Perfect polyfills are polyfills that perfectly implement features completely without any side effects. An example is the JSON library, which implements JSON.stringify and JSON.parse on older browsers that do not already support the global JSON object.
• Common polyfills are polyfills that implement features almost completely. They might have a few small missing features, some edge cases that don’t work correctly, or there might be some slightly annoying side effects. Most polyfills fall into this category.
• Partial polyfills implement certain features but have a lot of missing or broken functionality. An example of this is the ES5 shim, which implements a lot of ECMAScript 5 features for ECMAScript 3 engines, but is missing several key features.
• Fallback polyfills are polyfills that don’t implement the new functionality at all, but just make sure that there is a graceful fallback behavior for older browsers. An example of this is a Web Worker’s fallback.