Autoprefixer：最佳处理供应商前缀的 CSS 后处理器

以下内容是 Andrey Sitnik 的客座文章，他是 Autoprefixer 工具的创建者，该工具是用于处理 CSS 中供应商前缀的“后处理器”。为什么使用它而不是预处理器或其他工具？有很多原因。Andrey 将解释。

Autoprefixer 解析 CSS 文件，并使用 Can I Use 数据库向 CSS 规则添加供应商前缀，以确定需要哪些前缀。

您所要做的就是将其添加到您的资产构建工具（例如，Grunt）中，这样您就可以完全忘记 CSS 供应商前缀。只需按照最新的 W3C 规范编写常规 CSS，无需任何前缀。像这样

a {
  transition: transform 1s
}

Autoprefixer 使用一个数据库，其中包含当前浏览器的流行程度和属性支持，以为您添加前缀

a {
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

问题

当然，我们可以手动编写供应商 CSS 前缀，但这可能很繁琐且容易出错。

我们可以使用像 Prefixr 这样的服务和文本编辑器插件，但这仍然让人很头疼，要处理大块的重复代码。

我们可以使用带预处理器（如 Sass 的 Compass 或 Stylus 的 nib）的 mixin 库。它们解决了大量问题，但也产生了其他问题。它们迫使我们使用新的语法。它们的迭代速度远不如现代浏览器，因此稳定版本可能包含大量不必要的修饰符，有时我们还需要创建自己的 mixin。

Compass 并没有真正隐藏前缀，因为您仍然需要决定很多问题，例如：我需要为 border-radius 编写 mixin 吗？我需要用逗号分隔 +transition 的参数吗？

Lea Verou 的 -prefix-free 最接近于解决这个问题，但考虑到最终用户的性能，使用客户端库并不是一个好主意。为了避免重复工作，最好只构建一次 CSS：在资产构建或项目部署期间。

幕后

Autoprefixer 并非预处理器（如 Sass 和 Stylus），而是一个后处理器。它不使用任何特定语法，而是与通用 CSS 配合使用。Autoprefixer 可以轻松地与 Sass 和 Stylus 集成，因为它在 CSS 编译完成后运行。

Autoprefixer 基于 Rework，这是一个用于编写您自己的 CSS 后处理器的框架。Rework 将 CSS 解析为有用的 JavaScript 结构，并在进行操作后将其导出回 CSS。

每个版本的 Autoprefixer 都包含最新的 Can I Use 数据副本

• 当前浏览器及其流行程度列表。
• 为新的 CSS 属性、值和选择器所需的修饰符列表。

默认情况下，Autoprefixer 将支持主要浏览器的最新两个版本，与 Google 的做法 类似。但是，您可以通过名称（例如 “ff 21”）或模式来选择项目中支持哪些浏览器

• 使用 “last 2 versions” 的每个主要浏览器的最新两个版本。
• 使用 “> 1%” 的全球使用统计数据超过 1% 的浏览器。
• 仅较新的版本，使用 “ff > 20” 或 “ff >= 20”。

然后，Autoprefixer 会计算哪些修饰符是必需的，哪些已经过时。

当 Autoprefixer 向 CSS 添加修饰符时，它不会忘记修复语法差异。这样一来，CSS 就会根据最新的 W3C 规范生成

a {
  background: linear-gradient(to top, black, white);
  display: flex
}
::placeholder {
  color: #ccc
}

编译成

a {
  background: -webkit-linear-gradient(bottom, black, white);
  background: linear-gradient(to top, black, white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}
:-ms-input-placeholder {
  color: #ccc
}
::-moz-placeholder {
  color: #ccc
}
::-webkit-input-placeholder {
  color: #ccc
}
::placeholder {
  color: #ccc
}

Autoprefixer 也会清除过时的修饰符（来自旧代码或 CSS 库，如 Bootstrap），因此以下代码

a {
  -webkit-border-radius: 5px;
  border-radius: 5px
}

编译成

a {
  border-radius: 5px
}

因此，经过 Autoprefixer 处理后，CSS 将只包含实际的供应商前缀。在 Fotorama 从 Compass 切换到 Autoprefixer 之后，CSS 文件的大小 减少 了近 20%。

演示

如果您还没有使用任何工具来自动构建资产，请务必查看 Grunt。我强烈建议您开始使用构建工具。这将为您打开一个全新的“糖”语法、节省时间的 mixin 库和有用的图像处理工具的世界。现在，所有开发人员的生产力方法都可以为前端程序员节省大量的神经和时间（选择语言的自由、代码重用、使用第三方库的能力）。

让我们创建一个项目目录，并在 style.css 中编写简单的 CSS

a { }

对于本示例，我们将使用 Grunt。首先，我们需要使用 npm 安装 grunt-autoprefixer

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

然后，我们应该创建 Gruntfile.js 并启用 Autoprefixer

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    'build/style.css': 'style.css'
                }
            }
        },
        watch: {
            styles: {
                files: ['style.css'],
                tasks: ['autoprefixer']
            }
        }
    });
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

此配置启用使用 Autoprefixer 将 style.css 编译到 build/style.css。此外，我们将使用 grunt-contrib-watch，以便每次style.css 发生更改时重新编译 build/style.css。

让我们启动 Grunt 的 Watch

./node_modules/.bin/grunt watch

现在，我们将向 style.css 添加一个 CSS3 表达式并保存该文件

a {
  width: calc(50% - 2em)
}

神奇的事情发生了，现在我们有了 build/style.css 文件。Grunt 检测到 style.css 中的变化并启动了 Autoprefixer 任务。Autoprefixer 发现 calc() 值单位需要 为 Safari 6 添加供应商 前缀。

a {
  width: -webkit-calc(50% - 2em);
  width: calc(50% - 2em)
}

现在，我们将向 style.css 添加一些更复杂的 CSS3 并保存该文件

a {
  width: calc(50% - 2em);
  transition: transform 1s
}

Autoprefixer 已经知道 Chrome、Safari 6 和 Opera 15 需要 为 transition 和 transform 添加前缀。但 IE 9 也需要为 transform 添加前缀，而我们将其用作 transition 中的值。

a {
  width: -webkit-calc(1% + 1em);
  width: calc(1% + 1em);
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
 }

Autoprefixer 旨在为您完成所有繁重的工作。它将检查 Can I Use 数据库，写入所有必需的前缀，并且它也理解规范之间的差异。欢迎进入 CSS3 的未来——不再需要供应商前缀！

下一步是什么？

1. Autoprefixer 支持 Ruby on Rails、Middleman、Mincer、Grunt、Sublime Text。详细了解如何在您的环境中使用它，请查看 文档。
2. 如果您的环境尚不支持 Autoprefixer，请 报告，我会尽力提供帮助。
3. 关注 @autoprefixer，获取有关更新和新功能的信息。