javascript - 用于部分前缀 CSS 的 Autoprefixer

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文档中有不同的示例，但原理是相同的:

Disabling

Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write prefixed property after unprefixed.

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