postcss本身不兼容旧浏览器，真正起作用的是插件链和明确的browserslist配置；必须配置browserslist（如“.browserslistrc”或package.json字段），否则autoprefixer等插件默认仅适配最新版本，导致ie11等旧浏览器失效。
PostCSS 本身不兼容旧浏览器，它只是个处理管道；真正起作用的是插件链和明确的浏览器目标配置。没配 browserslist，所有 autoprefixer、custom-properties 等插件都等于没装。
必须配 browserslist 才能生效
PostCSS 插件（如 autoprefixer、postcss-preset-env）依赖 browserslist 配置来判断“哪些特性要加前缀”“哪些要降级”。不配，它们就默认只处理最新几个版本，旧浏览器照样报错或失效。
- 推荐在项目根目录放
.browserslistrc文件，内容例如："> 1%"<br>"last 2 versions"<br>"ie >= 11"<br>"safari >= 14.1"
- 也可以写进
package.json的browserslist字段，效果一样 - 别用模糊表述如
IE或old Safari——browserslist不识别这些，得写成ie >= 11这类标准语法 - 运行
npx browserslist可实时查看当前配置匹配到的实际浏览器列表，验证是否真覆盖了你要支持的版本
postcss.config.js 里插件顺序不能错
插件执行顺序直接影响降级结果。比如变量替换必须在加前缀之前完成，否则 var(--color) 被 autoprefixer 处理后可能变成 -webkit-var(--color)，再交给 postcss-custom-properties 就无法识别了。
- 正确顺序示例：
module.exports = {<br> plugins: [<br> require('postcss-custom-properties')({ preserve: false }),<br> require('autoprefixer'),<br> require('postcss-preset-env')({ stage: 3 })<br> ]<br>}; -
postcss-custom-properties必须放在autoprefixer前面，否则变量不会被静态替换 -
postcss-preset-env放最后，它负责把gap、aspect-ratio等新语法转成可识别形式（但注意：它不模拟语义，仅做语法转换） - 如果用了
Flex Gap Polyfill，它必须单独引入且位置靠前，因为它依赖原始gap值做 margin 计算
哪些 CSS 特性根本没法靠 PostCSS “自动降级”
PostCSS 是语法处理器，不是布局引擎。它不生成替代 DOM 结构、不注入 JS、不重写盒模型逻辑。以下特性一旦用了，就必须手动兜底：
-
gap、row-gap、column-gap：autoprefixer 完全不碰，postcss-preset-env也不转换语义，必须用Flex Gap Polyfill插件或自己写 margin fallback -
:has()、color-mix()、@container：连语法转换都不支持，caniuse 上标红的就别指望 PostCSS 解决 -
@supports规则本身：IE 全系不认识这个 at-rule，PostCSS 不会把它拆成 JS 判断 + class 切换，你得自己加no-csssupports类配合 JS 检测 -
aspect-ratio：没有前缀，也没有 polyfill 能无侵入实现，只能用padding-top百分比方案重写结构
最容易被忽略的一点：构建后一定要打开输出的 CSS 文件，搜索 var(、gap:、@supports 这些关键词。如果还存在，说明要么插件没生效，要么配置没加载，要么该特性本就不在 PostCSS 处理范围内——这时候别调配置，得换思路写 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
