jsライブラリModernizr_Othersの導入と使い方

現時点では従来のブラウザが完全に置き換えられるわけではないため、最新の CSS3 または HTML5 機能を Web サイトに埋め込むことが困難になります。 Modernizr は、オープン ソースの JavaScript ライブラリとして、ブラウザによる CSS3 または HTML5 関数のサポートを検出するために登場しました。 Modernizr では、古いブラウザーがサポートしていない機能を追加するのではなく、オプションのスタイル構成を作成してページ デザインを変更できます。 また、カスタマイズされたスクリプトをロードして、古いブラウザがサポートしていない機能をシミュレートすることもできます。

Modernizr とは何ですか?

Modernizr は、訪問者のブラウザーの違い (新しい標準のサポートの違いを指します) に基づいてさまざまなレベルのエクスペリエンスを開発するデザイナーの作業を容易にするオープンソースの JS ライブラリです。これにより、デザイナーは と CSS3 をサポートするブラウザーで HTML5 と CSS3 の機能を最大限に活用できるようになり、また、サポートしていない他のブラウザーのコントロールでも使用できるようになります。これらの新しいテクノロジーは犠牲になりません。

Web ページに Modernizr スクリプトを埋め込むと、現在のブラウザが @font-face、border-radius、border-image、box-shadow、rgba() などの CSS3 機能をサポートしているかどうかが検出されます。同時に、オーディオ、ビデオ、ローカル ストレージ、新しい タグのタイプや属性など、

HTML5 機能をサポートしているかどうかもチェックされます。この情報を取得したことに基づいて、これらの機能をサポートするブラウザでその情報を使用して、JS ベースのフォールバックを作成するか、サポートしていないブラウザに対してグレースフル ダウングレードを実行するかを決定できます。さらに、Modernizr では、IE が HTML5 要素への CSS スタイルの適用をサポートできるようにすることもできるため、開発者はこれらのよりセマンティックなタグをすぐに使用できるようになります。

Modernizr はシンプルで使いやすいですが、全能ではありません。 Modernizr をうまく使用できるかどうかは、CSS と JavaScript のスキルに大きく依存します。 HTML 5 と CSS 3 を使用する際の主な問題は、人気やブラウザ間の違いではなく、そもそもそれらの違いが何なのかを理解することです。一度それを理解すると、開発者はグレースフル デグラデーション手法を使用してこれらの制限を回避できます。このため、多くの開発者はオープンソース プロジェクト Modernizr に注目しています。

Modernizr

ユーザー エージェント文字列を検出する代わりに、一連のテストを使用してブラウザーの特性を判断します。数ミリ秒で 40 を超えるテストを実行し、その結果を Modernizr と呼ばれるオブジェクトのプロパティとして記録できます。開発者はこの情報を使用して、使用する予定の機能がブラウザーでサポートされているかどうかを検出し、それに応じて処理できます。

Modernizr

バージョン 2.0 では、JavaScript と CSS 用の条件付きリソース ローダーが追加されています。リソース ローダーは 3 つのパラメーターを受け入れます。その最初のパラメーターは、必要な機能を列挙する式です。 2 番目のパラメーターは、式が true を返した場合にロードする JavaScript および CSS ファイルのリストです。 3 番目のパラメータは、必要な機能が存在しない場合にフォールバックするファイルのリストです。 正常な劣化に加えて、ローダーを使用して

ポリフィル

を導入することもできます。 Pollyfill をまだよく知らない人に説明させてください。Pollyfill は「古いブラウザの標準 API をエミュレートする JavaScript シム」です。このアプローチは常に推奨されるわけではありませんが、pollyfill を使用して、ほとんどの HTML 5 機能 (Modernizr によって検出される) のサポートを追加できます。ここでは、ブラウザ機能の穴を埋めるためにポリフィルが使用されています。 場合によっては、Modernizr がこのタスクをシームレスに実行します。 しかし、本質的には、これは単なるパッチ適用作業であるため、脆弱性のないブラウザで達成されるのとまったく同じ結果を生成することに依存することはできません。

パフォーマンスを向上させるために、開発者は、Web サイトに必要なテストを実行するように Modernizr をカスタマイズできます。これは、Modernizr ダウンロード ページ から行うことができます。このページには、検出できる機能のリストも表示されます。 github Web サイトには、検出できない機能と考えられる解決策 も記載されています。

Modernizr はプログレッシブ・エンハンスメントの理論に基づいて開発されているため、開発者が Web サイトをレイヤーごとに作成することをサポートおよび奨励します。すべては Javascript が適用された空のベースから始まり、強化されたアプリケーション層が次々に追加されます。 Modernizr を使用しているため、ブラウザが何をサポートしているかを簡単に知ることができます。

