In this post I'll be talking about the HTML5 and CSS3 feature polyfill library called Webshims Lib and how to use it correctly.
Polyfill?
In web development, we call scripts that emulate parts of the HTML5 or CSS3 specification "polyfills". A polyfill can be nearly anything - a JavaScript library that adds support for CSS3 selectors to old versions Internet Explorer (i.e. Selectivizr) or a high end Flash based solution to enable the <audio> and <video> tag all the way back to IE 6 (i.e. html5media).
Introducing Webshims
The Webshims Lib is one of the most complete polyfills out there. It is based on jQuery and Modernizr. Including this one script will enable many features across the whole range of desktop browsers.
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:
- json-storage
- es5
- geolocation
- canvas
- forms
- forms-ext
- mediaelement
- track
- details
Example
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.
Conclusion
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.
How to Use the Webshims Polyfill is a post from CSS-Tricks
via CSS-Tricks http://css-tricks.com/how-to-use-the-webshims-polyfill/
Comentaris
Publica un comentari a l'entrada