A Beginner’s Guide to HTML5 Cross-Browser Polyfills

Share this article

A Beginner’s Guide to HTML5 Cross-Browser Polyfills

The web can seem fast moving. New frameworks, tools, and even languages come and go. Yet many developers feel that they have to move as fast as their slowest user. New browsers are ‘evergreen’ — they auto-update unseen in the background without asking for permission, and they’re making leaps and bounds in terms of progressing new APIs.

Yet even modern browsers implement features at different times. It’s frustrating to read about the bleeding-edge of modern development only to think it’s all unusable for years to come. Maybe you’ve looked through your site’s analytics and spotted users still on IE9? Should you code like it’s 2011 or delegate everything to jQuery or some framework? There is another option. Enter the polyfill.

What Are Polyfills and Why Do We Need Them?

Remy Sharp coined the term in a 2009 book and blog post. If the feature exists in the browser, the polyfill lets the browser do its thing, if not, the polyfill steps in to plug the missing functionality. They fill in the holes of older browsers, the missing features we want to use today. It replicates a native API with non-native code.

What Missing Features Are We Talking About?

In 2009, the 5th Edition of ECMAScript landed. It was a large and radical step forward for the language. ECMAScript 2015 delivered a similarly seismic update. Going forward, improvements to the language will be incremental, happening on a yearly basis. It’s an exciting time, with new features continually making their way into the language. Besides the core language itself, there’s also the DOM and the various APIs of the web platform. To highlight the discrepancy between a modern and a legacy browser, here’s a comparison of the latest Chrome release versus Internet Explorer 9 (which some companies still sadly mandate support for). And here’s a table showing support for ECMAScript 6. The second table only goes as far back as IE 11, which as you can see supports practically zero ES6 features. That’s a lot of missing features…

Polyfills vs Transpiling

So clearly, from looking at the above tables, we need to transpile our code. It takes your shiny new syntax and spits out plain old-fashioned ECMAScript 5. If you want to utilize arrow functions, async/await, rest and spread parameters, classes, et al in your code, you need to transpile your ES6 code into ES5 with a tool such as Babel. However, you can’t polyfill the syntax of JavaScript. While Babel will take your arrow functions and turn them into regular functions, a polyfill will add methods to the global scope and to native prototypes. Babel offers its own ES6 polyfill that, in the words of the Babel website, offers “new built-ins like Promise or WeakMap, static methods like Array.from
or Object.assign, instance methods like Array.prototype.includes, and generator functions.” So the Babel polyfill can give us all the ES6 features we want. But there’s plenty it leaves out. Maybe you add and remove classes with the classList API or conduct media queries with matchMedia, but you still need to support IE9. Luckily there’s a service that provides everything the Babel polyfill covers, and a whole lot more.

Making Life Easier with Polyfill.io

Polyfill.io is an open source initiative developed by the Financial Times. It currently receives up to 204 million requests per day and describes itself as “a canonical library of polyfills”. This polyfills-on-demand delivery system enables you to peruse Can I Use, shrug, use the latest standards and still be compatible with legacy browsers. Ideally, we should only polyfill features we’ve actually used and only send those polyfills that a particular browser actually needs. Polyfill.io can achieve both those needs. Rather than delivering bloat to modern browsers, the service reads the User-Agent HTTP header so that it can deliver only what is necessary. New browsers will receive an almost empty file, old versions of IE will receive a gargantuan wall of code. You can mitigate the weight of code delivered to older machines by specifying a list of the features you’re using in the query string. If omitted, a set of defaults will be used. Using the service does require one additional blocking HTTP request, but to my mind, its ease of use is worth it. Philip Walton, an engineer at Google, has his own thoughts about polyfills and performance, which is worth a read if that additional request bothers you.

What Doesn’t It Cover?

Polyfill.io is pretty comprehensive, and it includes some bleeding-edge browser APIs like Fetch and Promises. Yet there’s a whole world of polyfills out there to let you experiment and use new technology. Perhaps the most exciting of these is web components
, a potentially revolutionary progression in front-end development offering style encapsulation and ease of reuse. Cross-browser support is finally on the horizon. Google have heavily pushed their Polymer project, which is basically a JavaScript framework built on top of a giant polyfill. However, web components shouldn’t be equated with this framework, as web components promise to be pretty powerful all by themselves. You can use components without Polymer, but the full gamut of the API has not been reproduced. The Web Animations API offers a performant library-free way of building animations with Javascript. The browser support isn’t currently great but the shim has proven dependable enough that I’ve already confidently used the technology for all the animations on production sites I’ve worked on. It offers two options —  one fills the features that are currently available in certain browsers. The other adds features that are yet to be finalized, which brings me onto my final topic…

