Modernizrの使い方
3694 ワード
なぜModernizrが必要なのか
ブラウザの発展はバラバラで、最新版Firefox、Google Chrome、Safariでは、サポートされているHTML 5、CSS 3の特性も異なるのではないかと思いますが、ユーザーの場合もあり、ユーザーによって異なるブラウザの異なるバージョンを使用するため、Web開発者がウェブサイトを開く際に、膨大な数のブラウザの種類に直面することになります.
開発時に最低基準、例えばIE 6がサポートしていない特性であれば、私たちはすべて使用しません.Modernizrは何もありません.しかし、このような状況は極めて少なく、より多くの開発は、現代のブラウザでサポートされている特性を使用し、初期のブラウザで一定のダウングレード処理を行うことであり、これがいわゆる「Progressive Enhancement」であり、Modernizrが果たす主な役割でもあると思います.
Modernizrの役割
リファレンスのダウンロード
まず、Modernizrファイルをダウンロードし、ページ
このコードの位置に注意してください. HTML 5 Shivは を識別することができる. FOUC 防止
どちらも気にしない場合は、modernizrを追加する場所を探してください.
no-jsの追加
さらに、
Modernizrが正常に動作している場合、
HTML 5 Boilerplateでは、
ページはModernizrをロードしました.jsを実行すると、ブラウザのプロパティがサポートする真偽値を含むJavaScriptオブジェクトModernizrが自動的に生成されます.また、
これは私のブラウザがHTML 5のgeolocation、history、CSS 3のマルチバックグラウンド画像などの特性をサポートしていることを示しており、一目瞭然です.
これにより、CSS 3を使用すると、次のような降格が可能になります.
初期のブラウザでは、1枚の背景画像を使用していましたが、マルチ背景画像をサポートするブラウザでは、2枚の背景画像を使用していました.
しかし、これはModernizrの簡単なアプリケーションにすぎません.HTML 5の特性など、複雑なアプリケーションもあります.
基本的にすべてのHTML 5の特性は対応するPolyfillsで処理されていますが、必要かどうかは、プロジェクトの必要性によって異なります.時には、あなたが望んでいるわけではありません.結局,IE 6上でGeolocationのような特性をサポートすることはあまり意味がない.
また、ModernizrスクリプトにHTML 5ブラウザサポートスクリプトhtml 5 shivが追加されています.Moernizrを参照してください.jsファイル、IE 9以下のIEブラウザは、HTML 5に追加された意味ラベル、例えば
ブラウザの発展はバラバラで、最新版Firefox、Google Chrome、Safariでは、サポートされているHTML 5、CSS 3の特性も異なるのではないかと思いますが、ユーザーの場合もあり、ユーザーによって異なるブラウザの異なるバージョンを使用するため、Web開発者がウェブサイトを開く際に、膨大な数のブラウザの種類に直面することになります.
開発時に最低基準、例えばIE 6がサポートしていない特性であれば、私たちはすべて使用しません.Modernizrは何もありません.しかし、このような状況は極めて少なく、より多くの開発は、現代のブラウザでサポートされている特性を使用し、初期のブラウザで一定のダウングレード処理を行うことであり、これがいわゆる「Progressive Enhancement」であり、Modernizrが果たす主な役割でもあると思います.
Modernizrの役割
リファレンスのダウンロード
まず、Modernizrファイルをダウンロードし、ページ
<head></head>で参照します.<script src="js/modernizr.js"></script>
このコードの位置に注意してください.
<head></head>の部分、すべてのスタイルシートファイルlinkの後に配置されます.スタイルシートの後ろに配置されるのは、CSSのロードをブロックしないためです.<head></head>に置かれた理由は2つあります.<body>の前に実行する必要があり、このようにしてスタイルシートはHTML 5に追加するラベルどちらも気にしない場合は、modernizrを追加する場所を探してください.
no-jsの追加
さらに、
<html>ラベルにno-jsクラスを追加する必要があります.<html class="no-js">
Modernizrが正常に動作している場合、
no-jsが削除され、jsクラスが追加されます.ユーザーブラウザがJavaScriptを無効にしている場合、Modernizrは実行できません.htmlラベルはno-jsです.HTML 5 Boilerplateでは、
<html>のラベルは、no-jsを1つ追加するよりも複雑です.<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
ページはModernizrをロードしました.jsを実行すると、ブラウザのプロパティがサポートする真偽値を含むJavaScriptオブジェクトModernizrが自動的に生成されます.また、
<html>ラベルに新しいクラス(class)が追加され、HTML 5、CSS 3のプロパティに対するブラウザのサポート状況が表示されます.私のFirefox 21 for Linuxを例にとると、HTML 5 Boilerplateページの<html>ラベルはModernizrが作用すると次のようになります.<html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
これは私のブラウザがHTML 5のgeolocation、history、CSS 3のマルチバックグラウンド画像などの特性をサポートしていることを示しており、一目瞭然です.
これにより、CSS 3を使用すると、次のような降格が可能になります.
body {
background: url(background-top.png) top left no-repeat;
}
.multiplebgs body {
background: url(background-top.png) top left no-repeat,
url(background-bottom.png) bottom left repeat-x;
}
初期のブラウザでは、1枚の背景画像を使用していましたが、マルチ背景画像をサポートするブラウザでは、2枚の背景画像を使用していました.
しかし、これはModernizrの簡単なアプリケーションにすぎません.HTML 5の特性など、複雑なアプリケーションもあります.
if (Modernizr.canvas) {
// canvas
} else {
// canvas ， ， polyfills
}
基本的にすべてのHTML 5の特性は対応するPolyfillsで処理されていますが、必要かどうかは、プロジェクトの必要性によって異なります.時には、あなたが望んでいるわけではありません.結局,IE 6上でGeolocationのような特性をサポートすることはあまり意味がない.
また、ModernizrスクリプトにHTML 5ブラウザサポートスクリプトhtml 5 shivが追加されています.Moernizrを参照してください.jsファイル、IE 9以下のIEブラウザは、HTML 5に追加された意味ラベル、例えば
nav、section、articleなどをサポートし、CSSを使用してそれらをスタイル化することもできる.