不能在HTML中用@import配合supports()实现条件加载，因该语法仅限CSS文件或style块首行使用，且Chrome/Firefox需启用flag才实验支持，Safari/Edge未实现；真正可行的是JS调用CSS.supports()动态注入link标签。
不能在 HTML 中用 @import 配合 supports() 实现条件加载 —— 浏览器根本不允许这么写，写了也完全不生效。
为什么 @import ... supports() 不能出现在 HTML 的 <style> 里
这个语法只被允许出现在「CSS 文件内部」或 <style> 块的**绝对第一行**（前面不能有任何空行、注释或规则），且必须是纯 CSS 上下文。但即便满足位置要求，supports() 在 @import 后面的用法本身就有严重限制：
-
@import url("grid.css") supports (display: grid);这种写法在绝大多数浏览器中会被直接忽略 —— 不报错，也不发起请求，更不会做特性检测 - Chrome 和 Firefox 从 v110+ 起才开始实验性支持该语法，且需启用 flag（如
chrome://flags/#enable-css-import-supports），Safari 和 Edge 完全未实现 - 即使浏览器解析了它，
supports()检测的是「当前 CSS 环境是否支持该声明」，不是运行时 JS 级别的能力查询，无法反映真实渲染行为（比如 Safari 15.4 支持display: grid但不支持subgrid，但@import ... supports(display: subgrid)仍可能误判）
@supports 本身不触发网络请求，别指望它“加载”文件
@supports 是一个 CSS 条件规则，作用仅限于「包裹样式块是否生效」，它不会导致任何额外资源下载：
-
@supports (display: grid) { .container { display: grid; } }—— 只控制.container是否用 grid，不加载任何外部文件 - 你写
@import url("fallback.css")在@supports块里？无效。CSS 规范禁止在条件规则内嵌@import - 想按支持情况加载不同 CSS？必须靠 JavaScript：先调用
CSS.supports("display", "grid")，再动态创建<link rel="stylesheet">标签并插入<head>
真正能落地的替代方案：JS + CSS.supports() 动态注入
这是目前唯一兼容主流浏览器（Chrome 65+、Firefox 62+、Safari 15.4+、Edge 79+）、可预测、可调试的做法：
立即学习“前端免费学习笔记（深入）”；
if (CSS.supports('display', 'grid')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/grid-layout.css';
document.head.appendChild(link);
} else {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/flex-fallback.css';
document.head.appendChild(link);
}
- 注意：不要在
<head>里直接写这段 JS，应放在<body>底部或用defer，避免阻塞 HTML 解析 - 如果要支持 IE，
CSS.supports会返回undefined，需 fallback 到 UA 检测或 class 标记逻辑 - 构建时若用 Webpack/Vite，可用
import(...).then()+assert { type: 'css' }实现模块级条件导入，但需服务端 MIME 配置正确（text/css）
真正麻烦的不是写法，而是「你以为它在加载，其实它什么都没干」——@import ... supports() 目前只是规范草案里的一个符号，不是生产可用的工具。把逻辑交给 JS，路径、时机、错误处理都可控；死磕 CSS 原生方案，大概率卡在 Safari 16.6 的兼容性上动不了。
