1

私は最近 Modernizr を調べ、ドキュメントを読みましたが、いくつかの点が少し不明確に思えます。ドキュメンテーションを読むと、Modernizr は主に、境界半径、メディア クエリなど、特定のものをブラウザーで使用できるかどうかを検出するために使用されるようです。古いブラウザーで期待どおりにレンダリングするようにこれらを修正しますか?

Polyfills に関するドキュメントを読みましたが、たとえば、それらをサポートしていないブラウザーの div に丸い角を追加するためにこれらを実装する方法については正確にはわかりません。

さらに、Modernizr を使用して古いブラウザーでメディア クエリを動作させることはできますか、それともメディア クエリを使用できるかどうかを検出するための手段にすぎません。

それが単なる検出ツールである場合、なぜそれほど便利なのでしょうか? たとえば、古いバージョンの Internet Explorer ではメディア クエリや境界半径を使用できないことは既にわかっています。単なる検出ツールではない場合、それを使用して古いブラウザに新しい機能を追加するにはどうすればよいですか?

4

2 に答える 2

3

私の質問は、それが単なる検出ツールである場合、なぜそれほど便利なのですか? たとえば、古いバージョンの Internet Explorer ではメディア クエリや境界半径を使用できないことは既にわかっています。

はい、検出ツールです。Modernizr の目的は、ブラウザーの sniffではなくsniff を機能させることです。あなたはIEの能力をすでに知っていると言いました。IE/特定のブラウザーと、それらができることは忘れてください。Modernizr は、機能が利用可能かどうかを判断し、フォールバックの CSS/JS ユースケースを簡単に作成するのに役立ちます。

于 2013-04-29T13:41:59.180 に答える
1

Modernizer は JavaScript を使用して、ページ読み込み時にページの HTML 要素に一連のクラスを追加します。例えば

<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">

これらのクラスは、ページが表示されているブラウザーで HTML5/CSS3 機能を使用できるかどうかを示します。

これにより、ブラウザーが処理できる場合にのみ CSS3 スタイルを適用することで、より効率的な CSS を使用できます (プログレッシブ エンハンスメント)。

例えば

.no-audio .music-player {
   display: none
}
.audio .music-player {
   /* styles for music player */
}

また、Modernizer では、これらの要素が JavaScript API で利用可能かどうかをテストできます。これは、古いブラウザー (ポリフィル) のフォールバックを提供するのに役立ちます。したがって、角を丸くするには、次のようにします。

Modernizr.load({
  test: Modernizr.borderradius,
  yep : /* do nothing */
  nope: 'borderradius.js' /* css3 pie for example */
});

または代わりに：

if (Modernizr.borderradius) {
   // do nothing
}else{
    /* script for making rounded corners e.g css3 pie */
}

または CSS では、利用可能な場合は borderradius のみを使用します。

.box {
 border: 1px solid #000; /* all browsers, no rounded corners */
}

.borderradius .box{
  border-radius: 15px; /* only CSS3 compliant browsers get this style */
}

古い (IE <9) ブラウザーのメディア クエリには、repond.js などの別のプラグインが必要です。

于 2013-04-29T14:16:25.460 に答える