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!
I'm on the Chrome team at Google, working on tools to help improve developer productivity and satisfaction.
Great Post Regarding HTML5.
Fantastic presentation, especially loved how you promoted the Modernizr Wiki and Chrome Frame.
Noticed one mistake though, PJAX is not a polyfill, it is just a library that uses the native HTML5 History API. For a more detailed comparison see http://stackoverflow.com/questions/6244780/jquery-pjax-vs-history-js-to-load-specific-content-when-clicked/6319088#6319088
Keep up the amazing work.
Thanks for the clarification Benjamin!. The lines between polyfills and shims (I guess PJAX falls into the latter category) get blurred sometimes but I shall certainly try to remember to update the slides to reflect that its not a true polyfill as such
Pingback: Does Browser Sniffing Still Have a Place? | Web Development, Search Engine Optimization, Social Media Marketing Guru
Hi Addy,
I went through your slide and saw a really motivational quote.
Sliding around I found you mentioned about the PIE, I am really having nightmare using it with IE 7 and 8.
Is it worth using , I am planning to ditch it. Can you please have your say.