How to Use the Webshims Polyfill
Published by Chris Coyier
In this post I'll be talking about the HTML5 and CSS3 feature polyfill library called Webshims Lib and how to use it correctly.
<video> tag all the way back to IE 6 (i.e. html5media).
Webshims enables HTML5 and CSS3 features like semantic tags, canvas, web storage, geolocation, forms and multimedia. Reading through this big list, the first thing that might come to mind is how huge this library must be. Meaning a huge download size and long script execution time. But here is the kicker, Webshims will automatically detect which features the users browser supports and it only loads what is necessary to simulate everything else. This way it will not slow down users who already run a modern browser like Firefox or Chrome. You can even reduce the amount of features to load if you don’t need everything.
How to Use Webshims
To use the webshims lib you need to include the dependencies jQuery and Modernizr alongside Webshims Lib.
<script src="scripts/jquery-1.8.2.min.js"></script> <script src="scripts/modernizr-custom.js"></script> <script src="scripts/webshim/polyfiller.js"></script>
Now you need to initialize Webshims and, if needed, tell it which features you want to use.
<script> // Polyfill all unsupported features $.webshims.polyfill(); </script>
<script> // Polyfill only form and canvas features $.webshims.polyfill('forms canvas'); </script>
And that's it! Webshims will automatically detect and polyfill missing features depending on the user's browser. If you are curious the full feature list is:
Let’s do an example using the
<video> tag. First let's create the basic page without Webshims or any other polyfill.
<!DOCTYPE html> <html> <head> <title>Video native</title> </head> <body> <video width="480" height="360" controls="controls"> <source src="Video.mp4" type="video/mp4"> <source src="Video.webm" type="video/webm"> </video> </body> </html>
Modern browsers will display this video correctly, but Internet Explorer 6, 7 or 8 will not.
Now we change the example to embed the Webshims Lib. You can see that it's not necessary to edit anything else.
<!DOCTYPE html> <html> <head> <title>Video including polyfill</title> <script src="scripts/jquery-1.8.2.min.js"></script> <script src="scripts/modernizr-custom.js"></script> <script src="scripts/webshim/polyfiller.js"></script> <script> $.webshims.polyfill('mediaelement'); </script> </head> <body> <video width="480" height="360" controls="controls"> <source src="Video.mp4" type="video/mp4"> <source src="Video.webm" type="video/webm"> </video> </body> </html>
The modern browser will display its native
<video> tag player but now this functionality is also available in Internet Explorer 6+. You can try the demo here.
As the example has shown, it's really simple to use the Webshims Lib. There is no need to alter your code and it does not slow down users which use a modern browser. It enables everyone to enjoy all features your page provides. Head over to the Webshims homepage for the download, documentation and more demos.