Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付けてくれます。
Modernizrのページでよくわからない場合はDevelopmentバージョンをダウンロードします。その後ダウンロードしたファイルをページ内に読み込んで使用します
。
<script src="modernizr_custom_03764.js"></script>
尚、Production バージョンは利用する機能を絞り込み圧縮したバージョンが作成できます。サイトを公開する際には、利用する機能のみを絞り込んだこちらのファイルをダウンロードして使用するとよいでしょう。
modernizrでhtmlタグに付けられるクラス名は以下のようなものがあります。
<html class=" js flexbox 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">
これらのクラス名の中でcanvasなどのクラス名はHTML5の機能やCSS3が正しく使用できる場合に付与されます。
クラス名に no-touch などのようにno-が付くと、no-の付いた機能はそのブラウザでは対応してないことを表します。つまり非対応ブラウザに対して「no-クラス名」でそれに応じた対策がCSSやJavaScriptでとれるようになります。
modernizrを使用してCSS3で角丸を作成した例
border-radiusに対応したブラウザではピンクの四角形に角丸を作成し、非対応ブラウザでは四角形の背景を青にします。
またif文を使用してhtml5対応ブラウザでは[「canvasは使える」とアラート表示し、非対応ブラウザでは「canvasは使えない」とアラート表示します。
