autoprefixer比手写前缀更可靠，因其基于caniuse数据库动态注入目标浏览器真正需要的前缀，避免漏写、错写、冗余及过时前缀，实现精准兼容。
为什么 autoprefixer 比手写前缀更可靠
手写 -webkit-、-moz-、-ms- 这类前缀不仅重复枯燥，而且极易出错：比如漏掉某个浏览器、写错拼写（-webkit-transform 写成 -webkt-transform），或在新版本中继续保留已废弃的前缀（如 -ms-flexbox 在 Edge 17+ 已无需）。更重要的是，不同 CSS 属性支持的前缀版本和时间线差异很大——transform 在 Safari 3.1 就有 -webkit-，而 place-items 在 Chrome 57+ 才原生支持，根本不需要前缀。
autoprefixer 基于 caniuse 数据库动态判断，只加当前目标浏览器范围真正需要的前缀，且会随配置更新自动调整。它不是“全量补全”，而是“精准注入”。
使用建议：
- 别把 autoprefixer 当作 PostCSS 的可选插件——它是现代 CSS 构建链里和
cssnano同级的基础依赖 - 目标浏览器声明必须明确，例如
"supports": ["last 2 versions", "iOS >= 12", "Android >= 9"]，不能只写"last 2 versions"（它默认包含 IE，而你很可能不需要） - 在 Vite / Webpack / Parcel 中，autoprefixer 默认启用，但需确认其配置未被覆盖（比如 PostCSS 配置文件里误删了
autoprefixer）
SCSS 混合宏（@mixin）只适合极少数场景
很多人用 SCSS 写 @mixin flex() { display: -webkit-box; display: -ms-flexbox; display: flex; }，看似省事，实则埋下三个隐患：前缀版本固化（比如始终加 -ms-flexbox，哪怕目标已不包含 IE）、属性遗漏（flex-direction 等子属性没同步处理）、维护成本高（每新增一个 Flexbox 新属性就得补一个 mixin）。
适用场景其实非常有限：
- 需要兼容极老环境（如 iOS 6–9），且构建流程无法接入 PostCSS
- 临时调试时快速验证某条带前缀的声明是否生效（比如
@include transform(rotate(45deg))） - 封装内部约定语法（如
@mixin text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }），和前缀无关
不要为 transition、animation、backdrop-filter 等高频属性写通用 mixin——它们的前缀规则复杂多变，SCSS 静态编译无法应对。
PostCSS + autoprefixer 的最小可行配置 最简配置不是靠插件堆砌，而是确保三件事到位：PostCSS 被调用、autoprefixer 插件注册、browserslist 正确声明。
示例（postcss.config.js）：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['> 0.5%', 'not dead', 'not IE 11']
})
]
}
关键点：
-
overrideBrowserslist优先级高于根目录.browserslistrc，避免多处配置冲突 - 显式排除
not IE 11，因为 autoprefixer 默认仍会为 IE11 加部分前缀（如-ms-transform） - 如果用 Vite，无需单独配 postcss.config.js——直接在
vite.config.js的css.postcss.options.plugins里推入autoprefixer()即可
检查前缀是否真的被正确注入
光看编译后 CSS 文件不够：有些构建工具（如旧版 Vue CLI）会在 dev 模式跳过 PostCSS 处理，导致热更新时样式无前缀；有些 CI 环境读取的是本地 .browserslistrc，而开发机上又用了 package.json 里的字段，造成不一致。
实操验证方式：
- 在生产构建后打开 dist/css/*.css，搜索
-webkit-，确认出现位置合理（比如transform有，display: flex在目标范围内没有） - 用
npx autoprefixer --info查看当前配置实际匹配的浏览器版本列表 - 在 Chrome DevTools 的 Elements 面板中右键某元素 → “Force render layer” 或修改样式，观察 computed 样式里是否出现冗余前缀（如有，说明配置范围太宽）
