html5test.com提供浏览器实时能力快照，需关注具体特性而非版本号；Modernizr或原生检测（如dialog、:has()）比UA判断更可靠；DevTools中Elements、Application、Console实测比兼容性表格更准确。
直接用最新 HTML 特性没问题，但前提是你的用户实际使用的浏览器真支持它——不能只看“主流浏览器都支持”，得看具体特性、具体版本、具体运行环境。
查 html5test.com 得到的是当前浏览器的实时能力快照
打开 https://html5test.com，它会立即执行一组标准化测试：创建 canvas 并调用 getContext、尝试写入 localStorage、检查 navigator.geolocation 是否存在、加载 video 的 H.264/WebM 支持等。结果不是“Chrome 123 支持”，而是“这个 Chrome 实例是否能跑 Web Workers”。
常见误判点：
- 企业内网或教育终端可能被策略禁用
geolocation或localStorage，即使浏览器版本很新，html5test.com也会标为 Not supported - 某些安卓 WebView（比如旧版微信内置浏览器）版本号显示为 Chrome，但实际缺失
IntersectionObserver或dialog元素支持 -
html5test.com总分（目前上限 555）没意义，关键要看你用到的那几项——比如你只用dialog和:has()，就专注扫这两个条目
Modernizr 检测比 userAgent 判断靠谱得多
别再写 if (/Edge\/18/.test(navigator.userAgent)) 这种代码。它既不可靠（UA 可伪造），又无法反映真实能力。用 Modernizr 或原生检测更直接：
- 检测
dialog元素：typeof document.createElement('dialog').showModal === 'function' - 检测
:has()CSS 选择器：CSS.supports('selector(:has(div))') - 检测
popoverAPI：'popover' in HTMLElement.prototype - 检测
View Transitions API：'startViewTransition' in document.body
这些检测在页面加载早期就能完成，比等 DOMContentLoaded 更早介入降级逻辑。
立即学习“前端免费学习笔记（深入）”；
开发者工具里几个关键面板比“兼容性表格”更有说服力
在 Chrome / Edge / Safari 的 DevTools 中，别只盯着 Console 报错。这几个地方能暴露真实问题：
-
Elements 面板：展开一个
<dialog open></dialog>，看它是否渲染为可交互元素；如果退化成普通div，说明浏览器根本不识别该标签 -
Application → Storage：点开
localStorage，手动set一个值再get，确认不是只读或完全不可用（尤其 iOS Safari 的无痕模式） -
Console 执行：
await navigator.permissions.query({name: 'clipboard-read'})，有些浏览器支持 API 但权限模型不同，直接调用navigator.clipboard.readText()会静默失败
真正容易被忽略的不是“哪个浏览器不支持”，而是“同一个特性在不同上下文里行为不一致”——比如 localStorage 在 iframe 里可能被禁用，dialog 在 Shadow DOM 里可能无法正确聚焦，View Transitions 在 SSR 渲染的初始页面中根本不会触发。这些没法靠查表解决，必须在目标环境里实测。
