modernizr 检测的是具体 web 特性（如 localstorage、canvas、webp）是否可用，而非笼统的 html5 支持；需同步加载、dom 就绪后执行，并警惕运行时不可靠性。
Modernizr 不是“检测浏览器支不支持 HTML5”，而是告诉你 localStorage、canvas、webp 这些具体能力当前能不能用。直接查 Modernizr 对象属性就行，但加载顺序、DOM 就绪时机、运行时变化这三处一错，检测就失效。
Modernizr 脚本必须同步加载且早于其他 JS
它靠同步执行探测逻辑，把结果挂到全局 Modernizr 上，不是 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
检测逻辑必须等 DOM 就绪后执行
Modernizr 的部分探测（如 flexbox、inputtypes）依赖 DOM 元素创建和样式读取，放在 里直接调用会返回 undefined。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把判断逻辑包在
DOMContentLoaded回调里，或用$(document).ready()（如果已引入 jQuery） - 别用
window.onload或load事件——它等图片等全部资源加载完，太晚 - 如果只检测一两个特性（如
localStorage），手写更轻量，也更可控
别把 Modernizr 当运行时权威，有些检测项根本不可信
Modernizr.serviceworker 返回 true ≠ navigator.serviceWorker 已 ready；Modernizr.geolocation 为 true 也不代表用户会授权；Modernizr.video 只表示 <video></video> 元素存在，不等于能播 MP4。
-
localStorage检测必须加try/catch：隐私模式下 Safari/Chrome 会抛SecurityError -
geolocation要结合存在性 + 实际调用：navigator.geolocation.getCurrentPosition()的 success/error 回调才是真实状态 -
webp支持不能只靠Modernizr.webp，得用Image+onload/onerror动态加载验证 -
canPlayType('video/mp4')返回的是'probably'、'maybe'或空字符串，不是布尔值
CSS 中用类名降级时，no- 前缀容易漏掉
Modernizr 会自动在 上加 webp 或 no-webp 类，但很多人只写 .webp .hero-img，忘了兜底的 .no-webp .hero-img。
- CSS 必须同时覆盖两种情况：
.no-webp .hero-img { background-image: url(fallback.jpg); } - 别在
if (Modernizr.xxx)里塞整段初始化逻辑——万一用户中途禁用 Cookie，Modernizr.cookies仍是true，但实际已不可用 - 对缺失特性的降级要具体：比如
!Modernizr.webp时，用<picture></picture>+<source type="image/webp"></source>+<img src="fallback.jpg">
真正难的不是写检测代码，而是想清楚「这个特性检测通过后，是不是真能用」——很多失败发生在注册 Service Worker、请求地理位置、写入 localStorage 的那一瞬间，而不是 Modernizr 判断那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
