真正的回退架构必须在样式层完成隔离、降级与兜底，用@supports做功能检测并成对书写增强与降级规则，禁用不可靠前缀和属性，以data属性驱动状态，为旧系统提供确定性渲染边界。
旧系统不支持现代CSS特性时，不能靠“加个polyfill”或“等用户升级浏览器”来解决高可用问题。真正的回退架构必须在样式层就完成隔离、降级与兜底，而不是把兼容性当成一个可选的优化项。
用 supports() 做功能检测，而不是用 UA 判断浏览器版本
UA字符串不可靠，IE11 和 Edge 18 都可能上报 Trident，但后者支持 @supports，前者不支持；Chrome 63 支持 @supports 却不支持 container-query。硬编码版本判断会漏掉真实能力边界。
正确做法是：用 @supports 包裹现代特性，并在其外部提供明确的降级规则：
/* 主布局：Grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<p>@supports (display: grid) and (grid-template-rows: subgrid) {
.grid { grid-template-rows: subgrid; }
}</p><p>/<em> 回退：Flex，必须显式写在 @supports 外 </em>/
@supports not (display: grid) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * { flex: 1 1 30%; }
}</p>
关键点：
-
@supports必须成对出现：@supports (X)写增强，@supports not (X)写降级，不能只写一半 - 不要嵌套
@supports多层判断——CSS解析器不保证嵌套条件的执行顺序，容易产生意外交互 - 所有降级样式必须能独立生效，不能依赖现代特性的副作用（比如不能假设
grid已经设置了gap，再在@supports not里补margin）
把 Normalize.css 换成 Modern-Normalize.css 并裁剪掉冗余规则
Normalize.css 为 IE8+ 设计，保留了大量针对已淘汰引擎的修复逻辑（如 input[type="search"] 的 WebKit 重置），这些规则在旧系统（如 Windows 7 + IE11）上反而引发渲染冲突。而 Modern-Normalize.css 默认只覆盖 Chromium 80+/Firefox 78+/Safari 14+ 的默认样式，对 IE11 是“不兼容即不管”——这恰恰是你需要的起点。
实操建议：
- 用
Modern-Normalize.css作为基线，然后手动补全 IE11 必需的几条规则（如button的vertical-align: middle、img的max-width: 100%） - 删掉所有带
-ms-前缀的规则——Autoprefixer 已不再生成它们，IE11 对这些前缀的支持也不一致（比如-ms-flexbox在某些文档模式下被忽略） - 禁用
font-smooth、text-rendering等在旧系统上触发重排的属性，它们在 IE11 中实际无效，却会干扰渲染管线
用 data- 属性驱动状态，避开 :has() 和容器查询的缺失
IE11 和旧版 Edge 不支持 :has()、容器查询、aspect-ratio，但业务状态不会因此消失。与其让 JS 强行 patch 样式，不如把状态提前注入 DOM：
然后用纯 CSS 控制表现：
.form [data-valid="false"] + button,
.form [data-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
<p>.form [data-valid="true"] + button {
opacity: 1;
pointer-events: auto;
}</p>
这种写法的优势：
- 完全不依赖 JS 运行时，服务端可直出初始状态
- 避免在旧系统中因 JS 报错导致整个表单交互失效
- 状态变更由业务逻辑控制（比如表单校验通过后改
data-valid值），CSS 只负责映射，职责清晰
滚动条、表单控件、焦点轮廓必须提供独立样式块并禁用 appearance
旧系统对 scrollbar-width、accent-color、focus-visible 等零支持，且原生控件样式差异极大（IE11 的 select 下拉箭头无法隐藏，Firefox 的 range 滑块不可定制）。这时候统一用 appearance: none 是危险的——它在 IE11 中被忽略，在 Safari 12 中部分生效，反而造成样式断层。
正确策略：
- 为滚动条单独建
_scrollbar-old.css，只用::-webkit-scrollbar规则（Chrome/Safari 旧版），并用@supports selector(::-webkit-scrollbar)包裹，其他浏览器走原生 - 表单控件降级到最简语义结构：
input+label组合，放弃所有伪元素装饰，用border和background模拟状态 - 焦点管理强制用
:focus而非:focus-visible，并在 JS 中监听keydown来动态加 class，确保键盘用户可访问
最易被忽略的一点：旧系统中，任何依赖 calc() 嵌套、vw/vh 动态单位、或 transform 的动画，在页面缩放或高 DPI 下极易失准。回退架构不是“让旧系统跑新代码”，而是承认它的渲染边界，并在那个边界内做确定性设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
