HTML5とCSS3の急速な開発により、Webアプリケーション開発にはますます多くのセマンティックタグとクールな機能が適用されています。主要なブラウザメーカーがこれらの新機能をサポートし始めており、Web開発者はまた、よりカラフルで興味深いアプリケーションを開発するためにこれらの新しい機能を試すことに興味があります。ただし、これらの新機能（特に頭痛を誘発するIE）の不均一なサポートによって引き起こされるバージョンの互換性の問題は、開発者の心に残る悪夢です。従来の使用習慣により、古いバージョンのブラウザーを放棄することが難しくなり、開発者は退屈な手動テスト、テスト、テストのみを選択できます。
この問題を解決するために、Modernizrは存在しました。その名前は近代化のように聞こえます。実際、名前は開発エクスペリエンスをより近代化する目的から生まれましたが、古いブラウザを近代化する試みではありません。つまり、これらの新機能をサポートします（ただし、ブラウザは、シム/ポリフィルスクリプトを追加することでサポートされていない特定の新機能をサポートできません。
Modernizrは、HTML5およびCSS3機能のブラウザのサポートを検出するオープンソースJSライブラリです。有名なHTML5/CSS3ブラウザ互換性WebサイトFindMebyIPは、このフレームワークに基づいています。これを使用して、ブラウザがいくつかの新しい機能をサポートしているかどうかを検出し、さまざまな状況に応じて異なるJSファイルを動的にロードするために、ダウンロードを減らしてパフォーマンスを向上させるために、ニーズを満たすためにスクリプトを追加しても検出できます。
Modernizrは、開発と生産の2つのバージョンを提供します。開発バージョンには、学習とテストに適したすべての新しいHTML5およびCSS3機能の検出が含まれます。 Modernizrを使用し始めたばかりの初心者向けに、Bellaはこのバージョンを使用することをお勧めします。 Modernizrの実用的な原則に精通したら、Conductionのカスタムバージョンを使用できます。ダウンロード数を大幅に削減するために検出する必要のある機能のみをダウンロードできます。これにより、プログラムのパフォーマンスがある程度改善される可能性があります。これらの2つのバージョンをhttp://modernizr.com/download/でダウンロードすることができます。ページの開発バージョンリンクをクリックして開発バージョンをダウンロードするか、次の機能ディスプレイページが表示されました
テストするHTML5またはCSS3機能を確認できますが、デフォルトでは、追加のカテゴリは次のように選択されます。
a）HTML5 SHIV V3.6：スクリプトを追加します-HTML5シムIE6-8にHTML5要素を正しく設計および印刷するように強制します。 <header>、<footer>、<nav>、<section>、<ports>などの新しいHTML5セマンティックタグを使用する予定がある場合は、このオプションを選択する必要があります。
b）Modernizr.load（yepnope.js）：開発バージョンに含まれていないオプションのスクリプトローダーを追加します。 3kbのダウンロードが増加するため、必要でない場合は、選択をあきらめることができます。
c）CSSクラスの追加：Modernizrクラスを開始タグに追加します。 CSS3機能のサポートを検出する場合は、このオプションを選択する必要があります。
Modernizrを使用する方法は非常に簡単です。開発バージョンをダウンロードした後、次のようなページにJSライブラリファイルを導入する必要があります。
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Modernizrリファレンスを追加した後、JSプログラムが実行されると、CSSクラス名のバッチがHTML要素に追加されます。これらのクラス名は、現在のブラウザでサポートされていない機能をサポートし、機能をマークします。サポートする場合、対応する機能名が表示されます。サポートしていない場合は、非食器名が表示されます。たとえば、検出されたブラウザがCSS3プロパティボックスシャドウをサポートしている場合、ModernizrはBoxshadowクラスをタグに追加します。以下の図は、Chrome 23.0.1271.64の新しいHTML5およびCSS3機能のサポートを示しています。
次に、CSSスタイルシートに対応するスタイル情報を定義するだけで、以下のように定義できます。
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px solid black ; |
8 | } |
ブラウザはサポートされていないCSS3機能を無視しているため、現在のブラウザバージョンがBoxshadowプロパティをサポートしていない場合、Boxshadowクラスを無視し、No-Boxshadowクラスで定義されているスタイルを参照して、JSプログラムのブラウザー名を検出するトラブルロジックを節約します。
もちろん、アプリケーションのシナリオでは、プログラムで新機能がサポートされているかどうかを判断し、さまざまな処理ロジックを提供する必要がある場合、Modernizrを使用して判断を簡単に行うこともできます。現時点では、Modernizrが作成したModernizrという名前のグローバルオブジェクトを使用する必要があります。コンテンツは、検出された各機能に与えられたブール結果のリストです。ブラウザがBoxShadowプロパティをサポートしている場合、Modernizr.boxshadowの価値は真です。そうでなければ、誤りです。したがって、ライブラリファイルを導入した後、この方法を使用して、この機能に対するブラウザのサポートを検出することもできます。このJSオブジェクトには、特定の機能の詳細情報も含まれています。たとえば、Modernizr.video.h264は、ブラウザがこの特別なコーデックをサポートしているかどうかを示し、Modernizr.inputTypes.Searchは、現在のブラウザが新しい検索入力タイプをサポートするかどうかを示します。
さらに、Modernizrに検出する必要がある機能が含まれていない場合、Modernizrカプセル化されたAddTest関数をテストするために呼び出すことができます。さまざまなHTML5とCSS3の機能については、既に書かれたaddtest関数の多くをGitHubで見つけることができます（何らかの理由で、Modernizrはブロックされ、プロジェクトはGitHubでホストされています）。簡単な例を見てみましょう。ブラウザがGetUsermedia API（新しいWeBRTCテクノロジーのAPI）をサポートしているかどうかをテストする場合は、次のAddTest関数を記述してテストできます。
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
簡単な紹介の後、あなたはすでにModernizrが開発にもたらすことができる利便性を経験していると信じています。 Modernizrの機能とModernizrの使用方法を理解した後、ソースコードを見て、その実装原則に精通することで、多くの新しい知識を学ぶことができます。この点ではベラは新人ですが、ソースコードを読む際にまだいくつかの経験を共有しています。
ベラは以前にグローバルオブジェクトModernizrに言及しました。 Modernizrでどのように作成されていますか？次のソースコードを見てみましょう。
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | Modernizr; return 。 |
6 | })( this , this .document); |
コードのこの部分は非同期関数を使用して名前空間を生成し（JSには実際の名前空間はありませんが）、関数はwindow.mordernizrに割り当てられたModernizrオブジェクトを返し、他のJSプログラムがwindow.modernizrまたはModernizrオブジェクトを直接使用できます。関数が呼ばれるときに渡されるパラメーターは、関数実行のコンテキスト環境、つまりウィンドウのグローバルオブジェクトを指します。
Modernizrは、CSS3の新機能のサポートレベルをどのようにテストしますか？ Modernizrは最初にDOMオブジェクトを作成し、次にこのオブジェクトの下のスタイル属性を使用して、新しいCSS3機能をサポートするかどうかをテストすることがわかります。コードは次のとおりです。
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
ブラウザの場合、新しく作成されたHTMLタグを認識できるかどうかにかかわらず、スタイルを整えることができるため、ここで新しく作成したタグをスタイリングできます。ブラウザがHSLAをサポートしてCSSの色を定義するかどうかをテストしたいとします。まず、HSLA属性を適用してラベルの下に置いてスタイルを作成し、スタイル値にHSLA文字列が含まれているかどうかを確認できます。ブラウザがそれをサポートしていない場合、HSLA文字列はありません（Modernizrタグに適用されるHSLA属性でスタイルを配置するアクションはまったく有効になりません）。次のコードを書くことができます。
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
ここでは、一部のブラウザはHSLAの表記をRGBAに変換するため、RGBA文字列があるかどうかも確認します。
ベンダープレフィックスを使用したCSS属性の場合、さまざまな治療を行う必要があります。 Boxshadowプロパティに戻ると、Modernizrは、上記のMSTyle変数の下にあるBoxshadow、WebKitboxShadow、MozboxShadow、OboxShadow、MSBoxShadow、またはKHTMLBOXSHADOWプロパティがあるかどうかをテストします。もしそうなら、それはブラウザがこのプロパティをサポートすることを意味します。ここでは、主に2つのModernizrカプセル化された関数を使用します。1つはtestProp（）で、もう1つはtestallprops（）です。 Modernizr.TestProp（STR）は、特定のスタイルのプロパティを認識できるかどうかを返し、Modernizr.TestallProps（STR）は、特定のスタイルのプロパティを認識できるかどうか、またはベンダープレフィックスを持つスタイルプロパティを認識できるかどうかを返します。
より多くのソースコードの知識については、Bellaが将来より詳細な研究を行った後、私はあなたにそれを紹介します。ベラは、Modernizrの原則と使用に精通している場合、開発効率を改善するのに間違いなく役立つと考えています。
最後に、ベラは、誰もがModernizrから学ぶためにいくつかの資料を簡単に要約しています。
1。MORINEIZR公式ウェブサイト：http：//modernizr.com/docs/ Modernizrの知識、ソースコード、およびModernizrをダウンロードすることができます。
2。MORINEIZRテストスイートURL：http：//modernizr.github.com/modernizr/test/index.html上記の各ブラウザのHTML5およびCSS3機能のサポートステータスをクエリすることができます。クエリ方法：
このページの下部にあるCaniuseとModernizrのREFテストをクリックし、テストされたHTML5またはCSS3機能のテーブルリンクのいずれかをクリックして、各ブラウザのサポートを確認します。
3。Shim/PolyFillスクリプト関連情報：https：//github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4.新しいHTML5およびCSS3機能を検出するさまざまなAddTest関数のアドレスをダウンロードしてください。
https://github.com/modernizr/modernizr/tree/master/feature-detects
この記事は、Tencent Wuhanブログからのものです。転載時にソースを示してください