PostCSS preset-env 按 browserslist 配置和实际 CSS 决定转译，不自动降级所有新特性；需正确配置目标浏览器、显式启用实验特性（如 container-queries），并注意运行时支持与构建环境一致性。
PostCSS preset-env 不是魔法，它只转译你明确需要的特性
它不会自动把所有“未来 CSS”变成兼容代码，而是按 browserslist 配置 + 你写的实际 CSS 决定是否转译。比如写了 :has()，但目标浏览器全不支持，它才转；写了 color-mix() 且目标里有 Chrome 111+，它就直接保留——不转。
常见错误现象：display: grid 没变，但项目里老 IE 还在跑 → 因为 browserslist 没配 ie 11，preset-env 根本不认为这是个问题。
- 务必在项目根目录配好
.browserslistrc或package.json里的browserslist字段，例如："> 0.5%, last 2 versions, not dead, ie 11" - 不用手动开/关单个特性（如
stage: 3），preset-env 默认按标准阶段自动启用已达到对应成熟度的语法 - 想强制启用某个实验性特性（比如
@container），得显式加features配置项，否则即使写了也不转译
怎么让 @container、color-mix() 这类新语法真正生效
这些特性依赖运行时环境支持，不是光靠 PostCSS 转译就能用。preset-env 只处理「能静态降级」的部分，比如把 gap 转成 margin；但 @container 没有等价的 CSS 替代方案，它要么原生支持，要么靠 JS polyfill 补。
使用场景：你写了一个容器查询组件，本地开发看到效果了，但上线后在 Safari 15.4 下失效 → 因为 Safari 15.4 支持 @container 但不支持 container-type: inline-size 的完整语义，而 preset-env 不会插手这种运行时行为差异。
立即学习“前端免费学习笔记（深入）”；
-
@container类特性：确保目标浏览器版本 ≥ 特性首次稳定支持的版本（查 caniuse），否则必须引入container-query-polyfill -
color-mix()、relative-color-syntax：Chrome 111+ 原生支持，旧版只能 fallback 到预设色值，preset-env 不生成替代规则 - 配置示例（
postcss.config.js）：module.exports = { plugins: [ require('postcss-preset-env')({ features: { 'container-queries': true, 'custom-properties': true } }) ] }
为什么加了 preset-env，aspect-ratio 还是没兼容老 Chrome
aspect-ratio 是个典型“有转译方案但默认不启用”的特性。preset-env 认为它属于 stage 3，且已有广泛实现，所以默认保留原写法；但它在 Chrome 88–92 存在渲染 bug，而 preset-env 不修复 bug，只做语法降级。
错误现象：样式写了 aspect-ratio: 16/9，Chrome 90 下图片被拉伸 → 并非没转译，而是 preset-env 认为该特性“可用”，没触发 fallback 逻辑。
- 要强制降级，得手动开启
features中的'aspect-ratio'并设preserve: false - 更稳妥的做法是配合
postcss-aspect-ratio插件，它专门用padding-top+position模拟比例，和 preset-env 协同工作 - 注意：开启
preserve: false后，新浏览器也会失去原生aspect-ratio的布局优势（比如 flex 容器内自动对齐）
build 后 CSS 体积变大？别怪 preset-env，先看 autoprefixer 和 features 是否重叠
preset-env 内置了 autoprefixer，如果你又单独装了 autoprefixer 并在配置里重复引用，会导致同一组属性被加多遍前缀（比如 -webkit-box-orient 出现两次）。
性能影响：重复前缀本身不卡渲染，但会让 CSS 文件多出 5–10% 无意义字符，Gzip 后仍占带宽；更麻烦的是，某些旧版构建工具（如 Webpack 4 + css-loader）会因重复插件导致 source map 错乱。
- 检查
postcss.config.js：删掉独立的require('autoprefixer')，只留postcss-preset-env - 如果必须微调 autoprefixer 行为（比如禁用某条规则），用 preset-env 的
autoprefixer选项：autoprefixer: { grid: 'no-autoplace' } - 开启
debug: true可在终端看到每条 CSS 规则是否被转译、为何被转译——比猜省半小时
browserslist 配在 CI 环境或 Docker 构建镜像里，导致本地开发和线上构建用的兼容目标不一致。一个 aspect-ratio 在你电脑上正常，在部署服务器上突然崩，大概率是这个原因。 
