Autoprefixer不支持未来CSS特性，仅根据Can I Use数据库为已实现但需兼容旧浏览器的属性（如flex、transform）自动添加前缀；真正引入未来特性（如:has()、nesting）需配合postcss-preset-env等插件。
Autoprefixer 本身不引入未来 CSS 特性，它只负责为已存在但尚未完全标准化或需兼容旧浏览器的属性添加前缀。真正用来“引入未来特性”的是其他 PostCSS 插件（比如 postcss-preset-env），而 autoprefixer 是其中可选但高度推荐的组成部分。
为什么 autoprefixer 不等于“支持未来 CSS”
很多人误以为装了 autoprefixer 就能用 color-mix()、has() 或子网格（grid-template-rows: subgrid）——其实不能。autoprefixer 的能力边界很明确：它只查 Can I Use 数据库，看某个标准属性在目标浏览器中是否需要前缀。如果某特性根本还不被任何浏览器原生支持（如 container-query 语法本身），加前缀也没用。
-
autoprefixer处理的是「已有实现但需前缀」的属性，例如display: flex→display: -webkit-box - 它不会把
gap编译成margin模拟，也不会把:has()转成 JS 逻辑 - 它默认不处理自定义属性（
--my-color）、嵌套（& .child）或媒体查询新语法
想用未来 CSS？必须配 postcss-preset-env
要安全使用 nesting、custom-properties、logical-properties 等，得靠 postcss-preset-env。它内部会自动调用 autoprefixer，但你仍需显式启用它，否则前缀不会加。
安装命令：
立即学习“前端免费学习笔记（深入）”；
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
npm install postcss-preset-env autoprefixer --save-dev
配置示例（postcss.config.js）：
module.exports = {
plugins: {
'postcss-preset-env': {
stage: 3,
features: {
'nesting-rules': true,
'custom-properties': true
}
},
'autoprefixer': {
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
}
}
}
-
stage: 3表示启用已进入候选推荐（CR）阶段的特性，兼顾实用性与稳定性 -
features字段可精确开关单个实验性能力，避免全量引入带来不可控行为 -
autoprefixer必须独立列出，否则postcss-preset-env默认不触发前缀补全（尤其对@supports块内的属性）
常见错误：browserslist 配置被忽略
即使写了 autoprefixer 插件，如果项目里没有生效的 browserslist 配置，它会 fallback 到默认值（目前是 defaults，约等价于 last 2 versions, not dead），但这个默认值可能和你预期不符，尤其在企业内网环境或需强制兼容 IE11 时。
- 优先在
package.json中声明："browserslist": ["> 0.2%", "not op_mini all", "ie 11"] - 避免同时存在
.browserslistrc和package.json中的配置，PostCSS 会取第一个找到的，容易误判 - 运行
npx browserslist可实时查看当前解析出的目标浏览器列表，验证是否符合预期
构建工具里漏掉 postcss-loader 就等于没配
在 Webpack/Vite/Vue CLI 等环境中，autoprefixer 不会自动生效。它必须通过 postcss-loader（Webpack）或 postcss 插件（Vite）接入 CSS 处理链。
- Webpack 中，确保
postcss-loader在css-loader之前（顺序错误会导致@import无法解析） - Vue CLI 用户注意：
vue-cli-service内置了 PostCSS，但只读取postcss.config.js，不读browserslist字段，所以必须把overrideBrowserslist显式传给autoprefixer - Vite 用户需在
vite.config.ts中确认css.postcss.plugins包含了autoprefixer实例，而非仅依赖其 package.json 配置
最易被忽略的一点：多人协作时，有人删了 postcss.config.js 却没同步更新构建配置，导致整个团队的 CSS 都没加前缀——这种问题不会报错，只会在线上低版本浏览器里静默失效。
