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 中延迟暴露。
立即学习“前端免费学习笔记（深入）”；
