modernizr 检测具体特性而非 html5 整体支持，需同步加载于其他脚本前，通过 modernizr 对象属性或 html 类名使用结果，但部分检测项（如 serviceworker、geolocation）仅表静态存在，不保证运行时可用，须结合实际 api 调用验证。
Modernizr 不是判断“浏览器支不支持 HTML5”，而是告诉你 localStorage、canvas、flexbox 这些具体能力在当前环境里能不能用。直接查 Modernizr 对象属性就行，但加载顺序、缓存方式、降级逻辑这几个地方一错，检测就白做了。
Modernizr 必须在其他 JS 执行前加载
它靠运行时探测把结果挂到全局 Modernizr 上，不是异步 API，也不返回 Promise。如果放在 jQuery 或业务脚本后面，Modernizr.canvas 可能还没定义就报 ReferenceError。
-
<script></script>标签必须放在底部，或开头（紧贴标签） - 别用
defer或async—— 它依赖同步执行顺序 - CDN 推荐用
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js，v3+ 版本命名有变化（比如cssgrid不再叫cssgrids）
检测结果怎么用：JS 里别写嵌套 if，CSS 里别漏掉 no- 前缀
Modernizr 同时提供 JS 属性和 HTML 类名两种输出方式，但用法容易混淆。
- JS 中直接读布尔值：
if (Modernizr.webp)是对的；if (Modernizr.inputtypes.date)是错的——正确写法是Modernizr.inputtypes（整个输入类型组），单独 date 要用document.createElement('input').type === 'date'配合canIUse行为验证 - CSS 中类名自动加在
上，支持就加webp，不支持就加no-webp；写样式时必须同时覆盖两种情况，比如.no-webp .hero-img { background-image: url(fallback.jpg); } - 别在
if (Modernizr.xxx)里塞整段初始化逻辑——万一特性中途被禁用（如用户关掉 Cookie），Modernizr.cookies仍是true，但实际已不可用
哪些检测项其实不靠谱？
Modernizr 的静态探测机制决定了它没法反映运行时变化，有些 API 即使检测通过，调用时仍可能失败。
-
Modernizr.serviceworker返回true≠navigator.serviceWorker已 ready，注册仍要处理navigator.serviceWorker.register().catch(...) -
Modernizr.geolocation为true，但用户可能拒绝授权，navigator.geolocation.getCurrentPosition()仍会进 error 回调 -
Modernizr.video只表示<video></video>元素存在，不保证canPlayType('video/mp4')返回'probably'；格式支持得单独测 -
Modernizr.touch在 Chrome 桌面版开启模拟触摸后可能误报，更稳的方式是'ontouchstart' in window+matchMedia('(hover: none) and (pointer: coarse)')
真正关键的不是“有没有 Modernizr”，而是你是否把检测结果和真实行为解耦——比如把 canvas 初始化逻辑封装成函数，只在 Modernizr.canvas && canvas.getContext('2d') 都成立时才调用，而不是只信 Modernizr.canvas 这一个布尔值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
