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

时间:2012-06-03 12:47:15

标签: css css3 readability modernizr code-readability

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

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

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

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

1 个答案:

答案 0 :(得分:3)

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

例如,如果应用了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后您的页面会是什么样子。