@supports 是 CSS 条件规则，用于声明式控制样式是否生效，不触发网络请求；需全写属性+值，支持 and/or/not 组合，兼容现代浏览器但 IE 完全不支持，不能实现按需加载 CSS 文件，该由 JavaScript 配合 CSS.supports() 实现。
怎么用 @supports 检测浏览器是否支持某个 CSS 特性
@supports 不是“加载样式”的指令，而是 CSS 的条件规则——它只决定某段样式是否生效，不触发网络请求或动态引入文件。想“根据支持情况加载不同 CSS 文件”，得靠 JavaScript 配合 @supports 查询结果来 link 或 import，纯 CSS 做不到。
常见错误现象：@supports (display: grid) { .container { display: grid; } } 写对了，但发现旧版 Safari 仍尝试渲染 grid 样式（实际没效果），误以为检测失效——其实是检测本身成功了，只是浏览器解析时忽略不支持的声明，不报错也不阻断后续规则。
- 检测必须写全属性+值，
@supports (display: grid)和@supports (display: inline-grid)是不同条件 - 不能只写属性名：
@supports (display)❌ 语法错误，会整个规则块被丢弃 - 支持逻辑组合：
@supports (display: grid) and (not (user-select: none))，注意and/or/not前后必须有空格 - 兼容性：Chrome 28+、Firefox 22+、Safari 9+、Edge 12+；IE 完全不支持，所有
@supports规则会被直接跳过
@supports 在真实项目里该放在哪儿
别把它当“polyfill 入口”塞在全局顶层。优先用在组件级局部样式中，尤其是那些强依赖新特性的模块（比如用 aspect-ratio 做卡片、用 container-query 做响应式布局）。
使用场景：你写了一个基于 scroll-snap-type 的轮播组件，但需要给不支持的浏览器 fallback 到 JS 驱动的滚动逻辑。这时 @supports 只负责关掉默认滚动行为，不负责加载 JS——JS 加载由外部逻辑控制。
立即学习“前端免费学习笔记（深入）”；
- 避免嵌套过深：
@supports块里不要再套一层@supports，可读性和维护性陡降 - 不要和
@media混用在同一个选择器下，容易触发意外交互；如需组合，先@supports再@media，顺序影响最终生效逻辑 - 构建工具（如 PostCSS）可能把
@supports当普通规则处理，若开启 CSS 压缩/重排，注意保留括号空格，否则语法破坏
为什么不能用 @supports 实现“按需加载 CSS 文件”
因为 @supports 是声明式规则，运行在 CSS 解析阶段，此时 HTML 已加载完毕，DOM 已构建，浏览器不会因为它成立就去 fetch 新资源。所谓“条件加载”，本质是 JavaScript 的职责。
典型错误：在 CSS 里写 @supports (font-variation-settings: normal) { @import "variable-fonts.css"; } ——@import 在 @supports 内部是无效的，会被忽略，且现代构建工具通常禁止嵌套 @import。
- 真正可行的路径：用 JS 检测
CSS.supports('display', 'grid')，返回布尔值，再动态创建link标签插入 head -
CSS.supports()和@supports语法一致，但 JS 版本支持变量拼接，适合运行时判断 - 注意异步时机：检测要在
DOMContentLoaded后执行，否则document.head可能还不存在 - 服务端无法识别
@supports，SSR 场景下它不参与首屏样式计算，仅客户端生效
容易被忽略的兼容细节和性能代价
@supports 本身开销极小，但滥用会导致样式表体积膨胀、解析时间延长，尤其当大量重复检测同一特性时。
最常被忽略的一点：Android WebView 和部分国内双核浏览器（如 QQ 浏览器 X5 内核）对 @supports 的实现不完整。例如 X5 内核 0.5.0.1 版本支持 @supports (display: grid)，但不支持 @supports (inset: 0)，即便实际渲染可用。
- 测试不能只看 Chrome/Firefox/Safari，真机跑一跑主流 Android WebView 和 iOS UIWebView/WKWebView
- 不要用
@supports替代渐进增强设计——它不是兜底方案，而是增强开关 - 如果目标用户中 IE 占比不可忽略，所有
@supports块外的样式必须是安全 fallback，不能假设它“至少会生效一部分” - 某些 CSS-in-JS 库（如 Emotion）会把
@supports当普通字符串处理，需确认其是否支持原生解析
