Easy Browser Support with Polyfill.io

John Ferris

Finding and installing polyfills can often be a tedious task. Not too long ago, I was searching for a good list of polyfills to reference while working on browser compatibility issues. I ended up coming across Polyfill.io, a service that has since proven very useful.

Polyfill.io makes polyfilling support for newer JS features in older browsers super easy. It works via User-Agent sniffing to determine the browser being used, then loads the required polyfills.

Here’s how you use it

  1. Explicitly define the features from the ECMAscript spec your code relies on.
  2. Add the polyfill.io script tag to your page.
  3. When the page loads, polyfill.io will do its own User-Agent sniffing and execute only the polyfills your site needs to function in the current browser.

For example, two common JS features I use frequently are Promises and Object.assign. Neither feature is supported in IE11 or below. Without a polyfill, my app will grind to a halt in those browsers. I'll most likely see an error along these lines:

SCRIPT5009: ‘Promise’ is undefined

The fix is easy. I add the following script tag before my code executes.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Object.assign"></script>

When polyfill.io receives this script request, it will sniff the user-agent to determine the browser making the request and reply with the appropriate polyfills if needed. In this case, the reply includes polyfills for Promises and Object.assign, the two features I defined in the features query parameter of my script tag. That’s it! Now I can use Promises and assign new objects all day long.

If you don’t explicitly define the features you need, a list of defaults will be assumed. I’d recommend defining the features you need to keep the file size down. The example above comes in at 2.8Kb if both polyfills are needed. Performance in general seems pretty good as long as you keep your features in check. The response time is typically in the 100 to 200ms range.

This won’t fix your flexbox woes

While there’s a namespace reserved for the possibility of future CSS polyfills, polyfill.io is currently only focussed on polyfilling JS features. You’re better off sticking with Modernizr when dealing with cross-browser CSS issues.

Actively Maintained

Polyfill.io has a well documented list of features and browsers it supports. You can even view this list in any given browser to directly see how it’s supported. The tool is open source and actively maintained by the Financial Times Developer Program. So if there is a feature you need not on the list, you can submit a pull request to get it added.

So far, I’ve used Polyfill.io on a few production sites with good results. Give it a spin and worry a little less about browser compatibility issues.


About the Author

John has been working in the print and interactive design industry since 2000. In addition to leading the front-end engineering team at Aten, John has spoken at many industry conferences throughout the U.S and internationally, including CSS Dev Conference and DrupalCons Portland, Austin, Amsterdam and L.A., on topics ranging from SVG to CSS architecture and layout design patterns. He is...

Read More