HTML5如何检测浏览器支持？快速判断技巧

本文深入解析了HTML5功能检测的三大核心策略：推荐使用Modernizr实现开箱即用的自动化特性检测与CSS降级支持；详解手写检测时需根据API类型（宿主对象、构造函数、DOM方法）精准选用`in`、`typeof`或函数调用验证，避免误判“存在却不可用”的陷阱；强调运行时检测的关键性——必须确保DOM就绪、异步API加`try/catch`防护、动态权限类API需按需重检，并指出CSS特性应优先采用`@supports`原生检测，而对dialog等存在“部分支持”的API，必须通过实际调用+错误捕获才能真正确认可用性。

用 Modernizr 检测 HTML5 功能最省事

如果你要兼容老浏览器、又不想手写一堆判断逻辑，Modernizr 仍是目前最稳妥的方案。它会在页面加载时自动检测几十项特性（如 localStorage、canvas、flexbox、intersectionObserver），并把结果挂到全局 Modernizr 对象上，同时给 添加对应类名（如 canvas 或 no-canvas）。

实际使用时只需：

• 引入 modernizr.js（推荐用自定义构建版，避免加载无用检测）
• 检查 Modernizr.canvas 是否为 true，或直接用 CSS 类做样式降级：.canvas .chart { display: block; } .no-canvas .chart { display: none; }
• 注意：它不检测 API 行为一致性（比如 Safari 旧版 fetch 不支持 AbortSignal），只判断是否存在

手写检测：用 in、typeof 和构造函数判断存在性

多数 HTML5 API 可通过属性存在性快速判断，但方式有区别：

• localStorage、sessionStorage：用 'localStorage' in window（比 typeof localStorage !== 'undefined' 更可靠，能避开某些 IE 的“未声明”异常）
• Promise、fetch、IntersectionObserver：用 typeof Promise === 'function'，因为它们是构造函数
• document.querySelector 这类方法：用 typeof document.querySelector === 'function'，不能只查 document.querySelector 是否为真（可能返回 undefined 或抛错）
• 注意：有些 API 存在但不可用（如 iOS 10.3 的 Intl.DateTimeFormat 缺少 formatToParts），这时需进一步调用测试

运行时检测比加载时更关键：别在 DOMContentLoaded 前就调用

很多开发者在 里立即执行检测逻辑，结果遇到报错——比如 document.createElement('canvas') 在 DOM 尚未解析时可能返回空对象，或 window.matchMedia 在某些安卓 WebView 中延迟暴露。

• 把功能检测放到 DOMContentLoaded 后，或至少确保 DOM 已就绪再调用
• 对异步 API（如 navigator.permissions.query），必须用 try/catch 包裹，它在不支持的浏览器中会直接抛 ReferenceError
• 不要依赖一次性检测结果：用户可能中途禁用摄像头，MediaDevices.enumerateDevices() 的可用性应按需重检

CSS 特性检测：用 @supports 替代 JS 判断

涉及样式渲染的功能（如 grid、aspect-ratio、container-query），优先用原生 @supports，比 JS 检测更轻量、更及时：

/* CSS 内直接写 */
@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (aspect-ratio: 1/1) {
  .card::before { content: ''; display: block; padding-top: 100%; }
}

注意：@supports 不支持 JavaScript 动态插入（style.sheet.insertRule 无法触发重排），也不识别厂商前缀（@supports (-webkit-appearance: none) 是无效语法）；需要 JS 响应时，仍得靠 CSS.supports() 方法。

真正容易被忽略的是「部分支持」——比如 Chrome 支持 dialog 元素但不支持 showModal() 的 preventScroll 参数，这时候光查 'showModal' in HTMLDialogElement.prototype 还不够，得实际调用并捕获错误。

好了，本文到此结束，带大家了解了《HTML5如何检测浏览器支持？快速判断技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！