@supports 不是按需加载机制，仅控制已有样式是否生效；真正加载新 css 文件需用 javascript 配合 css.supports() 动态插入 标签。
@supports 不是“按需引入”的加载机制，它只控制已有样式块是否生效；想真正加载新 CSS 文件，必须用 JavaScript 配合 CSS.supports() 动态插入 <link> 标签。
为什么 @supports (display: grid) 不能触发 CSS 文件下载
@supports 是声明式规则，运行在 CSS 解析阶段，此时所有 HTML 和样式表已加载完毕。它不发起网络请求，也不改变资源加载流程。
- 写
@supports (display: grid) { @import "grid.css"; }→ 语法非法，整条规则被浏览器忽略 - 把
@import放在@supports块里 → 违反 CSS 规范，Chrome/Firefox/Safari 全部不执行 - 用
media="not all"+@supports切换link[media]→ CSS 无法操作 DOM，<link>标签不可被样式规则选中或修改
怎样正确检测并启用现代 CSS 特性（纯 CSS 场景）
适用于小范围增强、无需额外文件的场景，比如按钮动效、阴影优化、容器查询布局等。核心是「降级先行，增强后置」。
- 先写基础样式：
.card { padding: 1rem; border: 1px solid #ccc; } - 再用
@supports包裹增强样式：@supports (aspect-ratio: 1/1) { .card { aspect-ratio: 1/1; } } - 避免嵌套
@supports：Safari 目前不支持，且可读性差；改用独立块更稳妥 - 检测必须带合法值：
@supports (color-scheme: dark)✅，@supports (color-scheme)❌（语法错误，整块丢弃） - 注意作用域限制：如
color-scheme只能在:root或上生效，检测也得放那儿
如何用 JavaScript 实现真正的“按特性加载 CSS”
这是唯一兼容 Chrome 65+、Firefox 62+、Safari 15.4+、Edge 79+ 的落地方案，可控、可调试、可缓存判断结果。
- 调用
CSS.supports("display", "grid")或CSS.supports("display: grid")（后者更推荐，结尾分号可选但建议带上） - 动态创建
<link rel="stylesheet" href="modern.css">并插入 - 避免重复执行：检测结果可缓存到
const supportsGrid = CSS.supports("display: grid"); - 不要在 React/Vue 组件渲染函数里反复调用
CSS.supports()—— 它不是响应式 API，且可能引发 layout thrashing - 构建工具（如 PostCSS）若压缩 CSS，注意保留
@supports中括号与关键字间的空格，否则语法破坏
@supports 容易被忽略的关键限制
它不保证功能“可用”，只确认语法“被识别”。很多看似通过检测的特性，在真实上下文中依然无效。
-
@supports (container-type: inline-size)返回 true，但父容器没设container属性，照样不生效 -
@supports selector(:has())在 Safari 16.3 及更早版本中静默跳过（不是 false），无法 fallback -
@supports (backdrop-filter: blur(1px))成立，但元素没设置background-color或background，视觉上仍无效果 - IE 完全不解析
@supports，所有规则块被跳过 —— 别指望它做 IE 专属降级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
