What is a Polyfill in Web Design and How Are They Used?

Using Javascript to patch support for new features in older browsers

Patch sewn on to repair a hole
Patch sewn on to repair a hole.

In a perfect world, the latest and greatest web design techniques would be fully supported by all web browsers, allowing web designers to immediately use those techniques in our work. Unfortunately, we do not live in that perfect world of unparalleled browser compatibility. To use new features or techniques that will allow you to do better work, you must be mindful of the impact those advances will have on older browsers and the people who still use them.

Oftentimes, this means patching support for those new features with what is known as a “polyfill.”

Defining Polyfill

According to Wikipedia, “a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape.”

Normally powered by Javascript, a polyfill will provide the support that you want in those older browsers, allowing you to use newer features knowing that modern browsers will support them and older browsers will get the patched support as well.

The Good and Bad Sides of Polyfills

The good side of polyfills is obvious - they allow you to integrate new advancements into your web design work by giving you broader support for those new techniques or features, but that support comes at a cost.

While a Javascript-powered polyfill will patch support in older web browsers, there is always the concern of what happens if someone turns Javascript off in their browser.

If that polyfill is what makes the website work correctly in those older browsers, then the lack of Javascript may mean your site remains “broken” in those instances.

Admittedly, much of the Web today will not work as planned if Javascript is turned off, but this is still something to be mindful of as you build your website.

Requiring a person to have Javascript on in order to use a website is a debate that has raged in the web design industry for years. Sometimes it is inevitable that it will be required, but if you can create a site that functions well, albeit not perfectly, without that dependency, then that is best for all involved.

For web browsers that do have Javascript turned on, using polyfills has an impact in the fact that the Javascript files or libraries must be loaded as that page loads in the browser. This has an impact on the site’s performance and it is absolutely something to be concerned about. Loading too many or uncessary polyfills and Javascript files means your site loads slower, which is never a positive thing for anyone.

A Few Examples

Probably the most common example of a polyfill that many websites still use today is the “HTML5 shiv.” This polyfill allows for “styling of HTML5 elements in versions of Internet Explorer prior to version 9.” This is necessary because those HTML5 elements were not around when IE8 and below were developed. This polyfill allows those older versions of IE to understand these new elements so they can be used on a website.

Other polyfills may not have as broad use as the HTML5 shiv.

Most polyfills are used on more of a case-by-case basis as needed. For instance, if you are using the newer image attributes of srcset and sizes to create responsive images for your responsive website, then you are likely going to use the Picturefill polyfill.

Ultimately, polyfills that you may choose to use will be determined based on which newer features or techniques you are trying to use on your site.

Do You Really Need That Polyfill?

There is a temptation to just load every possible polyfill you may need on your site to ensure it has the widest range of support possible, but this is not the way you should build web pages  Using polyfills only when you need them is important and you must be selective in their use by questioning whether or not you really need it in the first place.

I can remember when CSS3 first started being used.

It was exciting to finally be able to create rounded corners and drop shadows directly with CSS instead of with lots of images. The problem, of course, was that older browsers did not support these new CSS3 styles, so those browsers would see normal corners with 90-degree angles and no drop-shadows. To patch that support, I often used a polyfill called CSS3 Pie.

While it was great to see my CSS3 styles in all browsers, in retrospect, this was an unnecessary indulgence. Requiring users to download that polyfill simply to display visual effects was not a good idea. It was not like the lack of rounded corners and drop shadows broke the site for anyone, it simply made it look a little differently, and the truth is that people with older browsers would have no idea that they were seeing a (very) slightly compromised visual design. In truth, I should’ve been more mindful of site performance and less enamored with using a polyfill to provide unnecessary support for non-critical styles.

As you consider using polyfills in your work, ask yourself whether they are even required or if the fall back is acceptable and only use polyfills when the alternative is unacceptable.

Edited by Jeremy Girard on 1/26/17