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.

Continue reading %A Beginner’s Guide to HTML5 Cross-Browser Polyfills%

by Oliver Williams via SitePoint