覆蓋CSS Vs選擇性地加載CSS與Modernizer（YepNope）

不確定如何測試這個，但有沒有任何性能收益從一個CSS樣式表通過與Modernizer.load查詢加載作爲反對只是用CSS classname覆蓋規則相同的樣式表。覆蓋CSS Vs選擇性地加載CSS與Modernizer（YepNope）

例如，如果一個設備具有觸摸的支持，然後我有一個不同的佈局來加載，它更快做...

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

還是在同一個樣式表覆蓋的樣式...

.container { width: 50% } 

.touch .container { width: 100% }

似乎差異歸結爲額外查詢的速度Vs有一個大的CSS文件的重量？

來源

2013-02-14 Dan Christian

css有多少觸摸？ – 2013-02-14 13:05:45

嗯，這是理論上的，但我想讓他們都爲參數權衡相同。 – 2013-02-14 13:07:22

略有不同：'Modernizr.touch' **不會測試*設備*是否具有觸摸功能，只有*瀏覽器*才能觸發[Touch Events]（http://www.w3.org）/TR/2013/WD-touch-events-20130124 /）...小心這個（[ref]（http://modernizr.com/docs/#touchnotes））。在任何設備上，「Modernizr.touch」在IE10中都是錯誤的，因爲它不遵循Touch Events規範，它使用[Pointer Events]（http://www.w3.org/Submission/pointer-events/）。實際上'Modernizr.touch'在v3.0中被棄用，以支持'Modernizr.touchevents'和'Modernizr.pointerevents'來消除這種混淆。 – 2013-02-18 13:09:16

你需要了解你在這裏有3個細節。

調用服務器。
瀏覽器的時間來計算所有的父母風格的
該文件的重量。

所以答案是。

如果你在沒有換行符的情況下編寫css，那麼1個大文件會比2個文件更大。並回答重量原因1文件更好。

如果你有整個頁面使用.touch類更多的計算來與文件的類。

所以，我正在做的是調用服務器只是一個時間，使一個文件的原因是更好地加載所有風格的同時，呼叫服務器（重要的時間價值）將在短期內

來源

2013-02-14 16:53:51

我認爲兩種選擇都是完全有效的。

如果有大量特定於觸摸的CSS代碼，那麼我會說是，使用Modernizr將它們拉入以避免非觸摸式瀏覽器帶來額外的負擔。

但是，我的首選是通常使用覆蓋樣式這種事情。

原因是，使用Modernizr選項，您將延遲觸摸樣式的加載，因爲在Modernizr腳本加載並準備運行之前，它無法執行Modernizr測試。

因此，與作爲主頁面加載的一部分加載並準備好進行初始渲染相比，它僅在頁面加載後加載，並且可能不會立即準備好。

這樣做的結果可能是頁面可能在加載觸摸樣式之前加載並顯示。不理想。

這不是爲了敲Modernizr - 這是一個很棒的工具 - 但如果你可以在不使用它的情況下做你所需要的，它通常會更好。

來源

2013-02-15 08:00:00 Spudley

覆蓋CSS Vs選擇性地加載CSS與Modernizer（YepNope）

回答

相關問題