@supports 在 ie 和 safari ≤16.3 中被完全忽略而非返回 false，因此降级样式必须置于外层作为默认 fallback；js 的 window.css.supports() 更可控，且需确保 fallback 选择器权重一致。
@supports 在 IE 和 Safari ≤16.3 中根本不会执行，不是返回 false，而是整条规则被忽略——这意味着你不能靠它做降级开关，只能用作现代浏览器的增强逻辑。
IE 完全不解析 @supports
IE 所有版本（包括 IE11）都不支持 @supports 语法。遇到该规则时直接跳过，既不报错也不应用内部样式。所以：
- 别在同一个 CSS 文件里混写
@supports和 IE 专用 hack（如*display: inline-block），后者可能被现代浏览器误读 - 若需兼容 IE，必须把降级样式放在
@supports外层，作为默认 fallback -
@supports (display: grid)这类检测对 IE 无意义，它连括号里的语法都识别不了
Safari ≤16.3 静默跳过 selector() 函数
@supports selector(:has()) 在 Safari 16.3 及更早版本中不会进入判断逻辑，整块样式被丢弃。这不是 bug，是 parser 层面未实现该语法：
-
@supports selector(*)同样无效，不能当作“基础能力探测”使用 - 哪怕你写了
@supports not selector(:focus-visible)，Safari 16.3 也会当成 true（因为selector()不被识别，not作用于非法表达式，结果为真） - 真实可用的起点是 Safari 16.4+，Chrome 83+，Firefox 69+；低于这些版本的用户，
@supports就等于不存在
JS 层检测比 CSS 层更可控
当需要精确控制降级行为（尤其是变量、伪类、逻辑属性等），window.CSS.supports() 比纯 CSS 更可靠：
-
window.CSS.supports('color', 'var(--x)')✅ 检测变量使用能力，比@supports (color: var(--x))更易调试 -
window.CSS.supports('margin-inline-start', '1rem')✅ Safari ≤15.6 对inset-inline-start支持不稳定，单独测更准 - 配合 class 注入：
document.documentElement.classList.add('supports-grid')，避免样式权重冲突 - 注意 Opera 使用
window.supportscss别名，需兼容判断
降级样式必须保持选择器权重一致
现代样式和 fallback 样式如果用不同选择器，老浏览器可能因权重差异导致样式覆盖失效：
- 错误：现代用
.card，降级用.legacy .card→ 权重升高，老浏览器反而优先应用 - 正确：统一用
.card，或组件级命名如.Button-root，确保 fallback 能真正替代 - 避免在同一个文件里混用
@supports规则和 JS 动态注入样式，加载顺序不确定易引发竞争 - CSS-in-JS 用户建议关闭
:where()封装，启用legacyLogicalPropertiesTransformer自动转译
真正难处理的不是怎么写 @supports，而是它根本不运行的那些浏览器——它们不会告诉你“我不支持”，只会安静地跳过所有相关逻辑。所以 fallback 必须是默认存在的，而不是靠条件触发出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
