Autoprefixer 解析你的 CSS,对需要兼容的属性自动加上 -webkit-、-moz-、-ms- 等前缀,判断依据是 caniuse 的真实支持数据加上项目里的 browserslist 配置。你永远不需要手动写 -webkit-box-flex,也不用记忆哪些属性处于前缀时代,标准写法交给工具处理,维护前缀这件事在开发体验上几乎消失了。
它把兼容目标交给 browserslist 统一管理(如 last 2 versions、> 1% in CN),构建工具、ESLint 插件共享同一份配置,避免不同环节口径不一。配合 PostCSS 流水线后应放在压缩之前执行——先补全前缀、再压缩,否则可能把补好的前缀又优化掉。它是现代前端构建链的默认成员之一。
<!-- 你写的:
.box { display: flex; user-select: none; }
Autoprefixer 处理后:
.box { display: -webkit-box; display: -ms-flexbox;
display: flex;
-webkit-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none; } -->