postcss-preset-env不会自动兼容所有未来css，是否转译取决于css写法与目标浏览器实际支持情况；@container和color-mix()等需原生支持的特性默认不降级，必须显式启用features且配合browserslist配置才能生效。
它不会自动把所有“未来 CSS”变成兼容代码，是否转译完全取决于你写的 CSS 和目标浏览器实际支持情况。
为什么加了 preset-env，@container 或 color-mix() 还是没生效
这类特性分两类：能静态降级的（比如 gap → margin），和必须原生支持的（比如 @container、color-mix()）。preset-env 只处理前者。
-
@container没启用？默认不开启，必须显式写features: { 'container-queries': true } -
color-mix()在 Chrome 111+ 直接保留，旧版浏览器不会生成 fallback，得你自己写background: #000; background: color-mix(...) - Safari 15.4 支持
@container但语义不全，preset-env 不管运行时行为差异，只看能否语法转译
stage 参数不是功能开关，而是特性准入门槛
设 stage: 3 的意思是：“只考虑成熟度 ≥ Stage 3（W3C 候选推荐）的特性”，不是“只开 Stage 3 特性”。
-
stage: 0：连@property都尝试解析，但多数无 polyfill，容易报错或无效 -
stage: 2：覆盖嵌套规则、逻辑属性等，适合激进尝鲜 -
stage: 3：最常用，nesting-rules、inset、font-variation-settings等都稳 -
stage: 4：仅已发布标准，color-mix()反而被排除（它仍是 Stage 3）
不配 .browserslistrc，stage 和 features 基本白设
preset-env 的转译决策依赖 browserslist 推导“哪些浏览器不支持”，没这个配置，它根本不知道该不该动你的 :has() 或 aspect-ratio。
- 必须在项目根目录放
.browserslistrc，内容类似：> 0.5%, last 2 versions, not dead, ie 11 - 或者写在
package.json里："browserslist": ["> 1%", "last 2 versions"] - 写了
stage: 3却发现display: grid没变？大概率是 browserslist 没配 IE 11，preset-env 认为“没问题”
想用某个 stage 未覆盖的特性，靠 features 手动开
即使 stage: 3，你仍可单独启用一个 Stage 2 特性，比如 logical-properties-and-values：
require('postcss-preset-env')({
stage: 3,
features: {
'logical-properties-and-values': true
}
})
但要注意：
- 手动开的特性，preset-env 不保证 polyfill 完整，比如
dir属性 fallback 可能不覆盖所有场景 -
nesting-rules: true后，&:hover不会提升选择器权重，原始嵌套语义仍受限 -
custom-properties默认保留变量声明，加{ preserve: false }才会内联替换
真正容易被忽略的是：preset-env 不修复浏览器 bug。Chrome 88–92 的 aspect-ratio 渲染异常，它不会插手；Safari 对 container-type: inline-size 的实现偏差，它也无能为力。这些得靠运行时 polyfill 或手动降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
