postcss 是一个基于 javascript 插件的 css 后处理器，本身不提供功能，需通过插件（如 autoprefixer、postcss-preset-env）实现自动加前缀、转换现代 css 语法等功能；其核心是解析 css 成 ast，经插件修改后生成兼容性更强的 css 输出。
PostCSS 本身不处理 JavaScript，更不会把现代 CSS “降级为 ES5 样式”——这是个常见误解。CSS 和 JS 的编译目标完全独立，es5 是针对 JavaScript 的 target，和 CSS 兼容性无关。你要的其实是：让现代 CSS（如 gap、aspect-ratio、var(--x)、嵌套语法）在旧浏览器（尤其是 IE11）中能基本可用。
为什么 autoprefixer 加了前缀，IE11 还是不认 display: flex？
因为 Autoprefixer 默认只加现代前缀（-webkit-、-moz-），对 IE10/11 的旧 Flexbox 语法（display: -ms-flexbox）必须显式启用：
-
browserslist中必须包含"IE 11"或"ie >= 11"，运行npx browserslist确认输出里真有ie 11 - Autoprefixer 配置里要传
{ flexbox: 'no-2009' }，否则不会生成-ms-前缀 - 插件顺序不能错：如果用了
postcss-flexbugs-fixes，它必须放在autoprefixer之前，否则 Safari 12.1 等的 Flex 渲染 bug 不会被修复
postcss-preset-env 要怎么配才真正转出兼容代码？
它不是“装上就自动兼容”，stage 和 targets 必须显式写死，否则大部分现代语法原样输出：
-
stage: 3是最稳妥起点，覆盖:is()、custom-properties、logical-properties，但不包括nesting-rules（需手动开features: { 'nesting-rules': true }） -
targets必须明确声明，例如{ ie: '11', chrome: '45', safari: '10' }；仅靠.browserslistrc在非 Webpack 场景下可能被忽略 - 容器查询（
@container）默认不启用，得加features: { 'container-query': true }，否则规则直接被跳过 - 别和
cssnano冲突：如果压缩后样式失效，检查它是否启用了内置autoprefixer，必须设autoprefixer: false
var(--x) 在 IE11 里为什么整条声明都消失了？
IE11 静默丢弃所有含 var() 的声明，不是“没生效”，而是解析器直接跳过整行。所以不能依赖 var(--x, #fff) 或 @supports：
- 必须用
postcss-custom-properties，且配置preserve: false，才能把background: var(--primary)替换成background: #007bff - 变量必须定义在
:root且值为静态常量（不能是calc(--gap + 4px)或其他变量拼接） - 后备写法只能是两行：
background: #007bff; background: var(--primary);，顺序不能反——IE 取第一行，现代浏览器覆盖第二行 - JS 动态设置的变量（
el.style.setProperty('--c', 'red')）完全无法被 PostCSS 捕获，这部分必须用css-vars-ponyfill运行时兜底
真正难的不是配插件，而是搞清哪些特性根本没法自动降级：gap、aspect-ratio、:has()、color-mix() 这些，PostCSS 插件列表里没有对应转换器，必须手动重写布局或引入 polyfill。构建后务必打开产出 CSS 文件搜索 var(、gap、@container，确认它们真的被处理掉了——否则白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
