Polyfilling The HTML5 Gaps With JavaScript

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've previously written the Developer's Guide To Writing Cross-Browser JavaScript Polyfills which may be useful as further reading
• Alex Sexton has this awesome presentation that talks a little more about Modernizr, yepnope and polyfills
• Rey Bango wrote about Making HTML5 and CSS3 work with polyfills and shims that covers some related material based on his MIX11 talk
• and last but not least, definitely check out the Modernizr Cross-Browser Polyfills wiki page maintained by Paul Irish and others

Thanks

• 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!