modernizr仅检测特性支持与否，不提供降级；需手动编写css类名规则（如.no-webp）和js分支逻辑，并确保类名加在上以避免fouc，漏写回退样式或误放脚本位置会导致降级失效。
Modernizr 检测本身不提供降级，它只告诉你「浏览器能不能用某个特性」——真正起作用的是你写的 CSS 类名规则和 JS 分支逻辑。如果只引入脚本却不写对应样式，检测结果就等于没用。
为什么 Modernizr 添加的类名必须写在
因为 Modernizr 默认把检测结果转成 class 名（如 flexbox、no-webp）并加到 标签上，这是为了保证全局可选、无依赖、无 FOUC。常见错误包括：
- 误写成
.modernizr-flexbox或.has-flexbox—— 它默认不加任何前缀 - 把检测脚本放在
底部，导致首屏渲染时 class 还没加上，CSS 已经按默认规则生效，出现闪动 - 检查开发者工具里
是否出现，没出现说明脚本加载失败或执行太晚
no- 前缀类名必须显式写 CSS 回退规则
比如 Modernizr.webp 为 false 时， 会带 no-webp 类，但你得自己写：
.no-webp .hero-img {
background-image: url(fallback.jpg);
}
.webp .hero-img {
background-image: url(hero.webp);
}
漏掉 .no-webp 规则，旧浏览器就只能看到空白或默认背景色。同理，.no-flexbox .container 和 .flexbox .container 必须成对存在。
JS 判断后加载 Polyfill 的坑：别信 Modernizr.xxx 就是运行时真实状态
Modernizr.cssanimations 返回 true，不代表 @keyframes 在当前上下文一定能播；Modernizr.geolocation 为 true 也不代表用户会授权。关键点：
-
localStorage检测必须包try/catch：Safari 隐私模式下直接抛SecurityError -
Modernizr.video只表示<video></video>元素存在，不等于能解码mp4；要用canPlayType('video/mp4')获取'probably'或'maybe' - 检测
Modernizr.serviceworker后，仍需调用navigator.serviceWorker.register()并处理 reject - 不要在
if (Modernizr.cookies)里塞整段初始化逻辑——隐私模式下 Cookie 被禁用后，这个值不会变
只检测一两个特性时，手写比引入 Modernizr 更稳
如果你只关心 flexbox 和 webp，下面这段代码比加载整个 modernizr.min.js 更轻、更可控：
function supportsFlexbox() {
return 'flex' in document.documentElement.style;
}
function supportsWebp() {
return new Promise(resolve => {
const img = new Image();
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAgSSwQACUAA/80//';
});
}
现代项目中，Modernizr.load 已废弃；用 import() 动态导入 polyfill 更可靠，也避免阻塞主流程。
no- 类名对应的回退样式，常常只写了支持分支，忘了兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
