CSS 框架 词条目录
前端Wiki/词条/Autoprefixer

Autoprefixer

定义根据 caniuse 数据自动补全浏览器前缀的 PostCSS 插件,让开发者只写标准 CSS

Autoprefixer 解析你的 CSS,对需要兼容的属性自动加上 -webkit-、-moz-、-ms- 等前缀,判断依据是 caniuse 的真实支持数据加上项目里的 browserslist 配置。你永远不需要手动写 -webkit-box-flex,也不用记忆哪些属性处于前缀时代,标准写法交给工具处理,维护前缀这件事在开发体验上几乎消失了。

它把兼容目标交给 browserslist 统一管理(如 last 2 versions、> 1% in CN),构建工具、ESLint 插件共享同一份配置,避免不同环节口径不一。配合 PostCSS 流水线后应放在压缩之前执行——先补全前缀、再压缩,否则可能把补好的前缀又优化掉。它是现代前端构建链的默认成员之一。

HTML
<!-- 你写的:
     .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; } -->
⚠ 常见误区
🔗 相关词条按需加载Sass
← 返回来源章节按需加载