月別アーカイブ: 2010年2月

Modernizr で HTML5 の使用が楽に

Modernizr「それぞれのブラウザはどこまで HTML5 を対応していますか。比較表はありますか。」
最近よく聞かれます。聞かれると最初の反応は「oh no!」です。

ブラウザの対応を調べようとすると、このような問題が出てしまいます:

  • ブラウザのバージョンは日々変わっています。
  • HTML5 仕様そのものは日々変わっています。
  • あるブラウザは、今日の◯◯版の対応は昨日の◯◯版の対応と違うかもしれません。
  • あるブラウザの Windows 版の対応は Mac 版、Linux 版、携帯版、テレビ版、ゲーム機版やタブレット版の対応と違うかもしれません。
  • HTML5 対応は true/false ではなく、部分的な対応の方が普通です。
  • 既存の比較表は例外がとても多く、分かりづらいです。
  • ユーザーエージェントはよく嘘を付き、ブラウザの判断としては理想的ではありません。

比較表をいつも更新するのは限りがない作業で大変だし、比較表をいつも参照しないといけないウェブ開発者がかわいそうです。この道を辿ればストレスが溜まりアッという間に白髪が増えてしまいます。おかげさまで楽な方法があります:

ブラウザの対応ではなく、使いたい機能の対応を調べましょう

JavaScript を利用すればある要素、若しくはある属性の存在を調べることができます。このための関数を作ることは難しくありませんが、便利な HTML5 や CSS3 の対応が検出できるライブラリーは既にあります: Modernizr

Modernizr は開発中のため、SVG や Opera 10.5 のトランジションとトランスフォームの検出はまだできませんが、HTML5 がすぐに使いたいウェブ開発者にお勧めです。残念ながら日本語の資料はまだ少ないようなので、使い方を簡単に説明したいと思います。

他の JavaScript ライブラリーと同じように、まずウェブページの <head> にリンクを挿入します:

<!-- HTML -->
<script src="modernizr-1.1.min.js"></script>

次は使いたい HTML5 の機能を対応しないブラウザのためのコードを書きます。JavaScript を対応しないブラウザや JavaScript を無効にしているユーザーのため、ベーシックな HTML だけを利用します:

<!-- HTML -->
<select id="level">
<option disabled selected>選択してください</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

実際に使いたい機能(例えば HTML5 Forms の「range」スライダー)の対応は下記のように Modernizr のオブジェクトで判断できます:

// JavaScript
if (Modernizr.inputtypes.range) {
    ...
}

ブラウザが対応する場合、不必要になった要素を削除し、使いたい要素をページに追加します:

// JavaScript
var fieldset = document.getElementById('fieldset');

// 不必要なセレクトボックスを削除する
fieldset.removeChild(document.getElementById('level'));

// スライダーの input を作る
var level = document.createElement('input');
level.setAttribute('id', 'level');
level.setAttribute('type', 'range');
fieldset.appendChild(level);

上記のコードを利用して簡単なサンプルを作りました: HTML5 対応を判断するサンプル

このような方法で行うと、過去のブラウザでも、未来のブラウザでもユーザビリティが良く、そして常に変化している HTML5 のサポートを気にする必要はありません。是非機能の対応を判断しながら HTML5 を使ってみて下さい。