解 説

Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付けてくれます。

Modernizrのダウンロードはこちらのページです。

Modernizrのページでよくわからない場合はDevelopmentバージョンをダウンロードします。その後ダウンロードしたファイルをページ内に読み込んで使用します

尚、Production バージョンは利用する機能を絞り込み圧縮したバージョンが作成できます。サイトを公開する際には、利用する機能のみを絞り込んだこちらのファイルをダウンロードして使用するとよいでしょう。

modernizrでhtmlタグに付けられるクラス名は以下のようなものがあります。

これらのクラス名の中でcanvasなどのクラス名はHTML5の機能やCSS3が正しく使用できる場合に付与されます。
クラス名に no-touch などのようにno-が付くと、no-の付いた機能はそのブラウザでは対応してないことを表します。つまり非対応ブラウザに対して「no-クラス名」でそれに応じた対策がCSSやJavaScriptでとれるようになります。

modernizrを使用してCSS3で角丸を作成した例
border-radiusに対応したブラウザではピンクの四角形に角丸を作成し、非対応ブラウザでは四角形の背景を青にします。
またif文を使用してhtml5対応ブラウザでは[「canvasは使える」とアラート表示し、非対応ブラウザでは「canvasは使えない」とアラート表示します。