postcss需配合autoprefixer插件并配置browserslist才能自动添加浏览器前缀；它不降级新特性（如gap、aspect-ratio）、不处理@supports语法兼容性，也无法转换未被广泛支持的css新特性，相关适配必须手动实现或借助其他工具。
PostCSS怎么自动加浏览器前缀
PostCSS本身不加前缀，得靠autoprefixer插件干活。它读取browserslist配置，决定给哪些CSS属性加-webkit-、-moz-这类前缀。
常见错误是装了autoprefixer但没配browserslist，结果什么都没加——比如display: flex在IE10里直接失效。
- 必须在项目根目录放
.browserslistrc或在package.json里写"browserslist"字段，例如：["> 1%", "last 2 versions", "ie >= 10"] -
autoprefixer默认只处理标准语法，对display: grid这种新特性，在IE里根本没法降级，它不会帮你转成float布局——那是你自己的适配逻辑 - 如果用Webpack，确保
postcss-loader的postcssOptions.plugins里明确写了require('autoprefixer')，光装包不注册等于没装
哪些CSS特性PostCSS没法“降级”，只能手动处理
PostCSS不是编译器，它不改语义、不生成替代代码。像gap、aspect-ratio、:has()这些，autoprefixer连碰都不会碰，更别说模拟实现了。
典型场景：你在写一个要兼容IE11的后台系统，用了grid布局+gap，跑完PostCSS后，IE11里格子全叠一起——因为gap压根没被识别，也没 fallback。
-
gap→ 得手动换margin或用padding模拟，不能指望PostCSS自动补 -
aspect-ratio→ 没有对应前缀，也没polyfill能无侵入注入，得用padding-top百分比方案重写结构 -
color-mix()、container queries→ 这些连现代浏览器都还在实现中，PostCSS插件列表里根本找不到对应转换器
为什么开了supports规则，旧浏览器还是报错
@supports本身是CSS原生特性，IE全系不支持，哪怕你用PostCSS处理过，它也不会把@supports (display: grid)转成JS判断再插入样式块——那属于构建时预编译或运行时polyfill的活。
错误现象：开发时看着正常，一开IE11就白屏或样式错乱，控制台没报错但@supports块里的样式全被忽略。
- PostCSS的
postcss-preset-env可以将部分@supports条件“提升”为外层规则（比如把@supports not (display: grid)展开成独立选择器），但它不解决IE不认识@supports语法本身的问题 - 真要兼容IE，得用
postcss-custom-media+postcss-custom-properties这类插件配合JS检测（如css-vars-ponyfill），而不是只依赖PostCSS链 - 别在
@supports里写IE已支持的属性（比如@supports (border-radius)），这会让工具误判，反而删掉本该保留的降级样式
PostCSS配置里最容易被忽略的兼容性开关
很多人以为装上autoprefixer就万事大吉，其实postcss-preset-env的stage和features选项，直接决定哪些语法能被安全转换。
比如开了stage: 3，nesting（嵌套语法）会被转成普通CSS；但若设成stage: 4，它就不管——而stage: 4其实是“已进标准草案”，不代表浏览器已实现。
-
stage: 2最稳，覆盖custom-properties、mediaqueries等广泛支持的特性；stage: 3开始引入nesting、logical-properties，需确认目标浏览器是否支持转换后的输出 -
features里手动开"nesting-rules": true比依赖stage更可控，避免某次升级后突然多出一堆&符号报错 - 如果项目还用了Tailwind，注意它的
content扫描可能绕过PostCSS处理后的类名，导致purgeCSS误删带前缀的规则——得在tailwind.config.js里显式留白/^-.*$/类名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