‘Prolyfills’: Testing Out Emerging API’s

And on to prolyfills – speculative shims for APIs that will probably happen. Polyfilling features that haven’t shipped yet as a proof of concept is increasingly common, and is fun for experimenting with the bleeding edge of front-end development. Perhaps you want to test out the Observables proposal inspired by the popular RxJS library? There’s a prolyfill for that. Experimenting with new technology is one of the most exciting parts of being a developer.

Conclusion

So there you have it. We’ve looked at what polyfills are, why they’re necessary, how to pull in whichever polyfills you might need from polyfill.io and even how you can go about polyfilling features that haven’t shipped yet. But what about you? Are you only using language features available in all the browsers you support? Or are you writing modern code, then using polyfills to make it work in older browsers? And what is the oldest browser you’re expected to support? Let me know in the comments below. This article was peer reviewed by Graham Cox. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Frequently Asked Questions about HTML5 Cross-Browser Polyfills

What is the purpose of using HTML5 cross-browser polyfills?

HTML5 cross-browser polyfills are used to enable the functionality of modern web features in older browsers that do not natively support them. They act as a fallback, providing the same functionality that a modern browser would offer. This ensures that users of older browsers can still access and use websites or web applications as intended, without any loss of functionality or experience.

How do I implement a polyfill in my web project?

Implementing a polyfill in your web project involves a few steps. First, you need to identify the feature that you want to polyfill. Next, you need to find a suitable polyfill that provides the functionality for that feature. This can be done by searching through polyfill libraries or repositories online. Once you’ve found a suitable polyfill, you can then include it in your project by adding it to your HTML file using a script tag.

Are there any potential issues or drawbacks to using polyfills?

While polyfills are incredibly useful, they do come with a few potential drawbacks. One of the main issues is performance. Polyfills can add extra weight to your web pages, which can slow down load times and negatively impact user experience. Additionally, not all polyfills are created equal. Some may not fully or accurately replicate the functionality of the feature they’re meant to polyfill, which can lead to inconsistencies or bugs.

How do I choose the right polyfill for my needs?

Choosing the right polyfill depends on a few factors. First, you need to consider the feature you’re trying to polyfill and find a polyfill that accurately replicates its functionality. You should also consider the browsers you’re targeting and ensure the polyfill supports them. Finally, you should consider the size and performance of the polyfill, as these can impact your website’s load times and overall performance.

Can I create my own polyfills?

Yes, it is possible to create your own polyfills. This involves writing a script that checks if a certain feature is supported by the browser, and if not, provides the functionality for that feature. However, creating your own polyfills can be complex and time-consuming, and it’s often easier and more efficient to use existing polyfills.

What are some popular libraries or resources for finding polyfills?

There are several popular libraries and resources for finding polyfills. These include Polyfill.io, which provides a service that automatically returns the polyfills a browser needs; the Modernizr library, which includes a collection of polyfills; and the GitHub repository HTML5 Cross Browser Polyfills, which is a comprehensive list of polyfills.

How do I test if a polyfill is working correctly?

Testing a polyfill involves checking if the feature it’s meant to provide is working correctly in the browsers you’re targeting. This can be done by using browser testing tools or by manually testing the feature in different browsers. If the feature works as expected, then the polyfill is working correctly.

Can polyfills be used with JavaScript frameworks like React or Angular?

Yes, polyfills can be used with JavaScript frameworks like React or Angular. In fact, these frameworks often recommend or even require certain polyfills for optimal compatibility and performance. The process of implementing a polyfill with these frameworks is similar to implementing one in a regular web project.

Are polyfills a long-term solution for browser compatibility issues?

Polyfills are more of a short-term solution for browser compatibility issues. They are used to fill in the gaps in browser support for certain features until the browsers catch up and natively support these features. As browsers continue to evolve and update, the need for certain polyfills will decrease.

What is the difference between a polyfill and a shim?

A polyfill and a shim both serve to provide fallbacks for features not supported in a browser. However, a shim typically provides a fallback for a missing API by using a different, existing API, while a polyfill provides a new implementation that the browser can use as if it were native.

jameshpolyfillquick-tip
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week