html渐进式增强的核心是确保旧浏览器不崩溃，而非仅让新浏览器更好看；header、nav、main等语义标签必须裸跑可用，即去除css和js后仍能读、能导航、能提交，这是底线而非加分项。
HTML渐进式增强不是“让新浏览器更好看”，而是确保旧浏览器不崩溃——header、nav、main这些语义标签必须裸跑可用，否则所有增强都建立在流沙之上。
HTML必须裸跑可用：去掉CSS和JS后仍能读、能导航、能提交
这是渐进式增强的底线，不是加分项。一旦失效，@supports再精细也救不回结构崩塌的页面。
-
nav里不能用div拼菜单，必须是nav > ul > li > a结构，否则IE11键盘Tab无法聚焦到链接 -
form必须带action和method属性，哪怕只是action="/fallback"；没有它们，JS提交失败时用户就卡死 - 关键图文信息不能靠
::before伪元素插入，IE11不渲染，且屏幕阅读器完全读不到 -
img的alt不能为空（alt=""），也不能缺失；若图片承载核心信息，必须在alt中完整描述，或在邻近p中重复说明
IE8–IE11兼容：html5shiv只是起点，display:block才是关键
只引入html5shiv远远不够。IE8–IE10识别了header等标签，但默认按inline渲染，布局直接塌陷。
- 必须手动加这段CSS（放在所有自定义样式之前）：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } - 条件加载更稳妥：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 避免用
document.createElement('main')动态创建——漏写一个标签，整块区域就不可访问
@supports不是浏览器开关，而是能力检测开关
它检测的是“当前引擎是否支持该CSS特性”，不是“是不是Chrome”。滥用会导致Safari 10.1这类部分支持grid但不支持gap的浏览器出现间距错乱。
- 别写
@supports (display: grid) { ... }然后重排整个布局——这等于把IE11和Safari 12踢出基础流 - 安全做法是组合检测：
@supports (display: grid) and (gap: 1rem)，只用于微调卡片间距、对齐方式等不影响DOM流的属性 - 嵌套时先断点再检测：
@media (min-width: 768px) { @supports (container-type: layout) { ... } }，避免小屏设备解析无用规则 - 基础层必须用
float+inline-block+max-width实现多栏，确保IE9+可换行；flex增强层仅包裹justify-content类调整，不改HTML结构
JS只负责锦上添花，绝不参与核心流程
Stimulus这类框架之所以适合渐进增强，正因为它把JS行为绑定在已有HTML上，而非替代它。
- 表单验证不能只靠
addEventListener('submit', ...)，input必须有required、type="email"等原生属性，让不支持JS的环境也能触发基础校验 - 标签页切换的基础版本应使用
a[href="#tab1"]锚点跳转+CSS:target控制显隐；JS只加平滑滚动和history.pushState - 剪贴板功能必须用
document.queryCommandSupported("copy")或'clipboard' in navigator检测，不支持时隐藏按钮，而非让点击报错
最容易被忽略的一点：渐进式增强的“增强”二字，常让人误以为重点在新特性上。其实真正的复杂点在于——你得同时维护三套逻辑：裸HTML的可访问性流、CSS分层的能力边界、JS的存在性兜底。少一环，旧设备就不是“体验差”，而是“不可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
