現時点では、従来のブラウザが完全に交換されているわけではないため、最新のCSS3またはHTML5機能をWebサイトに埋め込むことが困難です。 Modernizrはこの問題を解決するためになりました。オープンソースのJavaScriptライブラリとして、ModernizrはCSS3またはHTML5機能のブラウザサポートを検出します。 Modernizrは、古いブラウザーでサポートされていない機能を追加しようとはしていませんが、オプションのスタイル構成を作成してページデザインを変更できます。また、カスタマイズされたスクリプトをロードして、古いブラウザではサポートされていない機能をシミュレートできます。
Modernizrは簡単に使用できますが、全能ではありません。 Modernizrの使用の成功は、CSSとJavaScriptのスキルに大きく依存します。このガイドを使用すると、マルチコラムやプロジェクションをサポートしていないブラウザにオプションのスタイルを設定する方法を学ぶことができます。さらに、古いブラウザを取得して、最新のHTML5が必要とするプロパティを使用するフォームを検証する方法と、ブラウザの機能に基づいてスクリプトファイルを選択的にロードする方法を学ぶことができます。
Modernizrは、ブラウザの機能サポートを検出するために使用されるJavaScriptライブラリです。現在、一連のテストのブラウザの処理をチェックすることにより、ModernizrはHTML5に関する18のCSS3関数と40を超える関数を検出できます。ブラウザ名を検出する従来の方法（ブラウザスニッフィング）よりも信頼性が高くなっています。完全な一連のテストの実行時間には、数マイクロ秒しかかかりません。さらに、Modernizr Webサイトはカスタムスクリプトを使用して関心のある要素のみを検出し、効率の最適化を達成します。
Modernizrを使用してCSS3サポートを検出する場合、JavaScriptの知識が必要です。ファイルをWebページに挿入するだけで、ブラウザの機能に応じてページの<html>タグに一連のクラスを追加します。対応するクラスの名前は標準化要件を満たしており、理解しやすいです。たとえば、ブラウザがBox-Shadowプロパティをサポートしている場合、対応するBoxShadowクラスを追加する必要があります。それ以外の場合は、no-boxshadowクラスを追加します。あなたがしなければならないのは、これらのクラスを使用して対応するブラウザに適切なスタイルを提供するスタイルテーブルを作成することです。
Modernizrを使用すると、Polyfillsとして知られるJavaScriptソリューションを簡単に実装できます。これは、HTML5関連の機能とGeolocationなどのテクノロジーをシミュレートします。ただし、これらの機能とテクノロジーを使用するには、JavaScriptを基本的に理解する必要があります。ポリフィルという用語は、亀裂を満たす英国のブランドの粘土から来ています（つまり、アメリカ人に知られている充填材）。ここでは、PolyFillを使用してブラウザの機能を埋めます。 Modernizrがこのタスクをシームレスに実行する場合があります。しかし、本質的には、これは単なるパッチングジョブであるため、脆弱なブラウザによって達成されたまったく同じ結果を作成するためにそれに依存することはできません。
他のJavaScriptライブラリと同様に、Modernizrは開発および生産バージョンを提供します。ほとんどのライブラリと比較して唯一の違いは、空間とコメントが制作バージョンから削除され、ダウンロードのサイズが縮小されたことです。 Modernizrは別のアプローチを取ります。開発バージョンは、ある意味でキッチンのシンクと呼ぶことができます。ほとんどすべてが含まれています。制作バージョンには、選択した要素のみが含まれているため、ダウンロードを大幅に削減できます。多くの場合、生産バージョンは開発バージョンのサイズの20分の1に縮小できます。
Modernizrでテストするときは、開発バージョンをダウンロードすることをお勧めします。その仕組みとその機能を習得したら、ウェブサイトで展開用のカスタム制作バージョンをダウンロードできます。
このチュートリアルのサンプルファイルには、Modernizrの開発2.0.6バージョンが含まれていますが、Modernizrサイトの最新バージョンに置き換えることをお勧めします。
注：誤ってメインナビゲーションメニューのダウンロードリンクをクリックすると、多数のチェックボックスが表示され、必要なツールを選択するように依頼します。これは、カスタマイズされたバージョンの生産用に設定されています。パネルの上部にある開発バージョンへのリンクをクリックするか、ブラウザのバックボタンをクリックしてホームページに戻り、図1に示す[開発]ボタンを選択します。
前述のように、Modernizrは古いブラウザーに新しい機能を追加しようとはしませんが、あなたのスタイルの不足している機能を補うことができます。これがどのように機能するかを示すために、サンプルファイルにはcss_support_begin.htmlというページが含まれています。このページを新しいブラウザにロードすると、図2のように見えます。
図2。Firefox5はマルチコラム形式のページを表示し、画像に影を追加しますこのページのスタイルは、CSS3のcolumn-countとbox-shadowプロパティを使用して、マルチコラム形式のテキストを表示し、画像に影を追加することです。ブラウザの古いバージョンはこれらのプロパティのいずれもサポートしていないため、Internet Explorer（すなわち）7の同じページは図3のように見えます。
IE9では、同じページが画像の影を示していますが、テキストは図3に示すレイアウトと同じです。
不足している機能を補おうとすることで取るものは、デザインのアウトラインの要件によって異なります。すべてのブラウザでページをまったく同じように見せようとするための多くの作業が必要ですが、画像の周りのテキストを囲み、画像の左マージンをテキストに調整し、画像の境界と右端に曖昧な境界を追加して、3次元のように感じるなど、簡単な改善を行うことができます。
ModernizrはJavaScriptを使用してブラウザでサポートされている機能を検出しますが、JavaScriptを使用して異なるスタイルシートを動的にロードする代わりに、非常に簡単な手法を使用してページの<HTML>タグにクラスを追加します。その後、デザイナーとして、CSSケーシングを使用してターゲット要素に適切なスタイルを提供することを決定するのはあなた次第です。たとえば、ページがbox-shadowプロパティをサポートしている場合、Modernizrはboxshadowクラスを追加します。サポートされていない場合は、代替品としてno-boxshadowクラスで追加されます。
ブラウザは認識できないCSSプロパティを無視するため、基本的なスタイルのルールに従ってbox-shadowプロパティを自信を持って使用できますが、以下の形式で古いブラウザに個別の子孫セレクターを追加する必要があります。
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } box-shadowをサポートしていないブラウザのみがno-boxshadowため、他のブラウザはこのスタイルルールを適用しません。
Modernizrをサンプルページに追加し、<HTML>タグに追加するクラスを確認しましょう。
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizrは、ブラウザで有効になっているJavaScriptに依存しています。有効になると、このクラスは動的に削除されます。ただし、まれに、JavaScriptは有効になっていない場合でもHTML Makupに存在します。これにより、必要に応じてそのような訪問者向けの特別なスタイルルールを作成できます。
</style> <script src=js/modernizr.js></script> </head>注：挿入パネルまたは挿入メニューを使用する場合、DreamWeaverはtype=text/javascript最初の<script>タグに追加します。これはもはやHTML5では必要ありませんが、それを維持しても害はありません。
注： DreamWeaverバージョンにライブコードがない場合（または別のHTMLエディターを使用している場合）、Firefoxブラウザが提供するほとんどの新しいブラウザーまたはFireBugが提供する開発ツールを使用して生成されたコードを確認できます。
図4に示すように、 no-jsクラスはjsクラスに置き換えられました。これは、JavaScriptが有効になっていることを示しています。
表1に、CSS3のサポートを示すためにModernizrが使用するクラス名を示します。関数がそれをサポートしていない場合、対応するクラスの名前にはno-が付いています。
表1。Modernizrによって検出されたCSS3関数
CSS機能 | Modernizrクラス（プロパティ） |
@font-face | fontface |
::before ::after | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
CSSアニメーション | cssanimations |
CSS 2D変換 | csstransforms |
CSS 3D変換 | csstransforms3d |
CSS遷移 | csstransitions |
柔軟なボックスレイアウト | flexbox |
勾配 | cssgradients |
hsla() | hsla |
マルチカラムレイアウト | csscolumns |
複数の背景 | multiplebgs |
opacity | opacity |
反射 | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
特定のCSS属性がどこでテストされていても、クラス名とプロパティ名は同じですが、これにはハイフンまたはブラケットの除去が必要です。他のクラスは、参照するCSS3モジュールにちなんで命名されます。
表1を参照すると、Modernizrがboxshadowとcsscolumnsを使用して、それぞれbox-shadowプロパティとマルチコラムレイアウトのサポートを示すことがわかります。したがって、これらの機能をサポートしていないブラウザ向けの特別なスタイルルールを作成するには、 no-boxshadowおよびno-csscolumnsクラスを使用できます。
指令が簡単であることを確認するために、CSS宣言の例のみを示します。それらをコードビューに直接入力するか、[新しいCSSルール]ダイアログボックスを使用できます。
.no-boxshadow imgの新しい子孫（化合物）セレクターを作成します。 #8A8A8Aを選択しました）。結果のスタイルルールは次のようになります。.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }これは半透明の影ほど魅力的ではありませんが、それにもかかわらず、画像は背景からわずかに突出することができます。
.no-csscolumns imgの新しい子孫セレクターを作成します。 .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns imgルールに従っていることを確認してください。 2つのルールには同じ特異性があるため、逆転した場合、 .columns img作成したばかりの新しいルールを上書きする場合があります。 .no-csscolumns imgを.no-csscolumns .columns imgに変更するには、より高い特異性を与えることができますが、セレクターがより簡単になるほど良いことを確認することが最善です。 （ちなみに、特殊性が何であるかわからない場合は、Adrian Seniorの記事、理解の特異性をご覧ください。長い間公開されていますが、価値があります。） この簡単な例では、 no-でプレフィックスされたクラスのみを使用して、ブラウザーの古いバージョン用の特別なスタイルを作成しました。ただし、その能力により、両方のクラスを使用して（接頭辞が付いている場合とない場合）、ブラウザにさまざまなスタイルを作成することはまったく意味がありません。例えば：
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }たとえば、サポートレベルごとにまったく異なるレイアウトを作成する場合、このアプローチが合理的である場合があります。しかし、それが古いブラウザーに選択可能なスタイルを提供するだけの問題である場合、ブラウザが認識していないプロパティを無視していることを忘れないでください。すべてのスタイルにModernizrクラスを使用すると、JavaScriptに障害のあるブラウザでページが完全にスタイルされます。
Modernizrは、Starting <HTML>タグのクラス名を追加して、二重の目的を再生します。ページが読み込まれているとき、それらはModernizrオブジェクトによって作成されたJavaScriptプロパティの名前でもあります。表1に、CSSに関連するクラスと属性の名前を示します。表2に、HTML5および地理的な場所などの関連技術に関連する残りのクラスと属性を示します。
表2。Modernizrによって検出されたHTML5関連の特徴
HTML5関連機能 | Modernizrクラス（プロパティ） |
アプリケーションキャッシュ | applicationcache |
オーディオ | audio. type (ogg, mp3, wav, m4a) |
キャンバス | canvas |
キャンバステキスト | canvastext |
ドラッグアンドドロップ | draganddrop |
フォーム入力属性 | input. attributeName |
フォーム入力要素 | inputtypes. elementName |
ジオロケーション | geolocation |
ハッシュチャンジイベント | hashchange |
歴史管理 | history |
indexeddb | indexeddb |
インラインSVG | inlinesvg |
ローカルストレージ | localstorage |
メッセージング | postmessage |
セッションストレージ | sessionstorage |
笑顔 | smil |
SVG | svg |
SVGクリップパス | svgclippaths |
イベントにタッチします | touch |
ビデオ | video. type (ogg, webm, h264) |
webgl | webgl |
ウェブソケット | websockets |
Web SQLデータベース | websqldatabase |
ウェブワーカー | webworkers |
ほとんどの場合、表1および表2にリストされているすべての属性はtrueまたはfalseを返します。したがって、以下に示すように、JavaScriptを使用してローカルストレージをテストできます。
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }ただし、 audioとvideoの観点から、返品値は、ブラウザが特定のタイプの信頼レベルを処理できることを示す文字列です。 HTML5仕様によると、空の文字列は、タイプがサポートされていないことを意味します。このタイプがサポートされている場合、返品値はおそらくまたはおそらくそうです。例えば：
if (Modernizr.video.h264 == ) { // h264 is not supported }HTML5は、ページが初めてロードされたときに指定されたフィールドにカーソルを自動的に配置するautofocusなど、多くの新しいフォームプロパティを追加します。別の有用なプロパティがrequired 。これにより、必要なフィールドが空白のままになった場合、HTML5互換のブラウザがフォームを送信できないようにします（図6を参照）。
これは素晴らしいことですが、質問が残ります。ブラウザの古いバージョンをどうすればよいですか？
1つの解決策は、それらを無視し、最終チェックのためにサーバー側の検証関数に任せることです。ブラウザがrequired属性を認識していない場合、この状況を処理するもう1つのユーザーフレンドリーな方法は、必要なフィールドを確認するための小さなスクリプトを作成することです。次の指示は、Modernizrの助けを借りて対応する操作を実行する方法を示しています。
</style> <script src=js/modernizr.js></script> </head> <script>ブロックを作成し、ページが読み込まれてコードの実行を容易にするとすぐにイベントハンドラーを作成します。<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocusとrequiredプロパティを認識しないブラウザでそれらを模倣する必要があります。 autofocusに対処する方法は簡単です：window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }この条件は、 autofocusがサポートされていない場合、 Modernizr.input.autofocusをテストします。返された値はfalseです。ただし、論理演算子ではない（感嘆符）は意味を逆転させることができるため、 autofocusがサポートされていない場合、この状態の評価結果はtrueであり、 inputs[0].focus()最初の入力フィールドにカーソルを配置します。
requiredてサポートされていない場合は、コードを追加して、必要なフィールドのチェックを容易にします。イベントハンドラーの完全なコードは次のとおりです。window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }新しいコードは、フォームを送信するときにすべての入力要素を介して反復してrequired属性を持つフィールドを見つけることができる関数を生成します。フィールドが見つかると、値から開始と終了ブランクが削除され、結果が空の文字列である場合、結果がrequired配列に追加されます。すべてのフィールドがチェックされた後、いくつかの要素が配列に含まれている場合、ブラウザは欠落しているフィールド名に関連する警告を表示し、フォームの送信を防ぎます。
注： Safari 5.1は、 requiredプロパティをサポートしていることを誤って報告しているため、必要なフィールドを検証せずにフォームを提出します。これはサファリの欠陥ですが、Modernizrでは存在しません。
ウェブサイトを展開する準備ができたら、実際に必要な要素のみを含むModernizrのカスタム製品バージョンを作成することをお勧めします。これにより、選択した機能に応じて、Modernizrライブラリのサイズが44kbから2kbに縮小できます。現在のオプションの範囲を図8に示します。
図8。modernizrダウンロードページでは、必要な機能のみを選択できますオプションは、CSS3、HTML5、MISC（Ellaneous）およびExtraの次のカテゴリに簡単にグループ化できます。最初の3つのタイトルの横にある[トグル]ボタンをクリックして、選択カテゴリのすべてのチェックボックスを選択または破棄します。
デフォルトでは、追加のカテゴリは次の3つのエントリを選択します。
CSS3カテゴリでオプションを選択すると、次の追加カテゴリのオプションも選択されます。
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()これらのオプションを選択しないでください。そうすることで、CSS3カテゴリで選択したオプションを自動的にキャンセルします。
MQ PolyFill（Respons.js）追加カテゴリのMQは、IE 6-8のメディアクエリが限られたサポートを得ることができるスクリプトを追加しました。このオプションを選択すると、メディアクエリとModernizr.TestStyles（）を自動的に選択します。メディアクエリPolyFill（Respons.js）の詳細については、https：//github.com/scottjehl/respondにアクセスしてください。
追加のカテゴリの他のオプションに関心があるはずです。それらが何であるか、どのように使用するかの詳細については、Modernizrドキュメントの拡張セクションを参照してください。
次の説明では、サンプルファイル用のModernizrのカスタム製品バージョンを作成する方法について説明します。このカスタムバージョンは、後続のエクササイズに必要であり、 Modernizr.load()を使用して外部JavaScriptファイルをロードする方法を示します。
Modernizrのカスタム制作バージョンを作成する場合、 Modernizr.load()を含むオプションはデフォルトで選択する必要があります。 Modernizr.load() 、 yepnope()のエイリアスです。これは、Modernizrと同期して開発されたスタンドアロンスクリプトローダーです。それを使用する方法を説明するために、簡単な例を挙げます。対応するスクリプトをexpect.htmlからCheck_Required.jsに移動し、Modernizrテストの削除を容易にし、 initと呼ばれる変数に割り当てるために3つの小さな変更を加えました。改訂されたスクリプトは次のようになります：
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Modernizr.load()の大きな利点は、ブラウザー機能のテスト結果に基づいて条件付きでスクリプトをロードできることです。これが、最初はyepnope()と呼ばれていた理由です。外部スクリプトを非同期にロードできます。つまり、ブラウザがドキュメントオブジェクトモデル（DOM）をロードした後に外部スクリプトをロードできます。これにより、ウェブサイトのパフォーマンスを改善するのに役立ちます。
Modernizr.load()の基本的な構文は、次の属性を伴うオブジェクトを渡すことです。
test ：検出したいModernizrプロパティ。 yep ：テストが成功した場合、ロードするスクリプトの場所。マルチスクリプトアレイを使用します。 nope ：テストが失敗した場合、ロードするスクリプトの場所。マルチスクリプトアレイを使用します。 complete ：外部スクリプトがロードされるとすぐに実行される関数（オプション）。あなたがそれらのいずれかを提供する限り、 yep nope両方がオプションです。
CHECK_REQUIRED.jsでスクリプトをロードして実行するには、Modernizr.adc.jsがページに添付された後、次の<script>ブロックを追加する必要があります（コードはreburce_load.htmlにあります）：
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>これは以前とまったく同じですが、 required属性を既にサポートするブラウザのダウンロード負荷を減らすことができます。
複数の条件をテストするには、オブジェクトのセットをModernizr.load()に渡すことができます。詳細については、ModernizrのドキュメントのModernizr.Load（）チュートリアルを参照してください。
Modernizrは強力で便利なツールですが、それはあなたがそれを使用する必要があるという意味ではありません。 Modernizrを使用してブラウザに複数のスタイルを提供する必要があるわけではありません。主な焦点がインターネットエクスプローラーの場合は、IE条件付きコメントの使用を検討してください。 CSSスタックを使用して、いくつかのスタイルを上書きすることもできます。たとえば、最初に16進数色を使用してから、 rgba()またはhsla()でオーバーライドします。ブラウザの古いバージョンは、最初の値を使用し、2番目の値を無視します。
Modernizrは、ポリフィルや他のJavaScriptと組み合わせると、実際に現実になります。ただし、通常、サポート機能をサポートするのに適した独自のテストを作成するのは簡単です。たとえば、以下は、ブラウザがrequired属性をサポートするかどうかをテストするすべてのコードです（コードは必須_NOMODERNIZR.HTMLにあります）：
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }このチュートリアルでは、Modernizrの主な機能をすべて取り上げています。これらの機能の詳細については、http：//www.modernizr.com/docs/にある対応する公式文書を参照してください。さらに、次の有用なリソースを見つけることができます。
yepnope()に関する詳細な議論を提供します。これは、ModernizrのModernizr.load()に統合されています。 +