Modernizr检测浏览器特性方法详解

Modernizr 并非简单判断“浏览器是否支持 HTML5”，而是通过同步运行时探测，精准告诉你 localStorage、Canvas、Flexbox、WebP 等数十项具体特性的可用性，并将结果以布尔属性（如 Modernizr.canvas）和 HTML 类名（如 `` 或 ``）两种方式暴露；但其检测本质是静态快照——serviceworker、geolocation、video 等返回 true 仅表示 API 存在，绝不等于运行时可用，必须结合实际调用与错误处理验证；尤其关键的是：Modernizr 必须在所有其他脚本前同步加载（禁用 defer/async），否则属性未定义即报错；而真正可靠的渐进增强实践，在于将特性检测与真实行为解耦——例如只在 `Modernizr.canvas && canvas.getContext('2d')` 同时成立时才初始化 Canvas，而非盲目信任单一布尔值。

Modernizr 不是判断“浏览器支不支持 HTML5”，而是告诉你 localStorage、canvas、flexbox 这些具体能力在当前环境里能不能用。直接查 Modernizr 对象属性就行，但加载顺序、缓存方式、降级逻辑这几个地方一错，检测就白做了。

Modernizr 必须在其他 JS 执行前加载

它靠运行时探测把结果挂到全局 Modernizr 上，不是异步 API，也不返回 Promise。如果放在 jQuery 或业务脚本后面，Modernizr.canvas 可能还没定义就报 ReferenceError。