html5怎么检测浏览器支持_快速判断功能可用技巧【技巧】

Modernizr 是检测 html5 功能最省事的方案，自动检测数十项特性并挂载到全局对象及 HTML 类名；手写检测需区分 in、typeof 和函数判断；运行时检测应延至 dom 就绪后，并注意部分支持需实际调用验证。

用 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 还不够，得实际调用并捕获错误。