この記事では、 Webshimsと呼ばれるHTML5ポリフィルライブラリとその適切な使用について説明します。
Web開発では、ポリフィルはHTML5またはCSS3仕様を部分的にエミュレートするスクリプトです。 ほとんどすべてがポリフィルとして機能します-古いバージョンのInternet Explorer（ Selectivizrなど ）でCSS3セレクターのサポートを追加するJavaScriptライブラリー、またはタグをサポートするFlashテクノロジーに基づくハイエンドソリューション
</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">
最新のブラウザではこのビデオが正しく表示されますが、Internet Explorer 6、7、または8では表示されません。
次に、例としてwebshimsライブラリを追加します。 コードの他の部分を編集する必要はないことに注意してください。
<!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>
最新のブラウザは組み込みのタグサポートを使用します