postcss-preset-env不会自动生效，必须显式配置stage、targets或.browserslistrc，否则@container、color-mix()等新语法原样输出，导致老浏览器白屏或错乱；它严格按stage阶段和目标环境条件编译，stage: 3为推荐值，stage: 4会跳过stage 3特性如color-mix()，且features开关需满足对应stage门槛才生效。
它不会自动生效，必须显式配置 stage、targets 或 browserslist，否则你写的 @container、color-mix()、嵌套规则全都会原样输出到生产环境——老浏览器直接白屏或样式错乱。
为什么 postcss-preset-env 配了却没转译新语法？
常见错误是只装了包、加了插件，但没告诉它“要兼容谁”和“接受哪些阶段的特性”。postcss-preset-env 不是开箱即用的魔法开关，它严格按规范阶段（stage）和目标环境（targets 或 .browserslistrc）做条件编译：
-
stage: 3是推荐值：覆盖nesting-rules、custom-properties、container-query等已进入候选推荐的特性；设成stage: 4反而会跳过color-mix()（目前仍是 Stage 3） - 缺
targets或.browserslistrc：插件无法判断是否需要降级，比如aspect-ratio在 IE11 中无等价写法，不声明{ ie: '11' }就不会插入@supportsfallback - 写了
features: { 'nesting-rules': true }却没配stage >= 2：该开关只在满足 stage 门槛后才起作用
Webpack 中 postcss-loader 和 preset-env 的顺序与冲突点
很多人误以为 postcss-preset-env 内置了 Autoprefixer 并可完全替代它，实际在 Webpack 构建链中容易引发重复加前缀或漏处理：
- 必须关闭
postcss-preset-env内置的 Autoprefixer：传入{ autoprefixer: false }，否则和独立autoprefixer插件叠加导致冗余前缀或冲突 - 插件顺序必须是
postcss-preset-env→autoprefixer：前者负责语法转换（如嵌套展开），后者负责属性级补前缀（如display: grid→-ms-grid） - 若你用的是 Vite 或 Next.js 等封装了 PostCSS 的工具，确认它没默认启用另一套 preset —— 多个 preset 同时激活会导致
:has()被跳过或clamp()不生成 fallback
哪些新 CSS 特性它根本不会降级？怎么兜底？
postcss-preset-env 只处理「有标准依据 + 已实现语法解析」的特性，对以下三类不生成任何降级代码：
- CSS 变量（
var(--x)）：它保留原样，不生成color: blue这类 fallback，需手动写color: blue; color: var(--x); - 运行时依赖的特性：如
@container、color-mix()、relative-color-syntax，浏览器不支持就彻底失效，必须配合 JS polyfill 或服务端特征检测 - 未达 Stage 2 的提案：比如部分 Houdini API、
@scroll-timeline（当前 Stage 1），即使开了stage: 1也不会处理，报错或静默忽略
真正可靠的兜底方式只有两个：@supports 手动包裹 + 真机/模拟器跑自动化视觉回归测试。别信“配置完就兼容”的说法——aspect-ratio 在 Safari 15.4 之前不支持，而 postcss-preset-env 不会为你插入 padding-top: 56.25% 这种 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
