【レポート】"CSS3/HTML5、各ブラウザはどこまで対応?" を、確かめられる「Modernizr」 (2) Hello, Modernizr! | エンタープライズ

急上昇ワード

[

]

【レポート】

"CSS3/HTML5、各ブラウザはどこまで対応?" を、確かめられる「Modernizr」

2 Hello, Modernizr!

富田宏昭　 [2009/07/07]

印刷

Hello, Modernizr!

ここでの動作環境は次のとおり。

OS: Windows XP SP3, Windows 7 RC, Mac OS X 10.5.6
Webブラウザ(Windows XP): Internet Explorer 6/7, Opera 9.64, Google Chrome 3.0.190.4 ※>, Safari 4.0(530.17)
Webブラウザ(Windows 7): Internet Explorer 8, Google Chrome 2.0.172.33, Opera 10 beta 1 ※
Webブラウザ(MacOS X): Firefox 3.5, Safari 3.2.1, Google Chrome 3.0.190.0 ※

※印をつけたWebブラウザは開発版リリースにあたる。筆者のマシン環境上、OSとWebブラウザにかなりバラつきがあるがあらかじめご容赦いただきたい。

Modernizrの使い方は、<body>の中でmodernizrライブラリをロードするように1行追加するだけだ。ロードすることでmodernizrオブジェクトが生成され、その中に各種プロパティの対応状況がtrueかfalseで格納されることになる。Modernizrの使用したサンプルコードは次のとおり。

HTMLファイル - hello_modernizr.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<title>Hello, Modernizr</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="prettyprint.js"></script>
<style type="text/css">
<!--
    body {background:#EEE;color:#222;font:0.8em Arial,Verdana,Sans-Serif;margin:0;padding:20px;}
    #debug {
        width: 700px;
    }
-->
</style>

</head>
<body>
<script type="text/javascript" src="./modernizr-0.9.js"></script>

<div id="debug"></div>

<script type="text/javascript">
<!--
    var ppTable = prettyPrint(window.Modernizr);

    document.getElementById('debug').appendChild(ppTable);
-->
</script>
</body>

</html>

modernizrのオブジェクトを簡潔に表示するために、prettyPrint.jsを使用している。このHTMLを各種Webブラウザで表示させてみよう。


Internet Explorer 6と7での実行結果。Modernizrで確認できるCSS3プロパティはすべてfalseとなった


Opera 9.64での実行結果。9.64ではcanvasとopacityのみが利用できることを検知できた。	Opera 10 beta1についての実行結果。9.64の結果に加えてrgba, hs1aも利用可能になったことがわかった


Safari3.2.1での実行結果。cssanimations, cssgradients, cssreflections以外の項目についてはすべて利用可能であることが検知できた	Safari 4.0での実行結果。Modernizrで確認できるCSS3プロパティはすべて利用可能であることを検知


Internet Explorer 8での実行結果。6, 7同様、Modernizrで確認できるCSS3プロパティはすべてfalse	Google Chrome 2での実行結果。Modernizrで確認できるCSS3プロパティはすべて利用可能であることを検知


Google Chrome 3.0.190.4(Win), 3.0.190.0(Mac)での実行結果。ともに開発版という位置づけだが、安定版同様すべて利用可能であることを検知

Firefox 3.5での実行結果。multiplebgs, borderradius, cssanimations, cssgradients, cssreflections, csstransitions以外に対応していることを検知

ライブラリをロードするだけで一発でこれらの結果が得られるのは嬉しい。対応しているかの確認にいちいちスタイルシートやコードを書かなくとも、ライブラリを利用すればある程度の範囲でチェックが可能となる。ちなみにhttp://www.modernizr.com/にアクセスすることでも、Modernizrによる検出結果を得ることが可能だ。