Using polyfills to support HTML5

As described in the previous chapter, not all of the new HTML5 features work across the different browsers– this is the category of HTML5 features that I have previously described as “Features that require a JavaScript workaround". Therefore you sometimes have to do some tricks to get your markup to behave correctly . This is were polyfills, fallbacks and shims come in handy.

What does polyfill mean?

A polyfill, or polyfiller as they are sometimes called, is a piece of code that provides a technology or function that you, as the developer, would expect the browser to support natively. It could also be summed up to the phrase "Regressive Enhancement". Enhancing the browser – but focusing on older versions.

And why is it called a polyfill you might think? A British polyfiller is actually the same thing as the American spackling paste. And the virtual polyfiller is applied for exactly the same problems as the real polyfiller – whenever you have a crack in the wall (browser) you use the polyfiller to fix the cracked wall and thereby you attain a nice, even wall (browser). This way you flatten the browser landscape and hopefully all of your visitors get the same, even experience.

How do I choose?

There are a lot of polyfills out there and some of them are better than others, some do just one thing and some try to do it all. Because of this I think it is important to get a little guidance on which polyfills to use and which to steer clear of. And therefore I’ve decided to end the following sections with a chapter about polyfills for the specific features.

Whether you choose to use them or not is up to you, but they will most likely increase both the usability and user experience of your webpage. Even though you might be completely new to HTML you might as well try to start using polyfills because at the end of the day you will be a better webdeveloper having polyfills in your repertoire.