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 还不够，得实际调用并捕获错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
