Question

是否可以在浏览器特定的CSS 3项目（阴影，圆角等）的情况下删除样式？例如：

.fancy
{
  /* only display if no drop shadow support */
  border: thin solid #888;

  box-shadow: 0px 1px 4px #888;
  -webkit-box-shadow: 0px 1px 4px #888;
  -moz-box-shadow: 0px 1px 4px #888;
}

Answer 1

如果不删除样式规则，最好只在启用CSS3时应用它们。您可以使用这个奇特的Javascript，称为 Modernizr 。

让我举一个快速举例说明如何在样式表中使用它：

.boxshadow .fancy {
    border: thin solid #888;

    box-shadow: 0px 1px 4px #888;
    -webkit-box-shadow: 0px 1px 4px #888;
    -moz-box-shadow: 0px 1px 4px #888;
}

Modernizr向HTML元素添加了类，它告诉您启用了哪些浏览器功能。

Answer 2

CSS不做条件。在任何版本中。

您可以为支持CSS3的浏览器动态提供不同的样式表。

Answer 3

由于CSS3是样式标记，而不是编程语言，你不能真正做到“if-else” - 但是你可以设计你的CSS3样式来覆盖CSS2样式，最终结果将是CSS3支持CSS2作为后备。

然而，就实用性而言，这种方法可能比为支持的浏览器动态提供CSS3样式表更痛苦。

Answer 4

一种方法 - 虽然给出了css采用/实现的不完整性质，它可能/不会详尽地工作 - 是使用：

.fancy
{
  border: thin solid #888;
}

.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
   border: 0 none transparent;
   box-shadow: 0px 1px 4px #888;
   -webkit-box-shadow: 0px 1px 4px #888;
   -moz-box-shadow: 0px 1px 4px #888;
}

这有点混乱，因为选择器必须明确定位所有odd和even .fancy元素，我更喜欢更整洁的解决方案，但它确实有效（当然在镀铬/ Linux的）。演示于：http://jsbin.com/ezako3

如果CSS3支持，删除样式

4 个答案: