有没有一种方法可以使跨浏览器的CSS3代码DRY？

Question

有没有一种方法可以使跨浏览器的CSS3代码DRY？

13

当我想要在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代码？

- Tamás Pap

2

http://prefixr.com/ 的翻译： - Dejan Marjanović

感谢您提出这个深思熟虑的问题，您的贡献得到赞赏。 - abhijit

3

@webarto - 为什么要重新发明轮子？ :) - Tamás Pap

6

只有这样，您才能真正知道轮子是如何运作的。 - Dejan Marjanović

@webarto 是的，有时候这是可行的方法 :) - Tamás Pap

5个回答

2

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

对于客户端的解决方案，您可以使用http://lea.verou.me/prefixfree/ 这是一个脚本，可以让您在任何地方仅使用未经前缀的CSS属性。它在幕后工作，仅在需要时向任何CSS代码添加当前浏览器的前缀。

然后，您只需要使用未经前缀的函数，而该函数在您的CSS中神秘地缺失。

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

- thirtydot

2

这些插件功能有限且速度较慢。要么使用SASS/LESS，要么不使用任何插件。 - vincicat

是的，服务器端预处理器通常是更好的选择。然而，提及客户端选项也是值得的。 - thirtydot

2

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

http://www.colorzilla.com/gradient-editor/

http://www.css3maker.com/css-gradient.html

- Marcelo Mason

0

https://autoprefixer.github.io/ 试试这个。它并不能帮你写出更简单的代码，它也不是一个 JavaScript 库。但它可以添加供应商前缀并删除无用的 CSS 代码。

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

将您的代码放入，这就是我得到的结果。（我从原始代码中删除了-webkit-以获得该结果）。

- Clement Abel

0

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

作者发布的Autoprefixer帖子：http://css-tricks.com/autoprefixer/ 绝对初学者如何使用Grunt：http://24ways.org/2013/grunt-is-not-weird-and-hard/ 然后您可以在Github上查找readme。

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

- user3413723

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

有许多工具可以实现这个功能：

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

你将编写类似函数定义（通常称为“mixin”）的内容，例如：

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

接着执行以下操作：

.my-class {
    .linear-gradient(#54a0ce, #3584ba);
}
.my-other-class {
    .linear-gradient(#ccc, #aaa);
}

强烈推荐。