New web developers are often perterbed when they discover that the latest, most up-to-date browsers - including Chrome - don’t have complete support for every feature in HTML, CSS or JavaScript. Instead, support is a patchwork quilt spread across the entire front of browser development: Firefox will support a feature that Chrome does not, Safari won’t have a feature that’s available in Chrome, etc. There are three primary causes for this:

1. HTML is a living, ever-developing language. While the W3C codifies and standardizes HTML5, developers often desire features that are unfinished and still in beta (such as the Web Animation API). By their very nature, these features can be only partially implemented in current browser releases.
2. There’s a massive amount of work to do. While there are many approaches to browser development, they all reach the same insurmountable problem: there’s a tremendous amount of work in implementing HTML5 features, and only so many people who have the time and ability to contribute code.
3. Consumers won’t accept monolithic browser releases. Two decades ago, browser updates might come out once every 12 to 18 months; IE6 held out for five years. That’s no longer acceptable to consumers, who need (and deserve) regular browser updates. While it’s theoretically possible to not provide a release until a browser supports the entire HTML5 specification, the market has repeatedly shown that consumers will always prefer a browser released now, even if it only has partial support for new features.

This leaves web developers in a difficult position: well-established parts of HTML, CSS and JavaScript have good browser support (albeit with the occasional bug), while hot new features in each language may have support in one or two browsers, but be entirely absent from others. Thankfully, there are solutions:

Shims are any piece of code that intercept an API call (in web development, a request for a feature in HTML5, CSS or JavaScript) and provide alternative programming. Polyfills (a term invented by developer Remy Sharp) are a simplified shim, in the sense that they are usually “drop in” code added to a page that replicates a particular feature for browsers that don’t yet have support.

This code is usually (but not exclusively) JavaScript, often combined with CSS and possibly substitute HTML markup. There are many established polyfills, often providing multiple solutions to the problem of legacy browser support for HTML5 and new features in CSS and JavaScript.

There are a few things to be wary of when employing polyfills, however:

1. Polyfills themselves have limited browser support. While they are written to gain broad legacy support for older browsers, every polyfill has its limit: when it comes to Internet Explorer, for example, some only work in version 8 or higher. You should carefully research the browsers and versions visiting your site using a tool like Google Analytics and choose polyfills with appropriate support.

2. Be careful of dependencies. In order to gain a wider support with older browsers, polyfills sometimes use a framework like JQuery to ensure compatibility. This framework must be loaded for the polyfill to work.

3. Employ conditional loading where possible. You don’t want to load a bunch of irrelevant JavaScript for browsers that already have support for that feature. Conditional loading tests the browser first, and only loads the polyfills needed for that page in that particular browser. A tool like polyfill.io can automate this process; by adding the following at the start of your document:

   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

   …you can have the service detect the browser and load only the polyfills needed. In recent browsers, employing @supports can also be useful.

It’s very important to note that polyfills are temporary solutions to browser support issues: eventually the share of legacy browsers visiting your site that don’t have support for the feature you need will wither away to the single digits, at which point you should probably remove the polyfill entirely.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.