html结构必须能“裸跑”，即去除css和js后仍具备完整信息层级、可读性和基本可操作性，这是渐进增强的底线而非优化项；所有表单input须有显式label绑定，导航须用语义化nav/ul/li/a结构，图片关键信息必须通过alt承载，@supports仅限块或.css文件中使用，ie条件注释已淘汰，基础层css不可依赖flex/grid，容器查询需用@supports包裹并回退至媒体查询。
HTML结构必须能“裸跑”
去掉所有 CSS 和 JS 后，页面仍要具备完整信息层级、可读性和基本可操作性——这不是优化项，而是渐进增强的底线。很多团队以为加个 display: none 或用 JS 渲染菜单就够了，结果 IE11 用户点不开导航、VoiceOver 读不出表单字段。
-
form中每个input必须有显式label，且通过for属性或包裹方式绑定，否则键盘 Tab 导航和屏幕阅读器会跳过该控件 - 导航必须用语义化
nav+ul+li+a，JS 只负责加class控制展开/收起，不能替代 DOM 结构 - 图片关键信息不能只靠
::before/::after插入文字，IE11 不渲染伪元素内容，alt必须承载全部语义
@supports 只能写在 CSS 上下文里
@supports 是 CSS 解析器在加载样式表时同步执行的声明式规则，不是 JS API，也不能当 HTML 标签用。写在 <script></script> 里、<style></style> 外、或者 <link> 的 media 属性中，浏览器直接忽略或报错。
- 合法位置只有两个：
<style></style>块内部，或外部.css文件中 - 想动态加载某套 CSS？得用 JS 调用
window.CSS.supports()判断后切换link.media - 常见错误：
@supports (display: grid)缺少空格或括号紧贴关键字（如@supports( display: grid )），整块会被丢弃
别用条件注释给 IE 加 class
IE 条件注释（如 <!--[if IE 8]><html class="ie8"><![endif]-->）已在 Edge Legacy 中被移除，且现代构建流程（Webpack/Vite）默认不处理这类注释，HTML 压缩工具还会删掉它们。
- 2026 年实际支持 IE 的场景极少，真需兼容也应靠
@supports+ 降级 CSS 实现，而非依赖 UA 检测 - 若遗留系统强制要求 IE6–8 支持，优先用
no-jsclass + JS 检测能力，再动态加 class，避免 HTML 被污染 - 所有基于
lte7/no-css3的 class 命名已无维护价值，CSS 中对应规则几乎无人测试
基础层 CSS 不能依赖 Flex/Grid
把 display: flex 当默认布局，等于主动放弃 IE11 和旧 Safari 用户——它们支持 flex 但不支持 gap、flex-wrap: wrap-reverse 等关键特性，导致布局错乱或空白。
- 基础层用
float+inline-block+max-width实现多栏，兼容 IE9+；Flex/Grid 仅用于增强层 - 增强层必须用
@supports (display: flex)包裹，且只调整对齐、换行、顺序，不改动 DOM 结构或依赖新属性 - 容器查询（
@container）目前仅 Chrome 117+ / Safari 16.4+ 支持，必须用@supports (container-type: inline-size)包裹，并 fallback 到媒体查询断点
label，就可能让整个表单在辅助技术中不可用。渐进增强不是让新浏览器更好看，而是确保旧环境不崩溃。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
