Question

我需要在服务器上操作CSS文件，最近我发现了Autoprefixer库。

我的问题是 - 我的css文件有前缀，具体取决于所使用的浏览器。例如。我的css代码是这样的 -

.newclass
{
    -moz-transition:.3s all;
}

Autoprefixer在这里不起作用，需要css为

.newclass
{
    transition:.3s all;
}

生成

.newclass
{
    transition:.3s all;
    -moz-transition:.3s all;
    -ms-transition:.3s all;
    -o-transition:.3s all;
    -webkit-transition:.3s all;
}

有没有什么方法可以用我原来的CSS（一个前缀属性而不是非前缀属性）获得相同的结果？或者除了Autoprefixer之外还有其他任何可以帮助我实现相同功能的库吗？

Answer 1

这是设计的。 Autoprefixer故意忽略任何不带前缀的声明前缀，因此如果它们绝对必要而不会被覆盖，则可以使用它们，这会导致不良的副作用。

例如，您在问题中给出的输出不如果您使用默认设置立即运行Autoprefixer，则会生成的输出。假设它覆盖了您的-moz-前缀，它会完全丢弃它，因为the prefix is no longer needed as of Firefox 16 which came out almost two years ago。实际输出将是：

.newclass
{
    -webkit-transition:.3s all;
            transition:.3s all;
}

现在，您可以运行Autoprefixer，并提供适用于旧版本Firefox（Firefox >= 4）和其他浏览器的选项，但您仍需要删除前缀（）如果你想让Autoprefixer处理它你的CSS。你不能指望Autoprefixer假设它可以用你在CSS中明确声明的前缀做任何想做的事。

This section文档有一个不同的例子，但原理是相同的：

禁用

Autoprefixer被设计为没有接口 - 它只是工作。如果您需要一些特定于浏览器的黑客，只需在未加前缀后写入前缀属性。
a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}

Autoprefixer用于部分前缀的CSS

1 个答案:

禁用