Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう！

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}

.csharpcode .lnum { color: #606060; }

こんにちは！
しょこたんです。

HTML5の対応も着々と進み、開発をしてみよう！
とはいっても、なんだかんだで気になるのは、
クロスブラウザ問題。

特にIEは9にならないとHTML5の恩恵は受けられないとのこと。

せっかくHTML5のコードを書いても、
それでscriptエラー！

なんて出したら、台無しです。

今までは、そういった問題に対して、ブラウザのバージョンを調べて判断し、
遷移をかえることをやっていました。

たとえば

<span class="rem">&lt;!--[if lte IE 6.0]&gt;</span>
<span class="rem">&lt;meta http-equiv="refresh" content="0;url=./endosnipe_ie6.html" /&gt;</span>
<span class="rem">&lt;![endif]--&gt;</span>

のように記述すれば、ie6以下のバージョンで他画面に遷移する仕組みを提供できます。

しかし困ったことに、HTML5で追加される機能がたくさんあるので、
新しい機能を使うごとに上記コードを入れるのはとっても手間(><)
※ブラウザの種類×使う機能＝30程度?・・・。

そこで今回ハンドリングに別の手法を用いてみます。
使ってみるのは、Modernizr.jsと呼ばれるライブラリ。

CSS3とHTML5の機能が実行できるのかどうかを
ライブラリ読み込みをするだけで
判断してくれます。
http://www.modernizr.com/

判断したい機能を選らんでGenerateボタン押下。
それだけで準備は整います。

やらなきゃいけないことは、headに、

<span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">="text/javascript"</span>
    <span class="attr">src</span>="&<span class="attr">lt</span>;<span class="attr">ファイルパス</span><span class="kwrd">&gt;</span>/modernizr.custom.80977.js"&gt;<span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>

を追加すること。
これでライブラリが自動的に、各HTML5機能に対してサポートしているか判断してくれます。

たとえばCanvas機能を例にとると、

<span class="kwrd">if</span> (!Modernizr.canvas){
    $(messageArea).append(createDivTag(<span class="str">"Not support Canvas Tag"</span>));
}
<span class="kwrd">else</span>{
    $(messageArea).append(createDivTag(<span class="str">"Support Canvas"</span>));
}

のように使うと、Canvasをサポートしていれば、
Modernizr.canvasにtrueが入るので、Support Canvasの文字が画面に表示されます。

実際にFireFoxとIEで試すとこうなります。

IE8

FireFox4

ie8ってほとんど何も対応してないのね・・・。

さてサポート対象外なら、特定のページに飛ばすというのが一つ対処法ですが、
現在は、ieでこれらHTML5機能を実行できるようにするプラグインがあるので
このプラグインのダウンロードページに飛ばすというのは、一つの手段かなと思います。

こんな感じかな。

<span class="kwrd">if</span> (!Modernizr.canvas){
    window.location = <span class="str">'http://www.google.com/chromeframe/'</span>;
}

ちなみに、このプラグインファイルを実行すると、

<meta equiv="X-UA-Compatible" content="chrome=1">

と書かれたページにおいてIEではなく、Chromeのエンジンが動くとという機能を持っています。

試しにieにchrome frameをダウンロードして
先ほどのコードに上記metaタグを入れると。

確かに今度は、Chromeのエンジンを使っているので
すべてのHTML5の機能が使えるようですね。

試しにCanvasを使ってみると、
正常に描画されました。

なんとかクロスブラウザに対する対処の目処がたちました。
次回は実際にそれぞれの機能を動かしてみようと思います。

では〜！