17370845950

Modernizr 检测具体特性而非“是否支持 HTML5”，通过运行时探测将结果挂载为 Modernizr 对象的布尔属性，需在依赖脚本前加载；推荐定制化引入，优先用特性检测代替 UA 判断，并注意其静态局限性。

Modernizr 不是检测“浏览器是否支持 HTML5”，而是检测具体特性（比如 localStorage、canvas、flexbox）是否存在。直接判断“是否支持 HTML5”没有意义——HTML5 是一大组松散标准，各浏览器支持程度千差万别。

Modernizr 怎么加载和初始化

Modernizr 本质是一个运行时脚本，它在页面加载早期执行探测，把结果挂到全局 Modernizr 对象上。必须确保它在其他依赖特性的 JS 执行前就位。

• 从官网下载定制版（推荐：只勾选你真正用到的检测项，减小体积），或通过 CDN 引入：

• 放在 末尾或 开头，**不能**放在所有 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 → 属性支持
• 不确定名称？打开浏览器控制台，输入 Modernizr 查看完整属性列表

怎么根据检测结果写兼容逻辑

不要用 if (Modernizr.xxx) { ... } 包裹整段功能代码，而应分离「能力判断」和「行为实现」。否则容易漏掉降级路径或触发未定义行为。

立即学习“前端免费学习笔记（深入）”；

• 优先使用特性检测，而非 UA 判断：if (Modernizr.geolocation) 比 navigator.userAgent.includes('Chrome') 可靠得多
• 避免重复探测：把检测结果缓存起来，比如 const hasCanvas = Modernizr.canvas;
• 对缺失特性的降级要具体：比如 !Modernizr.webp 时，用 + +
• 注意异步特性：像 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 测试或视觉回归验证