一个用于消除CSS中供应商前缀的脚本

Question

有没有一种脚本可以直接包含在我的网站上，自动添加CSS的供应商前缀？我希望只编写标准的CSS，这样几年后就不必回来删除供应商前缀。

- JacobTheDev

---

我并不是指做所有事情的东西，只是针对一些简单的相同的事情，比如转换或变形。显然像渐变这样的东西对于脚本来说有点复杂，但是既然现在有像http://www.prefixr.com这样的东西，我认为一个可以包含在您网站上的脚本，只需浏览您的CSS并添加可用内容即可。 - JacobTheDev

考虑到 CSS 的 级联 特性，您可以包含两个样式表。第一个遵循官方的 CSS3 标准，而第二个则覆盖某些设置以执行特定于供应商的操作，从而使其实际工作。然后，将来（显然）只需删除第二个样式表即可... - nnnnnn

啊！这是个好主意。我一直在每个CSS规则集的底部放置“/供应商特定/”，但这听起来更好。您介意发布一个答案，以便我可以接受它吗？ :) - JacobTheDev

Answer 1

我刚找到这个网站，看起来非常完美：http://leaverou.github.com/prefixfree/

- JacobTheDev

Answer 2

我写了一个类似的脚本，用于生产环境且无需依赖：http://imsky.github.com/cssFx/。

- imsky

Answer 3

我不知道有没有专门做这件事的脚本，但我一直在使用LESS来编写所有内容，而不是使用纯CSS。这样，您可以将渐变等内容放入mixin（类似于函数）中，然后您只需要更改一小组声明，而不是在多个文件中进行更改。当然，mixin通常会导致很多重用，不仅适用于供应商声明，还适用于许多其他内容（例如，我通常基于960.gs定义颜色调色板、图标集以及网格mixin）。对于动态站点，我通常设置服务器端编译和缓存。对于静态站点，我只需在部署之前使用shell脚本将less编译为css即可。

- prodigitalson

---

如果你正在使用OS X操作系统，那么less.app（http://incident57.com/less/）是非常好用的。 - djlumley

@djlumley: 哦哦哦哦哦哦哦...太酷了。我怀疑我会不会用它，因为即使是我的静态项目也实际上是用php构建的(代码重用)，然后编译成静态的，但如果你还没有自动化构建流程(或者不想设置一个)，这将是非常棒的。 - prodigitalson

Answer 4

考虑到 CSS 的层叠性质，您可以包含两个样式表，其中 第二个 遵循官方的 CSS3 规范，并且 第一个 覆盖某些设置以执行厂商特定的操作，从而使其实际工作。然后在将来，您仅需删除 第一个 样式表即可...

- nnnnnn

---

如果你要在一个独立的文件中包含供应商前缀，那么请将它包含在标准 CSS 之前，这样当供应商前缀被删除时，标准声明就会被呈现。 - djlumley

好的观点。我能假装那就是我一直想表达的吗？不行？无论如何，我已经相应地编辑了我的帖子。 - nnnnnn

现在这样做是最合理的，也许我会开始一个项目来编写这个脚本。我认为很多人都会喜欢它。 - JacobTheDev

Answer 5

除非你不喜欢它们在代码中增加混乱，否则没有理由消除供应商前缀。

至于为什么它们首先存在，A List Apart的这篇文章http://www.alistapart.com/articles/prefix-or-posthack/提供了有价值的见解。基本上，拥有它们比没有它们更容易。

如果你的CSS正确地级联：

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

然后当Chrome和Safari删除供应商前缀时，样式将自然级联，您不必删除任何内容（除非您担心它们添加的额外字节）。

- djlumley