部分前缀 CSS 的自动前缀

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) 和其他浏览器，但您仍然需要从 CSS 中删除前缀如果您希望 Autoprefixer 处理它。你不能指望 Autoprefixer 假设它可以用你的 CSS 中明确声明的前缀做任何它想做的事情。

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

禁用

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

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}