10年前、最も最先端のウェブサイトデザイナーのみが、Webページのレイアウトと装飾にCSSを使用していました。当時、CSSレイアウトに対するブラウザのサポートは不完全で抜け穴でいっぱいでした。そのため、これらの人々はWeb標準化を主張しましたが、ハックを使用してすべてのブラウザでページを正常に表示する必要がありました。使用されるハッキングテクノロジーの1つは、javaScriptのnavigator.useragent属性を使用して、ユーザーが使用しているブラウザーのブランドとバージョンを決定するブラウザスニッフィングです。ブラウザスニッフィングテクノロジーは、コードをすばやくブランチして、さまざまなブラウザに異なる手順を適用できます。
今日、CSSベースのレイアウトはすでに非常に一般的であり、ブラウザはそれを非常に堅実にサポートしています。しかし、今ではCSS3とHTML5がここにいます。歴史は好転し、元の場所に戻りました。さまざまなブラウザによるこれらの新しいテクノロジーのサポートが再び不均一になり始めました。私たちは長い間、きちんとした標準に準拠したコードを書くことに慣れており、CSSハッキングやブラウザを使用して信頼できない低レベルのテクノロジーを嗅ぎません。また、ますます多くのユーザーが、すべてのブラウザで同じように見える必要がないという考えにますます多くのユーザーが同意すると考えています。それで、この馴染みのある状況（異なるブラウザのサポート）に直面して、私たちは何をすべきでしょうか？シンプル：機能検出を使用します。つまり、ブラウザに誰に尋ねる必要はありませんか？信頼できない推測をする。代わりに、ブラウザにこれを行うことができるかどうか尋ねます。これは簡単に検出できますが、ブラウザを1つずつ手動でテストするのに時間を費やすのは退屈です。 Modernizrはこの時点で私たちを助けることができます。
Modernizr：HTML5およびCSS3用に特別に開発された機能検出ライブラリ
Modernizrは、ゲストブラウザーの違いに基づいてさまざまなレベルのエクスペリエンスを開発するデザイナーを簡単に開発できるオープンソースJSライブラリである（新しい標準のサポートの違いを参照）。これにより、デザイナーは、これらの新しいテクノロジーをサポートしていない他のブラウザの制御を犠牲にすることなく、HTML5およびCSS3をサポートするブラウザーの開発のためのHTML5およびCSS3機能を最大限に活用できます。
ModernizrのスクリプトをWebページに埋め込むと、現在のブラウザが @font-face、border-radius、border-image、box-shadow、rgba（）などのCSS3機能をサポートしているかどうかを検出し、HTML5機能がサポートされているかどうかを検出します - オーディオ、ビデオ、地元のストレージ、新しいタグタイプなど。この情報を取得することに基づいて、これらの機能をサポートするブラウザでそれらを使用して、JSベースのフォールバックを作成するか、単にそれらをサポートしていないものをダウングレードするかを決定できます。さらに、Modernizrは、IEがHTML5要素でのCSSスタイルのアプリケーションをサポートできるようにすることができるため、開発者はこれらのよりセマンティックタグをすぐに使用できます。
Modernizrは、プログレッシブエンハンスメントの理論に基づいて開発されているため、開発者がレイヤーごとにWebサイトレイヤーを作成することをサポートおよび奨励しています。すべては、JavaScriptが適用されたアイドルファンデーションから始まり、強化されたアプリケーション層を1つずつ追加します。 Modernizrが使用されているため、ブラウザがサポートするものを簡単に知ることができます。 Modernizrを適用して、最先端のWebサイトを作成する例を見てみましょう。
Modernizrの適用から始めます
まず、www.modernizr.comからModernizrの最新の安定したバージョンをダウンロードします（Modernizrの公式Webサイトは現在中国でブロックされています。Githubからダウンロードできます。公式ウェブサイトでは、検出にサポートするすべての機能のリストも表示されます（この記事の最後のページでは、壁をめくらできない子供の靴がサポートしているものを知ることができるようになります）。最新バージョンをダウンロードした後（この記事を書くときに著者はバージョン1.5を使用しました）、ページ領域に追加します。
次に、要素にNO-JSクラスを追加します。
Modernizrが実行されると、NO-JSクラスをJSに変えて、実行中であることを知らせます。 Modernizrはこれを行うだけでなく、検出するすべての機能にクラスクラスを追加します。ブラウザが機能をサポートしていない場合、NO-で機能に対応するクラス名をプレフィックスします。だから、あなたの要素は次のようになるかもしれません：
Modernizrは、Modernizrという名前のJSオブジェクトも作成します。これは、検出された各機能に与えられたブール結果のリストです。ブラウザが新しいキャンバス要素をサポートする場合、Modernizr.Canvasの値は真です。ブラウザがこの新しい要素をサポートしていない場合、対応する値は偽です。このJSオブジェクトには、Modernizr.video.h264など、特定の機能に関するより詳細な情報も含まれます。ブラウザがこの特別なコーデックをサポートしているかどうかがわかります。 Modernizr.inputTypes.Searchは、現在のブラウザが新しい検索入力タイプなどをサポートしているかどうかを教えてくれます。
私たちの未加工のシンプルな小さなページは、事前テストシステムのように見えますが、セマンティクスとアクセシビリティが向上しています。少し基本的なスタイルを追加しましょう。小さなテキスト形式、色、レイアウトを良くして、見栄えを良くします。現在、新しいものは何もありません。セマンティック構造HTMLページに式スタイルを追加し、スタイルを追加した後にページを見てください。
以下では、このページを強化して、より面白くしたいと考えています。ヘッド上のH1に独特のテキスト効果を適用し、検出機能のリストを2つの列に分割してから、右側に写真でModernizrのすべてを取得したいと思います。また、ページの内容の周りの境界線を美しくしたいです。これで、より強力なCSS3を使用すると、ブラウザがそれらをサポートしていない場合にそれらを無視するルールにさらにプロパティを追加できます。 CSS Cascade（継承）を使用すると、Modernizrに依存せずにBorder-Radiusなどの新しいプロパティを使用できます。ただし、Modernizrを使用すると、既存の手段では提供できない機能を提供できます。ブラウザの新しいものに対する微分サポートに基づいて、動的に変更されたクラス名。私たちのページに2つの新しいルールを追加して、これを説明します：
最初のルールは、#content要素に12ピクセルの丸い角を追加します。ただし、既存のページでは、属性値が2px冒険＃666の#content要素と境界線を設定しました。これは、箱が直角であるが、丸い角ではない場合はかなり良さそうです。 Modernizrのおかげで、ブラウザでサポートされているBorder-Radiusを使用して、1pxのリアルエッジをボックスに設定できます。
2番目のルールはもう少し高度です。 #content要素に影を追加し、Box-Shadow属性をサポートするブラウザの境界属性を削除しました。なぜ？ほとんどのブラウザは、エッジとコーナーと影の組み合わせに適したパフォーマンスを提供しないため（これは、注意すべきブラウザの欠陥ですが、今すぐ耐える必要があります）。影を使用して境界のみを使用する代わりに、私はむしろ影を使って要素を囲みたいと思います。このようにして、私は世界で最高の、正確で、最高のCSSパフォーマンスを持つことができます。ボックスシャドウ属性をサポートするブラウザに美しい影が表示されます。 Border-Radius属性のみをサポートするブラウザは、美しい丸い薄い境界線を提示します。これら2つをサポートしていない壊れたブラウザについては、2ピクセルの右角の境界線が見られます。
以下に、カスタム特別なフォントをヘッダーに適用します。以下は、H1の現在の声明であり、変更はありません。
これらのステートメントは、基本ページでうまく機能し、27ピクセルのテキストサイズは、H1に設定したフォントの表示にも適しています。しかし、フォントの場合、私はBeautifulと呼ばれるものを使用します、27ピクセルは小さすぎます。ここでは、このカスタムフォントを使用する他のルールを追加します。
まず、 @font-face宣言を追加し、カスタムフォントのパス、ファイル名、およびフォント名を指定します。次に、CSSステートメントを使用して、H1のフォントスタイルを選択します。美しいフォント自体が他のフォントのテキストよりもはるかに小さいため、ここで大きなフォントサイズを選択したことがわかります。したがって、カスタムフォントを表示するときにH1に大きなフォントサイズを与えるようにブラウザに指示する必要があります。
さらに、私たちの美しい手書きのテキストには、テキストシャドーイングに関するいくつかのレンダリングの問題があるため、ブラウザがカスタムテキストを使用することを決定したときにテキストシャドーイングをキャンセルする必要があります。さらに、検出機能パーツのリストを2つの列に分割する必要があります。私の目標を達成するために、Awesome CSS列属性を使用して、ブラウザが順序を破壊せずにリストを列にインテリジェントに分割できるようにします。私たちのリストには数値はありませんが、アルファベット順に配置されています。もちろん、すべてのブラウザがこのプロパティをサポートするわけではありません。サポートしていない人のために、Floatを使用して2列の目的を達成します。Floatを使用した後、リストはもはやアルファベット順に配置されなくなりますが、それは何よりも優れています。
Modernizrを再び使用して、さまざまな状況に異なるプロパティを設定しました。ブラウザがCSS列をサポートしている場合、リストを2つの列に完全に分割します。サポートされていない場合は、フローティングメソッドを使用してフローティングによって2つの列にリストを作成することもできます。それほど完璧ではありませんが、単一の列の長いリストを直接適用するよりも優れています。
ここでは、属性に異なるプレフィックス（-moz-、-webkit-、-o-）を追加したことに気付いたかもしれません。これは、異なるブラウザメーカーがこの関数の実装の異なる定義を持っているため、この関数を実装するには、対応するプレフィックスを異なるブラウザに追加する必要があるためです。
これらの変更後、新しいページは良く見えます。
このチュートリアルを終了するために、ページに進行性の拡張機能を追加します。 WebKitベースのブラウザは、CSS変換、アニメーション、3次元変換など、より素晴らしい特殊効果をサポートしています。そして、これらの特殊効果のいくつかを最後の段階のページに適用したいと思います。繰り返しますが、これらのプロパティは既存のCSSに追加され、それらをサポートしていないブラウザで無視されます。したがって、一方で漸進的な強化がサポートされていないこの状況には、Modernizrを使用することが適切です。
最初のセット：
@KeyFramesルールは、新しいCSSアニメーション仕様の一部であり、現在WebKitのみをサポートしています。属性の完全なアニメーションパスを宣言し、好きな段階でそれらを変更することができます。アニメーションの詳細については、W3Cワーキングドラフト仕様をお読みください。
ここでは、要素を3次元空間で回転させるコードを追加します。
ロゴを回転させる必要があり、回転するとバックグラウンドとより調和してうまくいくことを願っているため、PNG形式のファイルがここで使用されます。また、Overflow：Hidden属性を使用して、インデント-9999ピクセルでヘッダーのテキストを非表示にしました。要素を3Dで回転させるのは興味深いことですが、美しくはありません。最後に、アニメーションルールを使用して、回転期間を2秒に設定し、独自の中心軸に沿って回転し、止まることはありませんでした。
最終ページは見栄えが良く、WebKitブラウザ向けの楽しいアニメーションを設定します。これまでのところ、あなたのウェブサイトをModernizrを制御することで手首をどれほど素晴らしいものにすることができるか、そしてそれが本当の進歩的な強化をどれほどシンプルにすることができるかを理解できることを願っています。これはModernizrの完全な利点だけでなく、JSに基づいてフォールバックを構築し、HTML5の素晴らしい新機能を適用するのにも役立ちます。