Modernizr如何使用css有條件地加載（Modernizr）類？

Question

我只是檢查如何使用modernizr類的css表達式工作..正如我在Google dev上看到的那樣。

//normal css 
.box{ 
    width:100px; 
    height:100px; 
    border-radius:20px; 
    background:blue; 

//as modernizr detects no support.. 
.no-borderradius .box{ 
    background:url(radiusyImage.png); 
} 

「radiusyImage」不添加額外的http請求。我知道這是可能的（加載源只有它是必要的）與JS：下面的工具

if (!Modernizr.borderradius) { 
    //load img or a pollyfill.. 
} 

但如何是可能與CSS？它實際上是如何工作的？

Answer 1

當前的瀏覽器不會請求他們不會在html See this question中使用的圖像。

由於Modernizr僅在瀏覽器不支持該屬性的情況下才會添加no-borderradius類，因此任何現代瀏覽器都不會具有匹配.no-borderradius .box的DOM元素，因此圖像將不會加載。

這裏唯一的缺點是在CSS中有幾行樣式，但其影響不明顯。