gap不生效需先确认父容器display为grid或inline-grid，再检查浏览器兼容性、grid-template-columns是否挤压空间、margin干扰、display: contents影响及隐式轨道生成。
@supports不是浏览器开关，是能力检测器
它不看Chrome还是Safari，只认当前渲染引擎是否支持某个display: grid或gap: 1rem这样的声明对。写错格式、值非法、或括号缺空格，整块规则会被直接丢弃——连降级样式都不会触发。
常见失效写法：@supports(display: grid)❌（缺空格）、@supports (display)❌（缺值）、@supports (inset: 0)❌（Safari 15.4前不识别，整块跳过）。
真正安全的写法必须满足三点：
- 属性与值之间有空格：
@supports (display: grid)✅ - 值是规范中定义的合法字面量或关键字，比如
grid-template-columns: subgrid，不能写grid-template-areas: "a b"（语法错误） - 组合条件用
and时前后必须带空格：@supports (display: grid) and (gap: 1rem)✅，@supports (display: grid)and(gap: 1rem)❌
基础结构必须裸跑可用，否则增强无从谈起
所谓“裸跑”，是指删掉所有CSS和JS后，页面仍能读出完整语义、表单可提交、导航可键盘操作。这是渐进增强的地基，不是加分项。
例如表单控件没写<label for="name"></label>或没包裹<input>，IE11和VoiceOver就无法关联标签与输入框；用nav但靠JS动态插入ul结构，JS失败时整个菜单就消失了。
图片关键信息不能只靠::before伪元素插入文字——IE11不渲染伪元素内容，且屏幕阅读器不会读出。所有核心图文信息必须落在HTML里，alt属性不可省。
@supports要配合分层CSS交付，不能全堆在一个文件里
渐进增强不是“加新功能”，而是按能力分层交付：基础层 → Flex/Grid 增强层 → 容器查询层 → view-transition动效层。每层CSS应物理分离，通过<link rel="stylesheet" media="...">按需加载，避免旧内核下载并解析根本用不到的规则。
典型分层策略：
- 基础层：
float+inline-block+max-width实现多栏，兼容IE9+ - Flex增强层：
@supports (display: flex)仅调整对齐/换行/顺序，不改动DOM结构 - Grid增强层：
@supports (display: grid) and (gap: 1rem)启用网格+间距，避开旧Safari只支持grid不支持gap的问题 - 容器查询层：
@supports (container-type: inline-size)包裹，fallback到@media断点
注意：@supports块内禁止@import，也不能写link[rel="stylesheet"] { }这类选择器——CSS无法操作HTML元素。
IE11和旧Safari是真正的断层点，别指望它们执行@supports
IE11完全不识别@supports语法本身，整条规则静默忽略。如果你只在@supports块里写了display: grid，又没配float或display: flex降级，那IE11用户看到的就是一堆错位的块级元素。
更隐蔽的是Safari 15.4之前：它支持display: grid，但不支持aspect-ratio和inset，而且对@supports条件判断本身也有解析断层——@supports (aspect-ratio: 1/1)可能被整块跳过，不触发任何回退。
所以最易被忽略的实操要点是：降级样式必须写在@supports外部，且必须是真实生效的、老内核能理解的规则；@supports只负责“叠加”，不负责“兜底”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
