将 Modernizr 与使用多种 css3 样式的 css 类一起使用？

Question

我正在使用 Modernizr 为不支持 css3 的浏览器创建替代样式。它工作得很好，但我还没有找到使用多个 css3 样式的 css 类的解决方案。

示例 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 但不支持 border-radius，您将会遇到问题。在这种情况下，两个按钮都将使用 box-shadow，忽略 border-radius 并 将 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;
    }

这里的问题是，如果浏览器不支持 border-radius 和 box-shadow 这两个类将用于设置元素的样式，我不禁认为这会导致问题？

Answer 1

Modernizr 将类添加到 html 元素（请参阅 Modernizr 的工作原理文档）基于其测试结果。这意味着该元素具有所有这些类，您可以简单地链接多个类选择器来缩小选择范围。

如果浏览器不支持其中一个规则或两者都不支持，您现有的解决方案就会应用该规则，因此这与您正在寻找的内容相反。

请尝试使用此选择器：

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

关于您的评论，IE6 无论如何都不支持 border-radius 和 box-shadow 属性，因此应该没关系。当它将选择器读取为 .no-boxshadow div.button 时，它仍然会应用该规则。查看我对这个问题的回答为例。

Answer 2

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; }