自动添加前缀

记住哪些浏览器厂商前缀必须用于特定的 CSS 规则以支持各种各样的用户,是很有挑战性的。自动添加前缀解决了这个问题。它可以通过 PostCSS 和 autoprefixer 插件启用。autoprefixer 使用 Can I Use 服务来确定哪些规则应该加前缀,并且可以进一步调整其行为。

设置自动添加

实现自动添加需要对当前配置增加一些少量的规则。首先安装 postcss-loaderautoprefixer

npm install postcss-loader autoprefixer --save-dev

启用自动添加的片段:

webpack.parts.js

exports.autoprefix = () => ({
  loader: "postcss-loader",
  options: {
    plugins: () => [require("autoprefixer")()],
  },
});

如果要使用 CSS 抽取 loader,请按如下方式将其连接起来:

webpack.config.js

const productionConfig = merge([
  parts.extractCSS({
    use: ["css-loader", parts.autoprefix()],
  }),
  ...
]);

要确认设置是否有效,我们必须增加一些需要自动添加前缀的内容。调整CSS:

src/main.css

.pure-button {
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

如果您希望支持一些特定的浏览器,您可以设置 .browserslistrc 文件。很多工具都能够用的上这份文件,包括 autoprefixer

你可以通过 Stylelint lint CSS 。它的设置方式和上面的 postcss-loaderautoprefixing 相同。

设置文件如下:

.browserslistrc

> 1% # Browser usage over 1%
Last 2 versions # Or last two versions
IE 8 # Or IE 8

如果你现在构建应用程序(npm run build)并检查构建的 CSS,你会看到 带有 webkit 前缀的规则被去掉了:

.pure-button {
  border-radius: 1em;
}

autoprefixer 能够删除不必要的规则,并根据浏览器定义添加所需的规则。

总结

自动添加前缀是一种方便的技术,因为它减少了开发 CSS 时所需的工作量。您可以在 .browserslistrc 文件中维护一份需要兼容的浏览器名单。然后,工具可以使用这份名单来生成最佳输出。

回顾一下:

  • 可以通过 autoprefixer PostCSS 插件启用自动添加前缀。
  • 自动添加前缀根据您的最小浏览器定义增加缺少的 CSS 定义。
  • .browserslistrc 是一个标准文件,适用于 autoprefixer 之外的工具。
用户头像
登录后发表评论