HTML5やCSS3のサポート状況を判別する
Modernizr（MITライセンスとBSDライセンスのいずれかを選択可能）というJavaScriptライブラリを使うと、HTML5やCSS3の機能をブラウザがサポートしているかを判別できます。HTML5やCSS3はブラウザのバージョンによっても実装状況が異なるため、User-Agentだけを見て対応状況を判定するのは大変な作業です。Modernizrを使えば、User-Agentでの判定をすることなく各機能ごとにサポート状況を判定し、それを元に動作を変えることが可能になります。Modernizrは、IE6以上など現在使われているほぼすべてのブラウザで動作します。
Modernizrの使い方
ModernizrのWebサイトにアクセスし、ライブラリをダウンロードします。ダウンロードできるバージョンにはDevelopmentとProductionがありますが、Developmentは主に開発用、Productionは本番環境用です。何ができるかを試す分にはDevelopmentバージョンで構いませんが、本番環境では自分に必要なパーツだけを選んでカスタマイズしたProductionバージョンを使うことが推奨されています。
ダウンロードしたJavaScriptファイルをHTMLの<head>内で読み込みます。スタイルシートを読み込んだ後の部分に入れましょう。
<script src="js/libs/modernizr.js"></script>
ブラウザがページにアクセスしてModernizrが実行されると、<html>要素にクラスが自動的に追加されます（リスト8）。これらのクラスは、ブラウザがどの機能に対応しているかを教えてくれています。
<html class=" js flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
この<html>に付けられたクラスを利用して、特定のブラウザについてだけ特別なCSSを適用できます。例えば、CSS3のborder-radiusプロパティに対応しているブラウザでは<html>にborderradiusというクラスが追加されます。リスト9のCSSを指定すると、border-radiusプロパティをサポートしているブラウザとサポートしていないブラウザで見た目を変えることができます。
.borderradius #content {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 15px;
}
#content {
border: 2px solid #cdb599;
padding: 8px;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="css/site.css" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<div id="content">
ブラウザによってスタイルが異なります
</div>
</body>
</html>
条件によって読み込むスクリプトを変える
Modernizr.load()メソッドを使うと、条件をもとに異なる外部JavaScriptを読み込むことができます（リスト11）。
Modernizr.load test: Modernizr.canvas yep : 'js/canvas.js' nope: ['js/flashcanvas.js', 'js/no-canvas.js']
Modernizr.load()の引数のtestプロパティがtrueの場合はyepに指定したファイルが、falseの場合はnopeに指定したファイルが読み込まれます。配列を指定すると複数のファイルを読み込むことができます。
リスト11の例では、Canvasをサポートしているブラウザではjs/canvas.jsを、サポートしていないブラウザではjs/flashcanvas.jsとjs/no-canvas.jsの2つのファイルを読み込みます。各機能のサポート状況は、<html>のclass属性以外にも、JavaScriptのModernizrオブジェクトのプロパティによって知ることができます。
サポートされていないAPIを補完する
HTML5やCSS3に代表される新しいAPIをサポートしていない古いブラウザでもそれに近いことが実現できるよう、足りない機能を補完する詰め物となるJavaScriptをpolyfill（ポリフィル）と呼びます。様々なpolyfillの一覧をこちらで確認できます。
ただしpolyfillはあくまで標準APIを有志の努力によって模倣しようという取り組みなので、すべてが完全に標準APIと同じように動くわけではなく、一部のAPIが使えなかったりパフォーマンスが悪いという場合もあります。polyfillを使う時は、適用しても問題が出ないかどうかを慎重に確認することが大事です。
次回も引き続き、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を紹介します。
