使用modernizr与使用多个css3风格的CSS类？ [英] Using modernizr with css classes that use more than one css3 style?

问题描述

我使用modernizr为不支持css3的浏览器创建替代样式。它工作伟大，但我没有找到一个解决方案与css类，使用多个css3风格。

I am using modernizr to create alternative styles for browsers that don't support css3. It works great but i haven't found a solution with css classes that use more than one css3 style.

示例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 和 aply no-borderradius类与背景图像。

The problem here is if the browser does support box-shadow but doesn't support border-radius you will run into problems. In this case both the button will use the box-shadow, ignore the border-radius and aply the no-borderradius class with the background image. I could solve it by creating two fallbacks.

示例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这两个类都将用于样式元素，我不禁想到这可能会导致问题？

The problem here is that if the browser does'nt support border-radius and box-shadow both classes will be used to style the element, i can't help but thinking this can cause problems?

推荐答案

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

Modernizr adds classes to the html element (see How Modernizr works in the documentation) based on its test results. That means that element has all those classes, and you can simply chain multiple class selectors to narrow down the selection.

您现有的解决方案应用规则，如果浏览器不

Your existing solution applies the rule if the browser doesn't support either one of the rules or both, so it'd be contrary to what you're looking for.

请尝试此选择器：

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

关于您的评论，IE6不支持 border-radius 和 box-shadow 属性，所以不要紧。它仍将应用规则，因为它读取选择器作为 .no-boxshadow div.button 。请参阅我对此问题的答案为例证。

Regarding your comment, IE6 doesn't support both border-radius and box-shadow properties anyway, so it shouldn't matter. It will still apply the rule as it reads the selector as .no-boxshadow div.button. See my answer to this question for an illustration.

这篇关于使用modernizr与使用多个css3风格的CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！