@supports 块本身不解决兼容问题，必须先写降级样式再用其覆盖；常见失效原因包括语法空格缺失、仅写属性名、旧版浏览器不支持或忽略该规则、以及未提供外部fallback。
直接写 @supports 块不会自动解决兼容问题，关键在于「先写降级样式、再用 @supports 覆盖」——漏掉这一步，不支持的浏览器就什么也看不到。
为什么 @supports (display: grid) 写对了却没生效
常见原因不是语法错，而是浏览器压根没进那个块：
-
@supports(display: grid)❌ 缺空格，必须写成@supports (display: grid)✅ -
@supports (display)❌ 只写属性名，@supports检测的是声明对（property + value），不是属性本身 -
@supports (inset: 0)在 Safari 15.4 之前完全不识别，整块被跳过，连 fallback 都不触发 - IE11 不支持
@supports语法本身，所有规则被忽略——如果你的降级样式只藏在@supports外部、又没配float或inline-block等老方案，页面在 IE 里就彻底失联
@supports 块里能写什么、不能写什么
它是个纯 CSS 解析时执行的声明式规则，不是 JS 运行时环境：
- ✅ 可嵌套：
@supports块内可再写@media或另一个@supports - ✅ 可用逻辑运算符：
@supports (display: grid) and (gap: 1rem)，注意and前后必须有空格 - ❌ 不能
@import：CSS 规范禁止在@supports块中使用@import，会报解析错误 - ❌ 不能操作 HTML 元素：
link[rel="stylesheet"] { }这类选择器在@supports内无效
检测 subgrid 或自定义属性这类易错特性
不能靠推断，必须写对声明对：
- 检测 subgrid 要用
@supports (grid-template-columns: subgrid)，不能只靠display: grid推断——Chrome 116 支持 grid 却不支持 subgrid，会错触发 - 检测自定义属性要用
@supports (--css: variables)，不是@supports (color: var(--c))，后者是值计算，不是特性支持判断 - 检测
:has()要配合 JS 打标：[data-has-loaded] .container:has(> .item)是兼容写法，@supports selector(:has(*))仅作覆盖，不可依赖
真正安全的渐进增强写法
核心不是“加新功能”，而是确保基础流可用、增强部分可被干净剥离：
- 降级样式必须写在
@supports外部，比如先定义.card { display: flex; }，再用@supports (display: grid) { .card { display: grid; } } - 别把
@supports当“polyfill 入口”塞在全局顶层；优先用在组件级局部样式中，尤其是强依赖新特性的模块（如用aspect-ratio做卡片、用container-query做响应式布局） - 构建工具（如 PostCSS）可能把
@supports当普通规则处理，若开启 CSS 压缩/重排，注意保留括号空格，否则语法破坏
最容易被忽略的点是：你写的 @supports 条件，可能在某个旧版 Safari 里解析失败，也可能在 IE 里被整个跳过——而你根本没准备对应的 fallback 样式。这时候不是规则写错了，是你没把「基础可用」当第一优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