Modernizr の原則

Modernizr は、JavaScript を使用してブラウザーでサポートされている機能を検出します。ただし、JavaScript を使用してさまざまなスタイルシートを動的にロードする代わりに、ページの タグにクラスを追加するという非常に単純な手法を使用します。 CSS カスケードを使用してターゲット要素に適切なスタイルを提供するかどうかは、デザイナーの責任です。

たとえば、ページが box-shadow プロパティをサポートしている場合、Modernizr は boxshadow クラスを追加します。サポートされていない場合は、代わりに no-boxshadow クラスを使用して追加されます。

ブラウザは認識できない CSS プロパティを無視するため、基本的なスタイル設定ルールに従って box-shadow プロパティを安全に使用できますが、古いブラウザのセレクターの場合は、以下の形式で別の 子孫を追加する必要があります。 ：

.no-boxshadow img { /* box-shadow をサポートしていないブラウザ用のスタイル */ }

box-shadow をサポートしないブラウザのみが no-boxshadow クラスを持つため、他のブラウザはこのスタイル ルールを適用しません。

次の表は、CSS3 のサポートを示すために Modernizr で使用されるクラス名のリストです。 機能がサポートされていない場合、対応するクラスの名前には接頭辞 no- が付きます。

CSS 関数	Modernizr クラス (プロパティ)
@font-face	フォントフェイス
::before および ::after 擬似要素	生成されたコンテンツ
背景サイズ	背景サイズ
ボーダー画像	境界画像
境界半径	境界半径
ボックスシャドウ	ボックスシャドウ
CSS アニメーション	CSアニメーション
CSS 2D 変換	csstransforms
CSS 3D 変換	csstransforms3d
CSS トランジション	csstransitions
柔軟なボックスレイアウト	フレックスボックス
グラデーション	cssgradients
hsla()	hsla
複数列レイアウト	csscolumns
複数の背景	複数のBG
不透明度	不透明度
反省	cssreflections
rgba()	rgba
テキストシャドウ	テキストシャドウ

特定の CSS プロパティがどこでテストされるかに関係なく、クラス名とプロパティ名は同じになります。ただし、これにはハイフンや括弧を削除する必要があります。 他のクラスは、参照する CSS3 モジュールにちなんで名前が付けられます。

Modernizr の使用法

1. ダウンロード

まず、www.modernizr.com から Modernizr の最新の安定バージョンをダウンロードします。ページの 領域に追加します:

2.

要素に「no-js」クラスを追加します。

Modernizr が実行中であると、「no-js」クラスが「js」に変更され、実行中であることが通知されます。 Modernizr はこれを行うだけでなく、検出したすべての機能にクラスを追加します。ブラウザーが機能をサポートしていない場合は、その機能に対応するクラス名に「no-」を追加します。
no-js クラスを html 要素に追加すると、JavaScript をサポートしているかどうかがブラウザーに通知され、JavaScript をサポートしていない場合は no-js
が表示されます。 この時点で、Dreamweaver のライブ コードを使用すると、以下に示すように、Modernizr がブラウザーの機能を示す多数のクラスを追加していることがわかります

図に示すように、no-js クラスが js クラスに置き換えられています。これは、JavaScript が有効になっていることを示しています。

お使いの Dreamweaver のバージョンにライブ コードがない場合 (または別の HTML エディタを使用している場合)、最新のブラウザが提供する開発ツール、または Firefox ブラウザが提供する Firebug を使用して、生成されたコードを検査できます。

3. 使用例 1 - シャドウ シャドウをサポートするブラウザではシャドウを表示し、サポートしないブラウザでは標準の境界線を表示します

コードをコピーします コードは次のとおりです:

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;
} .no-boxshadow #MyContainer { border: 2px ソリッドブラック;
}

ブラウザが box-shadows をサポートしている場合、Modernizr は boxshadow クラスを 要素に追加し、それを対応する div の ID で管理できるためです。サポートされていない場合、Modernizr は標準の境界線が表示されるように no-boxshadow クラスを 要素に追加します。このようにして、CSS3 機能をサポートするブラウザーでは新しい CSS3 機能を簡単に使用でき、CSS3 機能をサポートしていないブラウザーでは以前の方法を引き続き使用できます。

4. 使用例 2 - ローカル ストレージのテスト

Modernizr は、対応するクラスを 要素に追加するだけでなく、グローバル Modernizr JavaScript オブジェクトも提供します。これは、特定の新機能が現在のブラウザーでサポートされているかどうかを示すさまざまな属性を提供します。たとえば、次のコードを使用して、ブラウザがキャンバスとローカル ストレージをサポートしているかどうかを判断できます。複数の開発者が複数のバージョンのブラウザで開発およびテストすることは非常に有益です。

