Webshim によるポリフィル
HTML5 による実装を進めるにあたり、何らかのポリフィル用のライブラリを導入することが望ましいです。
ここでは Webshim というポリフィル・ライブラリの紹介、簡単な使用方法について説明します。
日々開発が続けられているものなので、利用する際には Webshim 開発プロジェクトのウェブサイトを参照してください。
Webshim はポリフィルライブラリと UI コンポーネントの拡張ライブラリ
Webshim はフォーム検証、ジオロケーション、メディア・エレメント、各種 UI ウィジェットなど、HTML5/CSS3 (以後 HTML5) で導入された機能に関するポリフィルを行なうライブラリです。
またポリフィルを実施するという目的からさらに発展して、現在は UI コンポーネント、ウィジェットのカスタマイズ用のライブラリとして多数のオプションを提供するべく拡張が進められています。
Webshim のインストールと利用
Webshim は jQuery に依存しています。このため Webshim を利用する場合には、jQuery を先に取り込みます。以前は Modernizr にも依存していたのでそれも取り込む必要がありましたが、現在は不要です。
それから、Webshim のパッケージを展開して出来るフォルダ web-webshim/minified 内の polyfiller.js を取り込みます。
Webshim の機能を利用する場合には、さらに webshim.polyfill メソッドにて、利用する機能の名前を列挙します。この機能の名前というのはドキュメントに記載されています。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='js/jquery-1.11.1.min.js'></script>
<script src='js-webshim/minified/polyfiller.js'></script>
...
この例では sticky という機能を利用する場合です。
具体例: Webshim による position: sticky 指定
ここでは CSS3 で導入された position の属性 sticky を利用する状況を考えましょう。position 属性の値として sticky は 2014年8月現在で Firefox には実装されていますが、Chrome や Internet Explorer では実装されていません。
このコードは次の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='js/jquery-1.11.1.min.js'></script>
<script src='js-webshim/minified/polyfiller.js'></script>
<script>
webshim.polyfill('sticky');
</script>
<style>
.ws-sticky {
background-color: #dadada;
top: 10px;
}
.c {
height: 500px;
width: 100%;
}
div {
padding: 10px;
}
</style>
</head>
<body>
<h1>Sticky デモ</h1>
<div class='ws-sticky'>Title 1</div>
<div class='c'>Text 1</div>
<div class='ws-sticky'>Title 2</div>
<div class='c'>Text 2</div>
<div class='ws-sticky'>Title 3</div>
<div class='c'>Text 3</div>
<div class='ws-sticky'>Title 4</div>
<div class='c'>Text 4</div>
<div class='ws-sticky'>Title 5</div>
<div class='c'>Text 5</div>
</body>
</html>
webshim.polyfill に 'sticky' を渡して呼び出した後、sticky とする要素に ws-sticky CSS クラスを設定すれば OK です。こうした手順は webshim のドキュメントをみてください。