5 Minute Guide to Polyfills

5-minute

Your busy. You’ve got stuff to do. Here’s the low-down on polyfills in 5 minutes.

What Are PolyFills?

A polyfill is a JavaScript library that can emulate features of either HTML, CSS or JavaScript that do not exist in older browsers, or newer features that are experimental.

Where did the name come from? I like to think it is connected to this well-known product, Polyfilla which you can see a picture of in the banner above. This product is used to fill holes and cracks in walls, and in a way, that’s exactly what the JavaScript equivalent is doing, but for missing features.

Why Do We Need Them?

Surely all you need to do is upgrade your browser, right? However:

  • Old browsers may be necessary - In corporate environments, they sometimes have to use older browsers because existing (expensive or obsolete) software won’t work on anything else.
  • We may not be able to afford to - You can’t assume that people can afford to upgrade. What about people who have very old mobiles or laptops that can’t support or run the newer browser versions?
  • We may not want to or realise you can - There are many people that aren’t even aware that they could upgrade, e.g. on their mobiles.
  • Some features are too new - It takes time for all of the other browser vendors to implement the newest features, and
  • A vendor needs consistency - If you create a web based product, especially if you want to sell it, you want as many people to be able to use it as possible. But, you wouldn’t want to have to write multiple versions of the software just to cater for some quirk in a 15 year old copy of Internet Explorer, for instance. You therefore either have to accept it won’t run on that browser, or use a polyfill.

How Do I Know What My Browser Supports?

If you visit the Can I Use website you can actually see the features that are implemented on browser versions and which browsers do or do not support them.

As an example, at the time of writing, CSS Container Queries are not supported on any browser. So, if that feature is needed, you would require a polyfill to be able to use it, whilst you waited for the browsers to catch up. In the picture below, red means not supported.

Where Can I Find A Polyfill?

There are many to choose from, but a few more well-known ones are:

  • html5shiv - fixes missing elements in old IE versions.
  • -prefix-free - helps you to avoid using vendor prefixes and,
  • Selectivizr - which lets you use CSS3 features in IE8 and below.

Please also see pollyfill.io which is aservice that can tell you which polyfills you need, for certain features.

Hi! Did you find this useful or interesting? I have an email list coming soon, but in the meantime, if you ready anything you fancy chatting about, I would love to hear from you. You can contact me here or at stephen ‘at’ logicalmoon.com