PostCSS 8 不自动向下兼容，必须手动配置插件、targets 和 stage，严格控制顺序与参数，否则 gap、var() 等新特性原样输出，IE11 直接失效。
PostCSS 8 不会自动向下兼容，必须手动配对插件、显式声明目标浏览器、并严格控制插件顺序和参数——漏掉任一环，gap、var()、@nest 就原样输出，IE11 直接失效。
必须显式配置 targets 和 stage，不能只靠 .browserslistrc
postcss-preset-env 不是“开箱即用”的降级开关。它默认不处理任何新语法，除非你明确告诉它：stage: 3（覆盖 nesting、custom-properties、logical-properties 等已稳定特性），以及具体到版本号的 targets（如 { chrome: '45', ie: '11', safari: '10' }）。
- 写
["last 2 versions"]会导致 IE11 被排除，@container或aspect-ratio就不会被识别和转换 - 必须关掉内置
autoprefixer：autoprefixer: false，否则和你单独配的autoprefixer插件冲突 - 如果项目同时用了
postcss-nesting，就别在postcss-preset-env里设nesting: true，二者底层重复，会报错
var() 在 IE11 中不是“颜色错”，而是整条声明被静默丢弃
仅靠 background: var(--c, #000) 或 @supports 无法兜底——IE11 根本不认识 var() 语法，也不支持 @supports，连解析都跳过。
- 必须用
postcss-custom-properties插件，并设preserve: false，它才会把background: var(--primary)替换为background: #007bff并删掉原始行 - 变量必须定义在
:root，且值为静态常量（--gap: calc(1rem)❌ 不支持） - 插件顺序必须在
autoprefixer之前，否则前缀可能加到已替换的声明上，位置错乱 - 构建后 CSS 若经
cssnano处理，需关掉discardDuplicates，否则重复的 fallback 声明会被删掉
gap、:has()、aspect-ratio 这些根本不会被 PostCSS 自动降级
PostCSS 插件链不改语义、不生成替代布局逻辑。它不会把 gap: 20px 变成 margin 计算，也不会把 aspect-ratio: 16/9 转成 padding-top 百分比方案。
立即学习“前端免费学习笔记（深入）”；
-
gap必须单独引入flex-gap-polyfill插件，它才用负 margin + 子项 margin 模拟效果 -
:has()目前无成熟 PostCSS 插件可降级，只能手动重写选择器或用 JS 补充逻辑 -
@supports规则本身不被 IE 支持，工具最多把它“展开”成普通规则，但无法让 IE 执行条件判断——真实兜底要靠 JS 检测 + 类名切换（如document.documentElement.classList.add('no-cssvars')）
插件没生效？先确认 PostCSS 真的跑起来了
很多兼容性问题其实不是插件配错了，而是构建流程压根没触发 PostCSS。
- Vite 5+ 默认启用 PostCSS，但如果你在
vite.config.js里写了css.postcss，就会覆盖默认配置，导致postcss.config.js被忽略 - Webpack 中，
postcss-loader必须放在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS 流程 - 最简单的验证法：在
postcss.config.js里临时加一行require('xxx-missing')，重启构建——不报错说明文件根本没加载 - 插件路径必须正确：
require('postcss-nesting')不能写成require('postcss-nested')，两者语法不兼容，混用直接编译失败
最容易被忽略的是：PostCSS 只负责构建时转换，它不解决运行时环境缺失的问题。比如 color-mix() 在 Chrome 117 才支持，即使你配了 targets: { chrome: '110' }，插件也不会处理——因为 stage 4 提案不在转换范围内。这类特性要么等浏览器普及，要么引入运行时 polyfill，不能只盯着 postcss-preset-env。
