2

我需要在服务器上操作 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 之外，还有其他库可以帮助我实现同样的目标吗？

4

1 回答 1

3

这是设计使然。Autoprefixer 故意忽略任何不在无前缀声明之前的前缀，以便在绝对必要时可以使用它们而不会被覆盖，这会导致不希望的副作用。

例如，您在问题中给出的输出不是您现在使用默认设置运行 Autoprefixer 时会生成的输出。假设它确实覆盖了您的-moz-前缀，它会完全丢弃它，因为从大约两年前出现的 Firefox 16 开始不再需要前缀。实际输出将是：

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

现在，您可以只运行 Autoprefixer 并带有一个选项以适应旧版本的 Firefox ( Firefox >= 4) 和其他浏览器，但如果您希望 Autoprefixer 处理它，您仍然必须从您的 CSS 中删除前缀。你不能指望 Autoprefixer 假设它可以用你的 CSS 中明确声明的前缀做任何它想做的事情。

这部分文档有一个不同的例子，但原理是一样的：

禁用

Autoprefixer 被设计为没有界面——它只是工作。如果您需要一些特定于浏览器的 hack，只需在无前缀后编写前缀属性。

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}
于 2014-08-27T08:52:41.280 回答