部分前缀CSS的Autoprefixer

Autoprefixer for partially prefixed CSS

本文关键字：Autoprefixer CSS 前缀      更新时间：2023-09-26

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

这是经过设计的。Autoprefixer故意忽略任何不在未固定声明之前的前缀，以便在绝对必要的情况下使用它们，而不会被覆盖，这会导致不希望的副作用。

例如，您在问题中给出的输出是，而不是如果您现在使用默认设置运行Autoprefixer将生成的输出。假设确实覆盖了您的-moz-前缀，它会完全丢弃它，因为自近两年前推出的Firefox 16以来，该前缀已不再需要。实际输出为：

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

现在，您可以运行带有选项的Autoprefixer来适应旧版本的Firefox（Firefox >= 4）和其他浏览器，但如果您想让Autoprefixe处理它，您仍然必须从CSS中删除前缀。您不能指望Autoprefxer认为它可以用CSS中明确声明的前缀做任何事情。

本节文档有一个不同的示例，但原理相同：

禁用

Autoprefixer被设计成没有接口——它只是工作。如果您需要一些特定于浏览器的破解，只需在取消固定后写入带前缀的属性。

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}
相关文章：