HTML裸跑可用是渐进式增强的底线，即去除CSS和JS后页面结构完整、内容可读、表单可提交；语义标签、label绑定、原生交互入口、分层CSS与能力检测均为保障该底线的技术要求。
HTML必须裸跑可用，否则渐进式增强就失效了
如果去掉所有 CSS 和 JS 后页面结构崩塌、内容不可读、表单无法提交，那所谓“渐进式增强”只是空中楼阁。裸跑可用不是加分项，是底线。
常见错误现象：nav 里用 div 拼菜单、form 没写 action 和 method、关键图文靠 CSS ::before 插入、图片没 alt 或 alt="" 却无替代文本。
-
header、nav、main、section、article、footer这些语义标签不是装饰，它们让屏幕阅读器能定位、让搜索引擎理解层级、让无样式渲染仍具逻辑流 - 表单控件必须绑定
label（用for或包裹），否则 IE11 键盘导航和 VoiceOver 都会跳过输入框 - 所有链接和按钮必须有真实
href或type="submit"，不能只靠onclick触发 JS 提交
@supports 不是浏览器开关，而是能力检测开关
写 @supports (display: grid) 然后整个重排版，等于把 IE11 和 Safari 12 直接踢出布局系统。真正安全的用法，是只用它增强局部、不破坏基础流。
容易踩的坑：@supports (display: grid) 单独使用 → Safari 10.1 支持 grid 但不支持 gap，结果卡片间距错乱；嵌套 @supports 在媒体查询外 → 旧设备也得解析整段 CSS。
立即学习“前端免费学习笔记（深入）”；
- 组合检测更稳：
@supports (display: grid) and (gap: 1rem) - 先断点，再能力检测：
@media (min-width: 768px) { @supports (container-type: layout) { ... } } - 别用
@supports控制整页布局，只用于微调：对齐方式、间距、圆角精度等不影响 DOM 流动的属性
CSS分层交付比“一套CSS通吃”更可靠
把 flex 当默认布局、再用 @supports 回退到 float，本质是优雅降级思维。渐进式增强要求基础层就兼容 IE9+，增强层才叠加现代特性。
性能影响：不分层会导致旧设备下载并解析大量无用 CSS；兼容性影响：某些旧内核遇到不认识的属性会跳过整条规则，甚至阻塞后续解析。
- 基础层用
max-width+inline-block+margin实现多栏，确保 IE9 能正确换行 - Flex 增强层用
@supports (display: flex)包裹，仅改justify-content、flex-wrap，不改 HTML 结构 - 容器查询（
@container）必须搭配@supports (container-type: inline-size)，且 fallback 到对应断点的媒体查询
JS 只负责“锦上添花”，不参与核心流程
表单验证、搜索补全、轮播图这些功能，一旦 JS 失效或加载失败，用户就卡住——这不是渐进增强，是功能绑架。
典型错误：fetch 提交表单却不设 form action；用 addEventListener 绑定全部导航，但 nav 里没真实链接；依赖 IntersectionObserver 加载图片，却不提供 src 基础路径。
- 所有交互入口必须有原生 HTML 对应：按钮要有
type="submit"，菜单项要有a href - JS 初始化前先检查能力：
if ('IntersectionObserver' in window)，不满足就走scroll+offsetTop降级方案 - 避免在
DOMContentLoaded里修改关键 DOM 结构——IE11 下可能因脚本加载延迟导致 FOUC 或结构错位
@supports 当开关，却忘了它背后是“不破坏”的约束，不是“有条件启用”的自由。 
