Polyfilling The HTML5 Gaps With JavaScript

December 14, 2011

We all want to use the hot new features being implemented in modern browsers right away, but there's a small problem holding us back: how can we use these great new capabilities whilst ensuring older browsers still render pages and features as expected? Polyfills are here to help.

Polyfills are JavaScript shims that replicate the standard API found in native features of modern browsers for those without them. In these slides from my talk at FITC, I'll take you through how to use polyfills and feature detection tests in your applications, write your own feature detection tests and also your own polyfills.

We'll look at how excellent tools like Modernizr can help ease this process and also cover some important issues to consider when using polyfills, such as performance.

Slide options

  • For users with a modern browser, I highly recommend looking at the HTML version of the slides. These should work fine in most versions of Chrome/FF/Opera
  • If for some reason the slides don't render, you can also view a lo-res version of the slides on SpeakerDeck or grab the PDF.This won't be as well formatted/styled, but you'll still be able to read most of the content.

Further reading


  • I'd like to extend my thanks to FITC for inviting me down to Toronto for Spotlight HTML5. It was a great conference with many interesting sessions.
  • Thanks to @mathias, @peol, @paul_irish and @necolas for their input that helped polish the slides further <3
  • You guys - if there are any errors or omissions you've seen, please do let me know. I'm more than happy to update the slides as needed.

and that's it. I hope someone finds the slides useful!