與使用多個css3風格的css類一起使用modernizr？

我正在使用modernizr爲不支持css3的瀏覽器創建替代樣式。它工作得很好，但我還沒有找到使用多個css3風格的css類的解決方案。與使用多個css3風格的css類一起使用modernizr？

例1：

div.button { 
box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */ 
border-radius: 5px; /* second css3 style */ 
} 

/* fallback for browsers that don't support css3 */ 
.no-borderradius div.button { 
background: transparent url(my-button.png) left top; 
}

這裏的問題是，如果瀏覽器不支持的box-shadow，但不支持邊界半徑你會遇到的問題。在這種情況下，兩個按鈕都將使用方塊陰影，忽略邊框半徑和，將no-borderradius類用於背景圖像。我可以通過創建兩個回退來解決它。

例2：

div.button { 
    box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */ 
    border-radius: 5px; /* second css3 style */ 
    } 

    /* fallback for browsers that don't support css3 */ 
    .no-borderradius div.button, .no-boxshadow div.button /* no-boxshadow added */ { 
    background: transparent url(my-button.png) left top; 
    }

這裏的問題是，如果瀏覽器支持一點兒也不邊界半徑和的box-shadow兩個類將被用於設計元素，我不禁但認爲這可能會導致問題？

來源

2011-05-22 Sacha

Modernizr根據其測試結果爲html元素添加類（參見文檔中的How Modernizr works）。這意味着元素具有所有這些類，並且您可以簡單鏈接多個類選擇器來縮小選擇範圍。

如果瀏覽器不支持任一規則或兩個，您現有的解決方案將應用規則，因此這與您正在尋找的內容相反。

試試這個選擇來代替：

.no-borderradius.no-boxshadow div.button { 
    background: transparent url(my-button.png) left top; 
}

關於你的評論，IE6不支持border-radius和box-shadow性質無論如何，所以它不應該的問題。它仍將應用規則，因爲它讀取選擇器爲.no-boxshadow div.button。請參閱我對this question的解答以獲取插圖。

來源

2011-05-22 10:35:47 BoltClock

感謝BoltClock爲您的快速回答，但我認爲IE6有這些類型的選擇器的問題。不過謝謝你！ – Sacha 2011-05-22 11:04:12

我認爲如果您發現IE 6 *沒有*遇到問題，那麼它的價值應該是+10。@Sacha：如果您需要支持IE 6，請在您的問題中明確提及。 – 2011-05-22 11:07:23

@Sacha，@Cody，是的，IE6有問題，但在這種情況下，它仍然會應用規則。看我的編輯。 – BoltClock 2011-05-22 12:20:12

該CSS將工作，因爲支持box-shadow的瀏覽器也支持border-radius[1]。

.no-boxshadow div.button { background:transparent url(btn.png) 0 0; } 
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }

來源

2011-05-22 12:44:35 Marcel

與使用多個css3風格的css類一起使用modernizr？

回答

相關問題