Modernizr 检测具体特性而非“是否支持 HTML5”，通过运行时探测将结果挂载为 Modernizr 对象的布尔属性，需在依赖脚本前加载；推荐定制化引入，优先用特性检测代替 UA 判断，并注意其静态局限性。
Modernizr 不是检测“浏览器是否支持 HTML5”，而是检测具体特性（比如 localStorage、canvas、flexbox）是否存在。直接判断“是否支持 HTML5”没有意义——HTML5 是一大组松散标准，各浏览器支持程度千差万别。
Modernizr 怎么加载和初始化
Modernizr 本质是一个运行时脚本，它在页面加载早期执行探测，把结果挂到全局 Modernizr 对象上。必须确保它在其他依赖特性的 JS 执行前就位。
- 从官网下载定制版（推荐：只勾选你真正用到的检测项，减小体积），或通过 CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
- 放在
末尾或开头，**不能**放在所有 JS 之后再加载 - 加载后立即可用：
Modernizr.canvas返回true或false，不是 Promise 或回调
怎么查某个特性是否被支持
Modernizr 把每个检测结果作为布尔属性暴露在 Modernizr 对象上。名字基本和特性名一致，但有少数例外（如 inputtypes 对应 date 类型输入框）。
-
Modernizr.websockets→ WebSocket 支持 -
Modernizr.history→ History API（pushState/replaceState） -
Modernizr.cssgrid→ 原生 CSS Grid（注意：旧版 Modernizr 用cssgrids，v3+ 统一为cssgrid） -
Modernizr.adownload→<a download></a>属性支持 - 不确定名称？打开浏览器控制台，输入
Modernizr查看完整属性列表
怎么根据检测结果写兼容逻辑
不要用 if (Modernizr.xxx) { ... } 包裹整段功能代码，而应分离「能力判断」和「行为实现」。否则容易漏掉降级路径或触发未定义行为。
立即学习“前端免费学习笔记（深入）”；
- 优先使用特性检测，而非 UA 判断：
if (Modernizr.geolocation)比navigator.userAgent.includes('Chrome')可靠得多 - 避免重复探测：把检测结果缓存起来，比如
const hasCanvas = Modernizr.canvas; - 对缺失特性的降级要具体：比如
!Modernizr.webp时，用<picture></picture>+<source type="image/webp"></source>+<img src="fallback.jpg" alt="HTML5怎么检测浏览器支持HTML5特性_用Modernizr方法【解答】" > - 注意异步特性：像
Modernizr.serviceworker虽返回true，但不代表navigator.serviceWorker已 ready，仍需调用navigator.serviceWorker.register()并处理 promise
Modernizr 的局限和替代方案
Modernizr 是静态探测，无法反映运行时环境变化（如用户禁用 Cookie 后 Modernizr.cookies 仍是 true），也不检测 API 行为差异（比如 Safari 的 IntersectionObserver 在某些滚动场景下不触发）。
- 简单场景可直接用原生特性检测：比如
'geolocation' in navigator、'fetch' in window、typeof Worker !== 'undefined' - 需要细粒度控制或懒加载检测项？考虑
@modernizr/load（Modernizr v3+ 的按需加载模块） - 项目已用 Webpack/Vite？可配合
feature-detect-es6或手写轻量探测函数，避免引入整个 Modernizr - 最常被忽略的一点：Modernizr 不检测 CSS 特性在特定元素上的表现（例如 flex 容器内
min-width是否生效），这类问题必须靠真实 DOM 测试或视觉回归验证
