modernizr 不检测“是否支持 html5”，而是运行时探测具体特性（如 localstorage、flexbox、webp）是否存在并挂载为布尔属性；必须在 dom 就绪前加载，结果静态不可变，不响应运行时环境变化。
Modernizr 不是“检测 HTML5 支持与否”的开关，它只告诉你 localStorage、flexbox、webp 这些具体能力是否存在——而且结果一加载就固定，不会随运行时环境变化（比如用户中途禁用 Cookie，Modernizr.cookies 仍为 true）。
Modernizr 脚本必须在 DOM 就绪前加载并执行
它依赖早期 DOM 操作（如创建 canvas 元素、读取样式），所以不能等 DOMContentLoaded 或 jQuery 的 $(document).ready() 才引入。常见错误是把它放在其他 JS 后面，或用 async 加载。
- 推荐放在
底部，紧挨着；或者放在开头 - 若用 CDN，确保 URL 稳定，例如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> - 不要用
load事件判断，它等图片、字体全加载完，太晚；DOMContentLoaded已经晚了——Modernizr 需要更早 - 检查
是否出现，没出现说明脚本根本没执行
用类名写 CSS 降级样式，不是靠 JS 切换
Modernizr 不会动态增删 class，它只在页面初始化时一次性写入 的 class 属性。你得靠这些类名写 CSS 选择器分支，而不是监听或重写。
- 支持某特性：直接用
.flexbox、.cssgrid等类名写样式 - 不支持：用
.no-webp、.no-csstransforms写 fallback，比如.no-webp .hero { background-image: url(logo.jpg); } - 别写
.modernizr-flexbox—— Modernizr 默认不加前缀，就是.flexbox -
no-类名是“否定断言”，不是“未检测到”，所以.no-cssgrid表示明确不支持原生display: grid，可用于安全降级到flex或float
JS 中直接读 Modernizr 对象属性，但注意异步特性的陷阱
Modernizr.canvas、Modernizr.geolocation 这些属性加载完立即可用，是布尔值，不是 Promise。但有些 API 表面支持，实际调用仍可能失败。
-
Modernizr.serviceworker === true只表示构造函数存在，不代表navigator.serviceWorker已 ready，仍需navigator.serviceWorker.register()并处理 reject -
Modernizr.geolocation为true仅说明 API 存在，调用getCurrentPosition()仍可能因权限拒绝、超时或设备无 GPS 返回错误回调 -
Modernizr.webp是通过canvas动态生成 WebP 数据 URL 测出来的，某些老安卓 WebView 可能误报true，建议结合Image+onerror二次验证 - 避免重复访问：缓存结果，比如
const hasWebP = Modernizr.webp;，别每次都要查对象属性
canPlayType 和 CSS.supports() 别混进 Modernizr 检测里
Modernizr 不处理 HTMLMediaElement.canPlayType() 或 CSS.supports() 这类运行时、参数敏感的检测——它们返回值不是布尔型，且行为高度依赖具体 codec 或浏览器实现。
-
video.canPlayType('video/mp4')返回'probably'、'maybe'或空字符串，不能当true/false用 -
CSS.supports('display', 'grid')比Modernizr.cssgrid更细粒度，还能测自定义属性，建议优先用并缓存结果 -
Modernizr的webp检测只是粗筛，真正要用 WebP 图片时，必须用<picture></picture>+<source type="image/webp"></source>+<img src="fallback.jpg">结构兜底 - 别指望 Modernizr 告诉你 Safari 是否支持
VP9编码的 WebM——它不测 codec 级别兼容性
最易被忽略的是：Modernizr 的检测结果不可变，也不感知隐私模式、扩展拦截、运行时权限变更。比如 Safari 无痕窗口下 localStorage 会抛 SecurityError，但 Modernizr.localstorage 仍是 true——这种场景必须手写 try/catch 验证，不能全信 Modernizr。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
