Javascript 有没有办法让跨浏览器CSS3代码变得枯燥？

当我想在CSS3中创建渐变背景时，我必须这样做：

background-color: #3584ba;
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */
background-image:    -moz-linear-gradient(top, #54a0ce, #3584ba);  /* FF3.6 */
background-image:      -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */

这真的很烦人。如果我只使用以下工具，是否有更好的解决方案（例如jQuery插件）可以使我的代码跨浏览器兼容：

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */

比如说？

---

有没有工具可以帮助我更轻松地编写CSS3代码？

有很多工具可以帮助我：

这些通常被称为CSS预处理器

您可能会编写这样一次，比如函数定义（通常称为“mixin”）：

然后申请：

。我的班级{
.线性梯度（#54a0ce，3584ba）；
}
.我的另一节课{
.线性梯度（#ccc，#aaa）；
}

---

强烈推荐

您可以随时使用在线工具为您生成它们：

有没有更好的解决方案，例如jquery插件，可以使我的代码跨浏览器兼容

对于客户端解决方案，您可以使用

一个脚本，允许您在任何地方只使用未固定的CSS属性。 它在后台工作，将当前浏览器的前缀添加到任何 CSS代码，仅在需要时使用

然后，您只需要使用unfixed函数，该函数在CSS中神秘地缺失：

background-image: linear-gradient(top, #54a0ce, #3584ba);

---

我找到了问题的答案。这是一个名为“autoprefixer”的程序，它是免费的，并且使用Grunt（以及其他一些东西）。您给它一个带有未编辑css的文件或目录，并根据您想要定位的特定浏览器自动添加前缀，并将它们输出到一个新文件中。这里有一篇关于如何使用它的文章

作者发布的关于Autoprefixer的帖子： 如何为初学者使用Grunt： 然后您可以在Github上查找自述文件

我在寻找完全相同的东西，这是我发现的最好的解决方案，它只处理常规CSS。我希望这有帮助。

试试这个。这不一定能帮助您编写更简单的代码，它不是javascript库。但它确实添加了供应商前缀并删除了无用的css代码

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba);
background-image: linear-gradient(top, #54a0ce, #3584ba);

---

把你的代码放进去，这就是我得到的结果。（为了得到这个结果，我从原始代码中删除了-webkit-）

如果有那么烦人的话，就自己写吧+谢谢你的盛情款待problem@webarto-为什么要重新发明轮子？：）因为只有到那时你才会真正知道如何驾驶works@webarto是的，有时候就是这样：）我个人强烈推荐少一点，少一点+1提供了一系列好的解决方案。PHP也有一些更为“传统”，因为它只是为您添加了特定于浏览器的属性，但它远没有混合和嵌套样式那么有用（尽管您的代码“降级”回标准CSS更好）。用于Sass的mixin collection有很多CSS3混合插件，可以处理所有浏览器兼容性问题。这些插件速度慢，功能有限。要么使用SASS/LESS，要么不使用任何。是的，服务器端预处理器通常是最好的选择。然而，值得一提的是客户端选项。

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba);
background-image: linear-gradient(top, #54a0ce, #3584ba);