Question

我正在尝试现代化。是否可以在同一样式表中混合使用“支持/反对各种功能”，如果有的话，是否有关于如何混合它们的一般规则？

例如这是好的还是坏的做法。我只是想知道混合惯例是否会造成混淆，如果最好通常坚持一个公约，只在必要时使用例外;或者以避免所有例外的方式编程是否重要。

    .no-borderradius .some-element {
    ...
    }

    .boxshadow .some-other-element {        
    ...
    }

Answer 1

这实际上取决于具体情况，即你是否有风格依赖。

例如，如果应用了border-radius，则需要在#box上进行一些填充，如果浏览器不支持，则不需要任何填充。在这种情况下，你可以这样做：

.border-radius #box {
  border-radius: 5px;
  padding: 5px;
}

（忽略供应商前缀的缺失。）

但是，如果你有一个微妙的渐变，只是增强了外观而没有任何依赖它，你可以这样做：

#box {
  background: white linear-gradient(...);
}

支持它的浏览器会显示它，不显示的浏览器只显示降级的白色外观。

另一个例子，您需要不同的边框颜色，具体取决于是否成功应用了box-shadow。如果支持box-shadow，您可以设置无盒无阴影样式并覆盖它：

#box {
  border-color: gray;
}
.box-shadow #box {
  box-shadow: black 0 0 5px;
  border-color: white;
}

你可以反过来做，但在我看来，首先给出降级的风格更有意义，然后加强它。你看，在这个例子中没有必要使用.no-box-shadow因为我无论如何都要覆盖边框颜色。此外，如果您发现带有灰色边框的盒子阴影在视觉上可以接受，则可以将框阴影样式放在#box下（而不是.box-shadow #box）。

要理解，不需要为了使代码混乱而只是为了“一致”，你只需要考虑你的样式的语义。另外，如果您的样式过分依赖JavaScript生成的类，请想象关闭JavaScript后您的页面会是什么样子。

使用modernizr时，混合技术是不好的做法，即支持还是反对特定功能？

1 个答案: