CSSを上書きしてCSSをModernizer（YepNope）で選択的に読み込み

Question

これをテストする方法はわかりませんが、Modernizer.loadを使用してCSSスタイルシートに読み込んだ結果、CSSクラス名を含むルールを上書きするだけでパフォーマンスが向上します同じスタイルシート。例えば、デバイスはタッチをサポートしているならば、私はロードするために異なるレイアウトを持っている、それはより速く...

{ 
    test: Modernizr.touch, 
    yep : 'css/touch.css', 
    nope: 'css/base.css' 
} 

たり、同じスタイルシートのスタイルを上書きを行うことです

...

.container { width: 50% } 

.touch .container { width: 100% } 

余分なクエリの速度が1つの大きなCSSファイルを持つ重さに比例しているようですか？

Answer 1

ここに3つの詳細があることを理解する必要があります。

1. サーバーへの呼び出し。

2. ブラウザ時間は、ファイルのすべてのあなたの親スタイルの

3. 重量を計算します。

ですので、答えはです。

あなたが1つの大きなファイルが2つのファイルからより大きくなるプロパティの間に改行を入れずにCSSを書くと、重量の原因1のファイルへの答えが良いです。

.touchクラスで作成するページ全体がある場合は、そのクラスでファイルが来るともっと計算されます。

ので、私は何だと、すぐに

Answer 2

Iになり、サーバーだけで1時間に呼び出し、一つのファイルの原因は、すべてのスタイルのまとめとサーバ（重要な時間値）への呼び出しをロードした方がよいようにすることです両方のオプションが完全に有効だと思います。

タッチに固有のCSSコードが大量にある場合、非タッチブラウザに余計な負担をかけることなく、Modernizrでそれらを取り込みます。

しかし、私の好みは、一般に、この種のものにオーバーライドスタイルを使用することです。

Modernizrオプションを使用すると、Modernizrスクリプトがロードされ実行されるまでModernizrテストを実行できないため、タッチスタイルの読み込みが遅れることになります。

メインページロードの一部としてロードされ、初期レンダリングの準備が整っているのと比較して、ページがロードされた後にのみロードされ、すぐには準備できない場合があります。

これは、タッチスタイルがロードされる前にページが読み込まれて表示される可能性があります。理想的ではない。

これはModernizrをノックするのではなく、すばらしいツールですが、使用しないで必要なことを行うことができれば、一般的にはより良い方法です。