查 HTML 标签或属性兼容性应优先使用 caniuse.com，而非 MDN；重点看“Known issues”栏目，注意 Safari 对 dialog、inert 等特性的实际支持延迟及静默降级行为。
查某个 HTML 标签在 Chrome/Firefox/Safari 里能不能用
直接去 caniuse.com 搜标签名，比如搜 dialog，页面会立刻显示各浏览器版本支持情况，带绿色勾（已支持）、橙色叹号（需前缀或有 bug）、红色叉（不支持）。别信 MDN 文档顶部的“兼容性”折叠区——它常滞后，且不标具体 bug 行为。
常见错误现象：dialog 在 Safari 15.4+ 才真正可用，但早期 Safari 声称“支持”却无法触发 showModal()；inert 属性在 Chrome 105+ 才稳定，Firefox 目前仍不支持。
- 使用场景：上线前快速验证新语义化标签（如
meter、time）或交互型标签（如details）是否可直接用 - 参数差异：不用管“部分支持”里的细节描述，重点看“Known issues”栏目——那里写的才是真坑，比如
popover在 Chrome 114+ 支持auto值，但 Safari 完全没实现 - 性能影响：无。这只是静态兼容性数据查询，不涉及运行时开销
验证 HTML 属性是否被当前浏览器识别
属性比标签更易踩坑。比如 input type="date" 虽然所有现代浏览器都渲染控件，但 inputmode="numeric" 在 iOS Safari 16.4 之前根本无效，且不会报错，只会静默降级为默认键盘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 查
caniuse.com时，输入属性全名，如inputmode，不是只输input - 别依赖
element.hasAttribute('xxx')判断支持——它只检测 HTML 字符串是否存在，不反映浏览器是否理解该属性含义 - 真正可靠的检测方式是行为测试：创建元素 → 设置属性 → 触发相关行为（如聚焦后弹出键盘）→ 用
getComputedStyle或事件监听确认效果
遇到 “DOM 不渲染” 或 “样式失效”，先排除兼容性问题
很多看似逻辑错误的问题，其实是浏览器根本不认识那个标签或属性，直接当未知元素丢弃处理。比如在 IE11 或旧 Android Webview 里写 <main></main>，它会被当成普通 div，但若 CSS 写了 main { display: block; }，而没加 html5shiv，那整个区块就塌陷了。
容易忽略的点：
- 自定义标签（如
my-button）在未调用customElements.define()时，Chrome/Firefox 会保留其 DOM 节点但不激活，Safari 可能直接忽略 -
slot属性在 Safari 10.1+ 才支持，且要求 Shadow DOM 已启用；没启用时，含slot的元素内容会被完全隐藏 - 某些属性（如
translate）虽被解析，但仅影响 ARIA，不影响 DOM 结构或样式，误以为“没生效”其实是理解偏差
本地快速验证兼容性：用浏览器开发者工具模拟旧版本
Chrome DevTools 的 Rendering 面板里没有“切浏览器版本”功能，别白费时间找。真实可行的方式只有两个：
- 用不同设备/系统的真实浏览器打开测试页（iOS 真机 + Safari、Android 真机 + Chrome）
- 在本地起一个简易服务，配合
BrowserStack或Playwright自动跑多环境快照——playwright test --project=chromium-90这类命令能精准控制版本 - 拒绝“UA 伪造”：改
User-Agent字符串只能骗过服务端，对 DOM 解析、CSS 渲染、JS API 行为零影响
最常被跳过的环节：没验证 iOS Safari 的 WebKit 特定限制，比如 position: sticky 在 flex 容器里失效、aspect-ratio 在表单控件上不工作——这些不是版本问题，是引擎设计决定的，得单独记进项目 checklist。
