Polyfills, polyfills, polyfills!

Polyfill. It’s a fun word to say.

Then again, almost any word that has the prefix ‘poly-‘ is pretty fun to say. Polyrhythm, polyurethane, polygraph. All fun, all the time.

As it applies to web development, a polyfill is a tool that is used to enable a legacy browser to support something a more recent browser would support as if it was native. The idea behind calling it a polyfill is obvious, it’s a tool that fills all the gaps presented by older browsers, making them behave in a more modern fashion.

Honestly, ’polyfill’ is a word that’s been showing up on my radar a lot, and I actually couldn’t be happier about it, because it offers solutions to problems that web developers always run into: making everything work with older browsers, it evens up the playing field so much in some cases that progressive enhancement and graceful degradation don’t really factor in!

There are so many polyfills, too. People recreate these features using javascript, since the support for JS is a lot more widespread than the support for CSS3.

If you want IE7/IE8 to support the opacity CSS property? There’s a polyfill for that.

You want your site to resize dynamically when CSS3 media queries aren’t supported? BAM. POLYFILL.

Would you like to support something if the feature exists? There’s a tool that lets you enable your features conditionally!

(although Modernizr might be less of a polyfill and more of an indicator of what features your environment isn’t supporting)

Honestly, Modernizr keeps a pretty sizable list of different polyfillsthat achieve the job of supporting HTML5 features when they aren’t supported natively.

Be sure to check it out!

Happy coding!

Written on July 10, 2014