Question

您是否有任何优雅的方法可以从CSS3功能中受益，例如边框半径或渐变？

我正在寻找一种可以避免特定于浏览器的CSS属性和特定于浏览器的样式表文件的解决方案。我发现它们既难以维护又过于冗长。

它可能是一个Javascript库，可以处理跨浏览器兼容性问题。因此，我只能使用W3C CSS3属性支持（不是浏览器特定的），并且当浏览器开始支持CSS3时，摆脱库。

到目前为止，我发现这些资源似乎至少符合我的一些期望：

eCSStender - JS被告知模仿不同浏览器上的CSS3功能（甚至是IE6），但我还没有测试过，（{ {3}}）
read about eCSStender - JS 检测浏览器支持哪些CSS3属性
... 我会用你的答案填写

或者您可能有其他方法可以让您在没有非常详细的代码的情况下利用CSS3？

Answer 1

您可以使用LESS，其主页上有一个border-radius示例：

.rounded_corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .rounded_corners;
}

但是，我真的没有发现使用浏览器前缀的凌乱。对于border-radius，您唯一需要的是：

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;

这将适用于大约十几个浏览器（如果你包括移动浏览器）。以这种方式使用缩进还可以更容易地忘记更新其中一个属性。当您决定放弃对Safari 4或其他任何内容的支持时，您只需搜索并替换要从CSS文件中删除的规则。

将它与我们需要的盒子模型黑客，NS4，IE5 / Mac修复以及所有这些废话进行比较。

Answer 2

这不是特定于CSS3的，但正如您要求一种简洁的方式来处理样式并提及modernizr（通过将classes no-borderradius添加到您的<html>元素中来工作如果该功能不可用），我认为通常改进的组织CSS方式可能会有所帮助。

有LESS允许在CSS中使用变量，mixins或嵌套规则（请参阅示例链接）。但是，这需要您将.less文件编译为有效的.css。为了避免这种情况，有less.js（另请参阅：Less.js Will Obsolete CSS），它允许您直接在页面中包含.less文件（至少在开发过程中很有用）。

我认为LESS不要求你学习很多新的语法规则，并且可能有助于在“真实”风格旁边组织回退CSS。

CSS3的智能方法

2 个答案: