PostCSS 依赖插件实现兼容性，autoprefixer 仅加前缀不转译语法，postcss-preset-env 才负责语法降级，二者需按序协作且均受 browserslist 精确控制。
PostCSS 本身不提供兼容性，真正起作用的是插件；没配对插件、没走通处理链、或 browserslist 错了，现代属性就原样输出，不会自动降级或加前缀。
autoprefixer 只加前缀，不转译语法
它只负责在 display: flex 前补 display: -webkit-box 这类前缀，但不会把 gap: 1rem 拆成 margin，也不会把 aspect-ratio: 1/1 降级为 padding-bottom 技巧。caniuse 数据里标记“无需前缀”的属性（比如 Safari 16.4+ 的 gap），autoprefixer 就完全跳过。
- 常见错误现象：
backdrop-filter: blur(4px)在 iOS 15.6 上失效，但 autoprefixer 默认不加前缀——因为 caniuse 认为它“已原生支持”，实际该版本 WebKit 有 bug - 解决思路：这类属性得靠
@mixin或postcss-preset-env中的features显式启用 fallback - 别指望 autoprefixer 处理
:has()、color-mix()、container-query——它们属于语法级新特性，需其他插件
postcss-preset-env 才是真正的“现代 CSS 翻译官”
它基于 CSSDB Stage 分级，把 Stage 2–3 的语法转换成等效旧代码，比如把嵌套规则 .card { &__header { } } 展开为标准 CSS，把 color-mix(in srgb, red 50%, blue) 转成十六进制值。
- 必须显式开启特性：
features: { 'nesting-rules': true, 'color-functional-notation': true }，默认只开 Stage 2 - 注意 stage 参数优先级高于 features：设
stage: 3会自动启用所有 Stage 3 特性，但个别特性仍可单独关掉 - 和 autoprefixer 协同工作：preset-env 先转语法，autoprefixer 再加前缀；顺序不能颠倒
SCSS 和 PostCSS 的协作顺序不能错
PostCSS 插件（包括 autoprefixer 和 preset-env）只认标准 CSS AST，无法解析 $var、@mixin 或 &__item。所以 SCSS 必须先编译，再进 PostCSS 流程。
- Webpack 中：loader 顺序必须是
sass-loader → css-loader → postcss-loader；若postcss-loader在前，会报Unexpected token "$" - Vite 中：默认满足顺序，但若你在
vite.config.ts里写了css.postcss.plugins，就可能覆盖掉内置链路，导致 SCSS 文件没被 sass 插件处理就进了 PostCSS - 想让
.scss文件直通 PostCSS？得配parser: 'postcss-scss'，且仅限于纯 SCSS 语法（不含变量/嵌套），否则照样崩
browserslist 配置决定一切
autoprefixer 和 preset-env 都严格按 browserslist 输出结果干活。写 "last 2 versions" 可能拉进 Safari 18，但你真实用户还在 iOS 16.4；写 "iOS >= 16.4" 才能确保 -webkit-backdrop-filter 被生成。
- 验证方法：运行
npx browserslist看匹配列表，再跑npx autoprefixer --info查目标属性是否被标记为“needs prefix” - 避免多处维护：把配置写在
package.json的browserslist字段里，比.browserslistrc更可靠 - 慎用
> 1%：全球占比 >1% 的 iOS 15.0，在部分低端 iPhone 上对aspect-ratio支持不稳定，应显式限定最小可用版本
最容易被忽略的点：构建工具是否真把你的 CSS 文件送进了 PostCSS。Vite 5+ 默认启用，但显式配置 css.postcss 反而会关掉它；Webpack 里漏掉 importLoaders: 1，@import 进来的 Bootstrap Sass 输出就绕过整个前缀流程——这时候看 postcss.config.js 写得再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
