与使用多个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？

回答

相关问题