postcss-preset-env 需显式配置 stage（推荐3）和 targets（如 {chrome: '45', ie: '11'}），并启用 features（如 'container-query': true）；它不处理 CSS 变量降级，需手动写 fallback；须与 Autoprefixer 按 preset-env→autoprefixer 顺序配合，且关闭 preset-env 内置 autoprefix；clamp()、aspect-ratio 等需 @supports + 静态 fallback 或运行时 polyfill；漏降级需自动化检查+真机测试兜底。
postcss-preset-env 怎么配才真正生效
它不是装上就自动兼容一切新语法的“万能开关”，必须明确 stage 和 targets 才能触发转换。stage 太低（比如 stage: 1）可能跳过 nesting、container queries 等常用特性；targets 缺失或写错（如漏掉 ie: '11'），会导致现代语法原样输出，老浏览器直接失效。
- 必须显式声明目标环境：
targets: { chrome: '45', ie: '11', safari: '10' }，仅靠.browserslistrc不一定被 postcss-preset-env 读取（尤其在非 Webpack 场景） -
stage: 3是最稳妥起点——覆盖 nesting、custom properties、logical properties 等已广泛提案的特性；stage: 4（即已进入标准）通常无需转换，但部分属性（如color-mix()）仍需 polyfill - 启用特定特性要单独打开，例如容器查询默认不启用：
features: { 'container-query': true }，否则@container规则会被忽略而非报错
为什么写了 var(--c)，IE11 还是白屏或错色
CSS 变量本身无法被降级成静态值——postcss-preset-env 不会把 background-color: var(--primary) 自动替换成 background-color: #007bff。它只处理语法结构（如 nesting、@layer），不解析变量依赖或注入 fallback 值。
- 必须手动写后备值：
background-color: #007bff; background-color: var(--primary);，靠层叠让旧浏览器用前者、新浏览器覆盖为后者 - 不要依赖插件“智能补全”，
postcss-custom-properties插件虽能内联变量，但它默认禁用（需设preserve: false），且对跨@import或动态 JS 注入的变量无能为力 - 如果变量来自 JS 设置（
el.style.setProperty('--c', 'red')），IE11 根本不识别该 API，此时连后备值都救不了——得配合css-vars-ponyfill这类运行时方案
Autoprefixer 和 postcss-preset-env 能不能一起用？顺序怎么排
能，而且推荐一起用，但顺序绝对不能错：Autoprefixer 必须放在 preset-env 之后。因为 preset-env 输出的是带现代语法（如 display: flex）的 CSS，Autoprefixer 才能据此加前缀；如果反过来，preset-env 可能将已加前缀的代码误判为“已兼容”而跳过转换。
- 正确顺序示例（
postcss.config.js）：[postcss-preset-env({ stage: 3 }), autoprefixer({ overrideBrowserslist: ['> 0.5%', 'IE 11'] })] - 避免重复劳动：关闭 preset-env 内置的 autoprefix 行为，加
autoprefixer: false配置项，防止两套前缀逻辑打架 - 注意 Autoprefixer 的
overrideBrowserslist和 preset-env 的targets应保持一致，否则前缀加了但 nesting 没转，或反之——构建产物会出现“半吊子兼容”
clamp()、aspect-ratio 这类函数/属性怎么安全降级
它们属于“有无支持”的硬分界，@supports 是唯一可靠手段，但 IE11 连 @supports 都不支持，所以必须双管齐下：构建期静态 fallback + 运行期条件加载。
立即学习“前端免费学习笔记（深入）”；
- 静态 fallback 示例：
width: 300px; width: clamp(200px, 80vw, 600px);，IE11 用第一行，Chrome 用第二行 - 对
clamp()等数学函数，可引入css-math-polyfill，但它只在运行时生效，且需确保脚本在所有 CSS 加载后执行，否则闪屏 - 像
aspect-ratio这种无 CSS fallback 的属性，别指望 PostCSS 插件能生成 padding-top 技巧——必须手写媒体查询或 JS 计算，或者直接用aspect-ratio: 16/9;+@supports not (aspect-ratio: 16/9) { ... }降级到padding-bottom方案
真正麻烦的从来不是“怎么写降级”，而是“哪些地方漏了降级”。比如一个用了 inset-block 的弹窗组件，开发时在 Chrome 里完美，上线后发现 IE11 里位置彻底错乱——这种问题不会报错，只会静默失效。得靠自动化检查（如 stylelint 的 plugin/no-unsupported-browser-features）+ 真机回归测试兜底。
