What is a polyfill? Provide an example of a polyfill as well.

A polyfill is essentially code that would allow 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.

So, you can think of the technique of polyfilling as a two step process in which the first step is detecting which features are present in a given browser, and then “patching” in support with helper scripts (like Javascript) for any missing features in that browser.

Polyfills also apply to new browsers




One clarification that we want to make: the practice of polyfilling is not limited to just adding support for older browsers, but it actually also applies to newer browsers as well. This is because even newer browsers may not implement all of the features in the HTML5 Standard. And if we are writing an HTML5 application that uses some HTML5 feature that is not present in the latest version of a popular browser (like Firefox or Chrome), then we must add some polyfill code to take care of it.

Polyfills are not part of the HTML5 standard

Remember that polyfill is an informal term that’s used to describe some browser specific code that helps you get some missing functionality which is present in other browsers.

And, the term polyfill is not something that is part of the HTML5 Standard. In fact, a polyfill does not even have to be used just for HTML5 – it could just as well apply to some CSS code to add support for CSS3, which is the latest version of the CSS standard. But, mostly you will see the term being used in the context of HTML5 since that is how the term originated.

Why is the term polyfill used?

The term polyfill itself is meant to create an image of filling holes and cracks in a wall with some glue to allow you to paint over it. In this analogy, the browser is like the wall, and the polyfill is like the glue which allows you to treat the browser/wall just like any other browser, so you are free to write working HTML5 applications on top of it.

Polyfilling is not limited to Javascript

Although Javascript is one of the main technologies that can be used in polyfilling, you should keep in mind that the technique of polyfilling is not limited to just Javascript, and can include any technology that “plugs” the “holes” that older browsers have in order to add support for an HTML5 application.

The “poly” in polyfilling is used because poly means “many” and the many implies that many different technologies can be used, not just limited to Javascript.

So, keep in mind that polyfilling is really a technique that’s used to make (mostly) HTML5 applications work with older browsers that were not coded to the HTML5 standard, and that the polyfill code itself is not tied to any one particular technology.

An example of a polyfill

Now that we clarified some of the common misunderstandings associated with a polyfill, let’s go through a simple example of when a polyfill would be used.

For example, the sessionstorage property, which stores data for a given user session, is something that’s new in HTML5. Let’s say that we want to check to see if that property is available “natively” (which means built into) in the browser. So, we can write some Javascript code like this to check to see if the sessionstorage property is defined:

typeof window.sessionStorage !== 'undefined'

But, one problem is that some older versions of Firefox may throw a security exception error when this code is executed in the Firefox browser. So if we want to avoid that security exception from being thrown, we can simply wrap this piece of code inside a try catch block. And if we do that then our code could look like this:

/*we define the isThereSessionStorage variable
  which will store either true or false
*/

var isThereSessionStorage = (function() {
  try {
    return typeof window.sessionStorage !== 'undefined';
  } catch (e) {
    return false;
  }
})(); 

if(!isThereSessionStorage)
// our polyfill code goes here.... 

And if the value of the isThereSessionStorage variable is false, we can run our polyfill code (whatever that may be) to “fill in the hole” of the missing property so that our application can still run smoothly even in this browser.

Hiring? Job Hunting? Post a JOB or your RESUME on our JOB BOARD >>

Subscribe to our newsletter for more free interview questions.

  • HTML5Guest

    Good explanation!