How to use the Webshims polyfill library
This article is a translation with the additions of the post css-tricks.com/how-to-use-the-webshims-polyfill
This article will focus on the HTML5 polyfill library called Webshims and its proper use.
In web development, polyfills are scripts that partially emulate the HTML5 or CSS3 specifications. Practically anything can act as a polyfill — a JavaScript library that adds support for CSS3 selectors in older versions of Internet Explorer (for example, Selectivizr ), or a high-end Flash-based solution to support tags
')
Modern browsers will display this video correctly, but Internet Explorer 6, 7, or 8 will not.
Now we will add the webshims library to the sample. Notice that there is no need to edit anything else in the code.
Modern browsers will use immediate tag support.
This article will focus on the HTML5 polyfill library called Webshims and its proper use.
In web development, polyfills are scripts that partially emulate the HTML5 or CSS3 specifications. Practically anything can act as a polyfill — a JavaScript library that adds support for CSS3 selectors in older versions of Internet Explorer (for example, Selectivizr ), or a high-end Flash-based solution to support tags
</code> IE 6 (, <a href="https://github.com/etianen/html5media">html5media</a>). <b>. .</b> : HTML5? ? <anchor>habracut</anchor> , « html5», , . , IE6-8 , " " html5 ccs3. , - . <h4> Webshims.</h4> Webshims polyfill'. <a href="http://jquery.com/">jQuery</a> <a href="http://www.modernizr.com/">Modernizr</a>. . Webshims "" HTML5 , , canvas, , , . , — ? . , webshims , , . , , , , Firefox Chrome. , . <h4> Webshims</h4> JQuery Modernizr webshims. <source lang="html"> <script src="scripts/jquery-1.8.2.min.js"></script> <script src="scripts/modernizr-custom.js"></script> <script src="scripts/webshim/polyfiller.js"></script> </source> webshims , , , . <source lang="html"> <script> // $.webshims.polyfill(); </script> </source> <source lang="html"> <script> // canvas $.webshims.polyfill('forms canvas'); </script> </source> ! Webshims "" , . : <ul> <li>JSON-</li> <li>es5</li> <li></li> <li>canvas</li> <li></li> <li> </li> <li></li> <li></li> <li></li> </ul> <h4></h4> <code><video></code>. , webshims polyfill'. <source lang="html"> <!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">
</code> IE 6 (, <a href="https://github.com/etianen/html5media">html5media</a>). <b>. .</b> : HTML5? ? <anchor>habracut</anchor> , « html5», , . , IE6-8 , " " html5 ccs3. , - . <h4> Webshims.</h4> Webshims polyfill'. <a href="http://jquery.com/">jQuery</a> <a href="http://www.modernizr.com/">Modernizr</a>. . Webshims "" HTML5 , , canvas, , , . , — ? . , webshims , , . , , , , Firefox Chrome. , . <h4> Webshims</h4> JQuery Modernizr webshims. <source lang="html"> <script src="scripts/jquery-1.8.2.min.js"></script> <script src="scripts/modernizr-custom.js"></script> <script src="scripts/webshim/polyfiller.js"></script> </source> webshims , , , . <source lang="html"> <script> // $.webshims.polyfill(); </script> </source> <source lang="html"> <script> // canvas $.webshims.polyfill('forms canvas'); </script> </source> ! Webshims "" , . : <ul> <li>JSON-</li> <li>es5</li> <li></li> <li>canvas</li> <li></li> <li> </li> <li></li> <li></li> <li></li> </ul> <h4></h4> <code><video></code>. , webshims polyfill'. <source lang="html"> <!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">
')
Modern browsers will display this video correctly, but Internet Explorer 6, 7, or 8 will not.
Now we will add the webshims library to the sample. Notice that there is no need to edit anything else in the code.
<!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> Modern browsers will use immediate tag support.
Source: https://habr.com/ru/post/159325/
All Articles