记住哪些浏览器厂商前缀必须用于特定的 CSS 规则以支持各种各样的用户,是很有挑战性的。自动添加前缀解决了这个问题。它可以通过 PostCSS 和 autoprefixer 插件启用。autoprefixer 使用 Can I Use 服务来确定哪些规则应该加前缀,并且可以进一步调整其行为。
设置自动添加
实现自动添加需要对当前配置增加一些少量的规则。首先安装 postcss-loader 和 autoprefixer:
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-loader 、autoprefixing 相同。
设置文件如下:
.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 之外的工具。