最可控的老旧内核降级方式是用 css.supports() 在 js 层做特性检测并配合 css-in-js 动态注入等效样式，对不支持该 api 的环境（如 ie11）兜底全量降级，同时注意选择器权重一致和语法兼容性。
直接用 CSS.supports() 在 JS 层做特性检测，配合 CSS-in-JS 的动态样式注入，是实现老旧内核（如 IE11、旧版 Safari、360/QQ 浏览器等）自动降级最可控的方式。关键不在于“全量模拟新特性”，而在于精准识别缺失能力，并切换到浏览器能理解的等效写法。
先明确哪些特性必须降级
老旧内核常见断层点包括：
- CSS 变量（
--color）：IE11 完全忽略，不能只靠@supports检测（它本身也不支持） -
:where()和逻辑属性（margin-inline-start）：Chrome -
gap、aspect-ratio、display: grid等布局新语法：IE 和 Safari ≤10.1 无法解析 -
animation、transform、filter: opacity()：IE9–10 需要filter: alpha(opacity=)回退
JS 层检测 + 动态样式注入
避免依赖构建时预编译，直接在运行时判断并生成兼容样式：
- 用
CSS.supports('property', 'value')做细粒度检测，例如：CSS.supports('display', 'grid')、CSS.supports('margin-inline-start', '1rem')、CSS.supports('color', 'var(--primary)') - 对 IE11 这类不支持
CSS.supports()的环境，加兜底判断：typeof CSS === 'undefined' || !CSS.supports→ 视为全量降级环境 - 检测通过后，调用 CSS-in-JS 的
useStyle或insertCSS注入现代样式；未通过则注入降级版本（如 float 布局、margin-left、filter: alpha）
与 Ant Design 等库协同降级
若项目使用 @ant-design/cssinjs，可结合其 StyleProvider 实现统一策略：
- 关闭
:where封装：<styleprovider hashpriority="high"></styleprovider>→ 输出普通类选择器，IE11 可解析 - 启用逻辑属性转换：
transformers={[legacyLogicalPropertiesTransformer]}→ 自动把margin-inline-start转成margin-left（LTR 下）或margin-right（RTL 下） - 变量降级不依赖
@supports，改用 class 切换兜底：
检测失败时给加no-cssvars类，再写.no-cssvars .btn { background: #007bff; }
注意降级样式的作用域和优先级
降级样式不是“补充”，而是“替代”：
- 确保降级样式与现代样式的选择器权重一致，避免被覆盖（例如都用
.list，别一个用.list、一个用#app .list） - 避免在同一个组件里混用
@supportsCSS 规则和 JS 注入降级样式，容易因加载顺序或 specificity 冲突导致意外表现 - 对 IE11，所有降级样式必须用它支持的语法：不用
gap，改用margin；不用flex，可用display: table-cell或float
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