<script> window.onload = function () { if (localStorageSupported()) {
   alert('local storage supported');
 }
};

　　function localStorageSupported() {
 　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
 　　}catch(e) {}
 　　 return false;
} </script> 

誰もがコードを統一できます

 $(document).ready(function () { 
 if (Modernizr.canvas) { //Add canvas code } 
 if (Modernizr.localstorage) { 
 //script to run if local storage is 
 } else { 
 // script to run if local storage is not supported
  
 }
});

グローバル Modernizr オブジェクトは、CSS3 機能がサポートされているかどうかを検出するために使用することもできます。次のコードは、境界半径と CSS 変換がサポートされているかどうかをテストするために使用されます。

$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
}); 

オーディオとビデオの場合、戻り値は、ブラウザーが特定のタイプを処理できる信頼レベルを示す文字列です。 HTML5 仕様によれば、空の文字列はその型がサポートされていないことを示します。 タイプがサポートされている場合、戻り値は「maybe」または「probbly」です。 例:

if (Modernizr.video.h264 == "") { 
// h264 is not supported
}

4. 使用例 3 - Modernizr を使用して HTML5 必須フォーム フィールドを検証する

HTML5 では、ページの最初の読み込み時に指定されたフィールドにカーソルを自動的に配置するオートフォーカスなど、多くの新しいフォーム属性が追加されています。 もう 1 つの便利な属性が必要です。これにより、必須フィールドが空白のままの場合、HTML5 準拠のブラウザがフォームを送信できなくなります。

図 1. スクリプトは、新しい属性をサポートしていないブラウザーの必須フィールドを検出します

図 2. スクリプトは、新しい属性をサポートしていないブラウザーの必須フィールドを検出します

フォームを送信する前に、HTML5 互換ブラウザは必須フィールドが入力されているかどうかを確認します

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) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　 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; 
　　　　} 
　　};
　} 
}

このコードは、フォームが送信されるときに、必須の属性を持つフィールドを見つけるためにすべての入力要素を反復処理する関数を生成します。 フィールドが見つかると、値から先頭と末尾の空白が削除され、結果が空の文字列の場合は、その結果を必要な配列に追加します。 すべてのフィールドがチェックされた後、配列に特定の要素が含まれている場合、ブラウザーはフィールド名が欠落していることを示す警告を表示し、フォームは送信されません。

カスタム バージョンの作成

Web サイトを展開する準備ができたら、実際に必要な要素のみを含む Modernizr のカスタム製品バージョンを作成することをお勧めします。 これにより、選択した機能に基づいて、Modernizr ライブラリのサイズが 44 KB から 2 KB に削減されます。現在のオプションの範囲を図に示します。

例:

1. http://www.modernizr.com/download/ をクリックすると、上記のインターフェイスが開きます。
2. CSS3 カテゴリで、box-shadow と CSS 列 を選択します。
3. HTML5 カテゴリで、入力属性を選択します。
4. 「追加」カテゴリで、HTML5 Shim/IEPP の選択を解除します。
5. [追加] カテゴリで次のオプションが選択されていることを確認してください (これらは自動的に選択されるはずです)。
   • Modernizr.load(yepnope.js)
   • CSS クラスを追加
   • Modernizr.testProp()
   • Modernizr.testAllProps()
   • Modernizr._domPrefixes

6. 「生成」ボタンをクリックします。
7. カスタム スクリプトの準備が完了すると (通常は 1 ～ 2 秒以内)、[生成] ボタンの隣に [ダウンロード] ボタンが表示されます。 [ダウンロード] ボタンをクリックし、サンプル Web サイトの js フォルダーにファイルを保存します。 ダウンロード ページでは、実稼働スクリプトに modernizr.custom.79475.js などのファイル名が付けられますが、より意味のある名前を付けることもできます。 サンプル ファイルでは、modernizr.adc.js という名前を使用しました。
8. css_support.html および required.html 内の modernizr.js へのリンクを、カスタム実稼働スクリプトへのリンクに置き換えます。 実稼働スクリプトはわずか 5 KB であり、開発バージョンの 44 KB ではないことに注意してください。
9. css_support.html の [ライブ コード] をクリックします (またはブラウザで開発ツールを使用します)。 現在、以下に示すように、開始タグ には 3 つのクラスしかありません。

参考:

• http://www.mhtml5.com/2011/03/676.html
• http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
• http://zh.wikipedia.org/wiki/Modernizr
• http://modernizr.com/docs/