caniuse.com需按规范特性名搜索而非标签名，优先查看“notes”栏与运行时行为检测，结合headless浏览器实测验证兼容性。
直接搜特性名，别搜标签或属性字面量
caniuse.com 不是按 HTML 标签名索引的数据库，搜 dialog 会返回一堆零散结果，但搜 HTMLdialogelement 或 dialog element 就能精准命中带 ✅ 图标的主条目。同理，inert 要搜 inert attribute，inputmode 就搜 inputmode（不加引号、不拆词），aspect-ratio 搜 aspect-ratio —— 它不认 css-aspect-ratio 这种变体。
常见误操作：
- 搜
html5 tags→ 返回 200+ 条，无法快速定位 - 搜
time tag→ 结果混在“HTML5 semantic elements”大类里，漏掉关键 Notes - 搜
popover但没点进popover element条目 → 看不到 Safari 完全不支持auto值这个致命限制
重点看 “Notes” 栏，不是“Support”色块
绿色勾只代表“有实现”，不代表“能用”。dialog 在 Safari 16.0–16.3 显示绿色，但 myDialog.close() 不触发 close 事件；inert 在 Chrome 105+ 才稳定，Firefox 至今无原生支持——这些全写在 “Notes” 里，而不是色块下方的小字说明中。
实操建议：
- 点开目标条目后，第一眼扫 “Notes” 和 “Known issues”，不是先看浏览器版本列表
- 留意 Safari 版本号是否带小数点（如 16.4），这种更新常含关键修复，16.0 和 16.4 之间可能差一个可交付与不可交付的分界线
- 看到 “Partial support” 黄色叹号，立刻点开看具体哪部分不支持，比如
showModal()可用但preventScroll参数无效
用运行时检测代替 UA 判断，且检测要够细
typeof HTMLDialogElement !== 'undefined' 比 'showModal' in document.createElement('dialog') 更可靠——后者在 Safari 16.0–16.3 返回 true，但调用就报 TypeError。同样，检测 inert 不能查 'inert' in document.body，得创建临时元素：const el = document.createElement('div'); el.inert = true; 'inert' in el。
为什么必须这样？
- UA 字符串不可信：iOS WebView、Mac Catalyst、某些安卓壳浏览器都可能上报 Safari，但根本不支持
inert - 静态属性检测失效：
element.hasAttribute('inputmode')只检查 HTML 字符串，不反映键盘行为是否真被触发 - 行为检测才真实：聚焦
<input inputmode="numeric">后，监听inputmodechange事件或观察软键盘类型，才是最终验证
本地验证别只靠 caniuse，补上 headless 浏览器快照
caniuse 提供的是声明式兼容数据，不是运行时行为快照。比如 dialog.showModal() 在 Safari 16.4+ 支持，但 modal 会覆盖 position: fixed 元素，这个渲染 bug 不在 caniuse 的“Support”栏里，得亲眼看见。
推荐做法：
- 用 Puppeteer 或 Playwright 启动对应版本的 headless Chrome/Safari/Firefox，加载最小复现页，截图或抓取
getComputedStyle结果 - 对
popover这类依赖锚点定位的特性，直接测popover.getBoundingClientRect()是否为 null - CI 中跑兼容性检查时，用
@bramus/caniuse-cli做静态断言（如caniuse "HTMLdialogelement" --browsers "safari >= 16.4"），再配合真实渲染验证
最易被忽略的一点：caniuse 上标“支持”的特性，在旧版浏览器里可能静默降级（比如 inputmode 不弹数字键盘但也不报错），这种行为只能靠真机或模拟器触发验证，没法靠代码逻辑兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
