必须配合执行且检测真实行为，如标签是否被解析、api是否可调用、css属性是否起效；仅语法无报错不等于功能可用。
直接在 HTML 中写检测逻辑不能“自动生效”，必须配合 <script></script> 执行，且检测点要落在真实行为上——比如标签是否被解析、API 是否可调用、CSS 属性是否起效，而不是只看语法有没有报错。
怎么确认语义化标签（如 <main></main>、<nav></nav>）被浏览器识别
很多“布局消失”“样式不生效”问题，根源是浏览器压根没把 <header></header> 当成合法标签，而是当未知 inline 元素丢弃了。
- 打开 DevTools 的 Elements 面板，手动展开 DOM 树，看
<main></main>是否完整存在，而不是被自动包裹进<div> 或直接塌陷<li>在 Console 中运行：<code>document.querySelectorAll('header, main, nav, footer').length，返回0就说明未识别（常见于 IE8–10、旧 Android WebView） - 检查
是否独占第一行、前面**无空格、无注释、无 BOM**；Elements 顶部渲染模式必须显示 <strong>Standards</strong>，不是 <strong>Quirks</strong> - IE8 及以下必须引入
html5shiv，且仅引脚本不够，还得补 CSS：header, nav, section, article, aside, footer { display: block; } - 别只写
'localStorage' in window，要加try/catch实际读写：try{ localStorage.setItem('test','ok'); localStorage.removeItem('test'); }catch(e){ /* 降级 */ } - 检测构造函数比检测方法更可靠：
typeof HTMLDialogElement !== 'undefined'比'showModal' in document.createElement('dialog')更准（后者在 Safari 16.0–16.3 会误报） - 对关键行为做运行时验证：比如检测
inert，得创建元素并赋值：const el = document.createElement('div'); el.inert = true; return el.inert === true;，不能查'inert' in document.body - 写法必须是：
@supports (display: grid) { .grid { display: grid; } }或@supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.8); } } - 别和媒体查询混用；也别指望它覆盖 IE（IE 完全不支持
@supports） - 检测双参数形式（如
CSS.supports('contain', 'layout')）需注意：Safari 15.4+ 才开始支持，旧版只能用字符串规则CSS.supports('contain: layout') - 真正可靠的降级不是靠猜，而是结构上预留 fallback：比如
<div class="hero"> <img src="hero.webp" alt=""><img src="hero.jpg" alt=""> </div>，再用@supports (background: image-set(...)) { ... }控制显示逻辑 - 例如
dialog：caniuse 标记 Safari 15.4+ 支持，但 15.4–16.1 实际无法触发showModal()；inert在 Chrome 105+ 才稳定，Firefox 目前仍不支持 - 属性比标签更易踩坑：
inputmode="numeric"在 iOS Safari 16.4 之前完全无效，且静默降级，不会报错也不会弹数字键盘 - 验证方式必须是行为测试：创建元素 → 设置属性 → 触发相关行为（如聚焦）→ 用
getComputedStyle或事件监听确认效果，不能只信element.hasAttribute('xxx')
怎么安全检测 HTML5 API（如 localStorage、dialog.showModal()）是否真能用
“支持”不等于“能用”。例如 localStorage 在 Safari 无痕模式下存在但会抛错；dialog.showModal() 在 Safari 16.2 返回 true 却不触发 close 事件。
怎么用 @supports 在 HTML 里控制 CSS 兼容性
@supports 不是装饰性语法，它是让现代 CSS 安全落地的护栏。它只能写在 <style></style> 或 CSS 文件里，不能直接塞进 HTML 标签属性中。
为什么光靠 caniuse.com 查完还出问题
因为 caniuse 显示“支持”只代表接口存在，不保证行为一致。很多坑藏在 “Known issues” 栏目里，而不是主表格的勾叉中。
最常被跳过的一步是：在真机上验证触控、输入法、网络降级等细节。DOM 渲染正常 ≠ 交互可用，而这些只有在真实设备或 BrowserStack/LambdaTest 这类平台里才能暴露出来。
