HTML5、CSS3、およびCanvasやWebソケットなどの関連テクノロジーは、Webプログラムが新しいレベルを改善するのに役立つ非常に便利な機能をもたらしました。これらの新しいテクノロジーにより、HTML、CSS、JavaScriptのみを使用して、タブレットやモバイルデバイスで実行できる多様なフォームページを構築できます。 HTML5は多くの新機能を提供しますが、ブラウザの古いバージョンを考慮しない場合、これらの新しいテクノロジーを使用することは現実的ではありません。ブラウザの古いバージョンは長年使用されてきましたが、これらのバージョンの互換性の問題を検討する必要があります。この記事で解決すべき問題は、HTML5/CSS3テクノロジーを使用する場合、HTML5/CSS3機能をサポートしていない古いブラウザの問題をより適切に処理する方法です。
ブラウザが特定のHTML5/CSS3機能をサポートしているかどうかを判断するためにコードを記述できますが、コードはそれほど簡単ではありません。例：ブラウザの支払いがキャンバンをサポートすることを決定するためのコードを作成すると、私たちのコードは以下に似ている可能性があります。
<script> window.onload = function（）{if（canvassupported（））{alert（ 'canvas supported'）; }}; function canvassupported（）{var canvas = document.createelement（ 'canvas'）; return（canvas.getContext && canvas.getContext（ '2d'））; } </script>ローカルストレージがサポートされているかどうかを判断する場合、コードは以下のストレージと似ている可能性がありますが、Firefoxの下でバグを引き起こすのは簡単です。
<script> window.onload = function（）{if（localStoragesupported（））{alert（ 'localストレージサポート'）; }}; function localStoragesupported（）{try {return（ 'localstorage' in windole && window ['localStorage']！= null）; } catch（e）{} falseを返します。 } </script>最初の2つの例は、すべて機能をチェックすることです。 HTML5/CSS3の機能がたくさんある場合、判断するために複数のコードを記述する必要がありますが、幸運なことに、これらのコードは順序に依存しません。 Modernizrを使用すると、コードがほとんどない上記の複雑な関数を実装できます。 Modernizrのいくつかの重要な機能を見てみましょう。
Modernizrを始めましょうModernizrを初めて聞いたとき、私はそれが近代化されていることを意味し、古いブラウザーに新しいHTML5/CSS3機能を追加できると思っていました。実際、Modernizrはこれを行っていません。非常にファンキーな方法を使用して、ブラウザがいくつかの新しい機能をサポートしているかどうかを検出し、追加のスクリプトを読み込むこともできるかどうかを検出するのに役立ちます。あなたがウェブ開発者なら、それはあなたにとって非常に素晴らしい武器です。
Modernizrの公式サイト：http：//modernizr.com、両方の2種類のスクリプト（開発バージョンとカスタム制作バージョン）の両方を使用できます。ウェブサイトは、すべてを検出できる大規模で完全なバージョンではなく、必要な検出機能のみを生成するためのカスタムデマンドツールを提供します。つまり、スクリプトを最小限に抑えることができます。次の図は、公式のウェブサイト生成ツールのインターフェースです。多くのHTML5/CSS3および関連技術を選択できることがわかります。
カスタムスクリプトをダウンロードした後、通常のJSファイルのように参照してから使用できます。
<スクリプトsrc = scripts/modernizr.js type = text/javascript> </scrip>ModernizrおよびHTML要素
Modernizrリファレンスを追加した後、すぐに有効になります。実行中、CSSクラス名のバッチがHTML要素に追加されます。これらのクラス名は、現在のブラウザでサポートされていない機能をサポートし、機能をマークします。サポートされている機能は、クラスとしての日の機能の名前を直接表示します（たとえば、Canvas、WebSockets）。サポートされていない機能によって表示されるクラスは、ノープロパティ名です（たとえば：No-FlexBox）。次のコードは、Chromeでの実行の効果です。
<HTML class = JS Flexbox Canvas Canvastext WebGL NO-Touch Geolocation Postmessage websqldatabase indexeddb Hashchange history DragandDrop WebSockets RGBA HSLA BASCURITHSIZE BOSDAIMAGE BOSDAIS BOXSHADOW TEXTSHADOW TEXTSHADOW TEXTSHADOW TEXTSHADOW OPACITY CSSSANIMATIONS CSSCOLUMNS CSSGRATIONS CSSRECTROFIENTS CSSRECT csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths>
次のコードは、IE9で実行される効果です。
<html class = js no-flexboxキャンバスキャンバスキャンバスキャンバスキャンバステキストno-webgl no-touch Geolocation postmessage no-websqldatabase no-indexeddbhashchange no-history dorganddrop no-websockets rgba hsla hsla borderimius no-cobladow no-chandow no-chandow no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface fontface genumated content audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svg clippaths>
Modernizrを使用すると、次のコードが発生する可能性があります（クラスにNO-JS名を追加）：
<html class = no-js>
（http://html5boilerplate.com）サイトにアクセスして、html5ボイラープレート関連コンテンツ、または（http://initializr.com）を表示して初期化に関連するコンテンツを表示し、html要素にノーJSクラスを追加します。サポートされていない場合、NO-JSが表示されます。サポートされている場合、NO-JSは削除されます。とてもクールですよね？
HTML5/CSS3機能で使用します<html>要素のModernizrによって生成されたクラス名を直接使用して、CSSファイルの対応する属性を定義して現在のブラウザをサポートできます。たとえば、次のコードは、Shadow ShadowをサポートするブラウザにShadowsを表示し、サポートしていないブラウザーに標準の境界線を表示できます。
.boxshadow #mycontainer {border：none; -webkit-box-shadow：＃666 1px 1px 1px; -moz-box-shadow：＃666 1px 1px 1px;} .no-boxshadow #mycontainer {border：2px solid black;}ブラウザがBox-Shadowsをサポートしている場合、Modernizrは<HTML>要素にBoxShadowクラスを追加し、対応するDiv IDに管理できるためです。サポートされていない場合、Modernizrは標準の境界を示す<html>要素にno-boxshadowクラスを追加します。このようにして、CSS3機能をサポートするブラウザで新しいCSS3機能を簡単に使用し、それらをサポートしていないブラウザで以前の方法を引き続き使用できます。
対応するクラスを<html>要素に追加することに加えて、ModernizrはグローバルなModernizr JavaScriptオブジェクトも提供します。これは、現在のブラウザで新しい機能がサポートされているかどうかを示す異なるプロパティを提供します。たとえば、次のコードを使用して、ブラウザがキャンバスとローカルストレージをサポートするかどうかを判断できます。複数の開発者がマルチバージョンブラウザーの下で開発およびテストすることは非常に有益であり、誰もがコードを統合することができます。
$（document）.ready（function（）{if（modernizr.canvas）{// Canvas Codeを追加} if（Modernizr.LocalStorage）{//ローカルストレージコードを追加}}）;グローバルModernizrオブジェクトを使用して、CSS3機能がサポートされているかどうかを検出することもできます。次のコードを使用して、国境とCSSの変換がサポートされているかどうかをテストします。
$（document）.ready（function（）{if（modernizr.borderradius）{$（ '＃mydiv'）。addclass（ 'borderradiusstyle'）;} if（modernizr.csstransforms）{$（ '＃mydiv'）。他の一部のCSS3機能は、不透明度、RGBA、テキストシャドウ、CSSアニメーション、CSSトランジション、複数の背景などの結果を検出できます。モダニズがサポートする完全なHTML5/CSS3検出可能なリストは、http：//www.modernizr.com/docsで見つけることができます。
Modernizrを使用したスクリプトを読み込みます新機能をサポートしていない一部のブラウザでは、Modernizrは上記の方法を提供するだけでなく、サポートを達成するためにシム/ポリフィルスクリプトをロードできるロード関数を提供します（https：//github.com/modernizr/modernizr/wiki/html5-cross-browser-poluser-polowser Modernizrは、関数を決定するスクリプトローダーを提供し、サポートされていない場合、対応するスクリプトがロードされます。別のスクリプトは、http：//yepnopejs.comにもあります。
ModernizrのLoad（）関数を使用して、スクリプトを動的にロードできます。関数のテスト属性は、それがサポートされているかどうかを示します。テストが正常にサポートされている場合、YEP属性によって設定されたスクリプトがロードされます。サポートされていない場合、NOPE属性によって設定されたスクリプトがロードされます。それがサポートされているかどうかに関係なく、両方の属性によって設定されたスクリプトはロードされます。例コードは次のとおりです。
Modernizr.load（{test：Modernizr.canvas、yep： 'html5canvasavailable.js'、nope： 'excanvas.js'、両方： 'mycustomscript.js'}）;この例では、Modernizrが現在のブラウザがCanvas機能をサポートするかどうかを判断します。サポートされている場合、2つのスクリプトhtml5canvasavailable.jsとmycustomscript.jsをロードします。サポートされていない場合は、excanvas.js（IE9の前にバージョンに使用）スクリプトファイルをロードして、ブラウザがCanvas機能をサポートし、myCustomscript.jsスクリプトをロードします。
Modernizrはスクリプトを読み込むことができるため、他の用途も使用できます。たとえば、参照するサードパーティのスクリプト（CDNサービスを提供するGoogleやMicrosoftなどがJQUERYホスティングを提供するなど）がロードに失敗した場合、代替ファイルをロードできます。次のコードは、Modernizrが提供するjQueryをロードする例です。
Modernizr.load（[{load： '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js'、complete：function（）{if（！window.jquery）{modernizr.load（ 'js/libs/jquery-1.6.4.4.min.js'）;}ロードへのフォールバックと//必要な場合： 'need-jquery.js}]）;このコードは、最初にGoogle CDNからjQueryファイルをロードします。ダウンロードまたは読み込みが失敗した場合、完全な関数が実行されます。まず、JQeuryオブジェクトが存在するかどうかを判断します。存在しない場合、Modernizrは定義されたネイティブJSファイルをロードします。完全なファイルでさえ正常にロードされない場合、Needs-jquery.jsファイルがロードされます。
要約：最新のHTML5/CSS3を使用してプログラムを構築する場合、Modernizrは間違いなく必要なツールです。それを使用して、多くのコードとテスト作業を保存することができます。また、新しい機能をサポートしていない一部のブラウザの追加のロードスクリプトの形で対応する新機能を実装することもできます。
元のアドレス：http：//weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx