旧浏览器静默跳过不认识的css语法，优雅降级关键在于控制加载路径、解析行为和fallback顺序；必须用link外链+media条件加载或构建时拆分现代/legacy样式，避免@import和内联混写。
CSS 本身没有“引入降级”机制，所谓“优雅降级”实际是控制加载路径、解析行为和 fallback 顺序——旧浏览器不报错，但会静默跳过不认识的语法或规则，关键在于别让它丢掉全部样式。
用 @import 加载 CSS 在 IE 中的风险
IE9 及更早版本对 @import 的解析有严重限制：嵌套 @import（即在 imported 文件里再 @import）会被忽略；@import 必须出现在 CSS 文件最开头，前面不能有任何字符（包括注释、空格、BOM）；否则整条语句失效，后续样式可能不加载。
- 避免在主 CSS 里用
@import url("modern.css")引入含:has()或var(--x)的文件——IE11 会加载它，但遇到第一个不支持的语法就停在那行，后面所有声明全丢 - 若必须分拆样式，改用
<link rel="stylesheet">标签 +media属性做条件加载，比如<link rel="stylesheet" href="legacy.css" media="all">和<link rel="stylesheet" href="modern.css" media="screen and (min-width: 1px)"> - 不要依赖
@import实现“现代样式覆盖旧样式”——IE 下它可能根本没加载成功，导致页面白屏或错位
<link> 的 media 和 onload 降级控制
旧浏览器对 media 查询的支持比 CSS 新特性稳定得多。利用这一点，可以把现代样式隔离在仅现代浏览器识别的查询中，同时确保基础样式无条件加载。
- 基础样式放无条件
<link href="base.css" rel="stylesheet">，里面只用 class、id、属性选择器和传统属性（float、background-color等） - 增强样式用
<link href="enhance.css" rel="stylesheet" media="screen and (display: grid)">—— 注意：IE11 不认识display: grid这个媒体特性，整条<link>被忽略，不会加载enhance.css - Chrome/Safari/Edge 支持
onload事件，可配合 JS 检测加载结果：link.onload = () => { /* 插入 JS 逻辑或标记加载完成 */ };，但 IE9–11 不支持该事件，需用link.onreadystatechange兜底
CSS 文件内联 vs 外链的降级影响
把 CSS 写进 HTML 的 <style></style> 标签里，看似简单，但在旧浏览器中反而更容易出问题：IE9–11 对 <style></style> 块内出现的 var()、:where() 等语法同样静默跳过整条声明，且无法用网络工具排查是否加载失败。
- 外链 CSS 文件便于缓存、压缩和构建时处理（如 PostCSS 自动补 fallback），推荐优先使用
- 若必须内联，确保所有
var(--x)都配了静态 fallback，且 fallback 行写在var()行之前（如color: #333; color: var(--text, #333);） - 不要在
<style></style>里混写现代选择器和旧语法（例如.card:has(.active) { display: block; } .card { display: none; }）——IE 会丢掉第一行，第二行生效，但语义已反
构建时预处理比运行时 JS 更可靠
很多人想用 JS 检测 CSS.supports('selector(:has(a))') 后动态插入样式，但 IE11 根本不支持 CSS.supports()，且 DOM ready 前插入 <style></style> 容易触发重排，影响首屏性能。
- 真正稳定的方案是在构建阶段（如 Webpack + PostCSS）把现代 CSS 拆成两份：一份给现代浏览器（含
:has、color-mix()），一份给 legacy（纯 class +rgb()+float） - 用
postcss-custom-properties自动为每个var()补静态值，但注意它不处理简写属性（background必须手动拆成background-color+background-image） - 不要指望“一次编写、到处运行”——
:has()无法被任何工具转译成等效的旧选择器，它的语义（父元素状态依赖子元素）只能靠 JS 添加 class 或重构 DOM 来模拟
最常被忽略的一点：降级不是让旧浏览器“看起来一样”，而是确保它“能用”。很多团队花大量时间让 IE11 的过渡动画接近 Chrome，却忘了按钮点击事件在 data-bs-toggle 写错时根本不会触发——语法层面的兼容性，永远优先于视觉层面的拟合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
