Modernizr仅提供特性检测结果，不处理降级；CSS降级需类名加在上且必须同时定义.feature和.no-feature规则，否则旧浏览器样式错乱或空白。
Modernizr 本身不处理降级，只提供检测结果；CSS 降级生效的前提是类名加在 上，且必须同时写 .feature 和 .no-feature 规则。
Modernizr 类名必须作用于
Modernizr 默认把检测结果写进 标签的 class 属性，比如 flexbox 或 no-webp。如果脚本加载后你检查的是 或某个容器元素，就找不到这些类——因为它们根本不在那儿。
常见错误包括：
- 误以为类名会自动加到当前元素上，结果 CSS 选择器写成
.flexbox .container，但实际需要的是html.flexbox .container或更宽松的.flexbox .container（前提是页面没其他同名干扰类） - 在 IE8 这类老浏览器中用了多类选择器（如
.flexbox .container），它不支持空格分隔的后代选择器，得改用.flexbox.container这种无空格写法 - 脚本放在底部或加了
async，导致首屏渲染时还没加上类名，出现 FOUC（内容闪动）
必须同时定义 .feature 和 .no-feature CSS 规则
Modernizr 只回答“有没有”，不决定“怎么显示”。漏掉 .no-* 分支，旧浏览器就会用默认样式，甚至空白或错位。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
.webp .hero-img { background-image: url(hero.webp); }
.no-webp .hero-img { background-image: url(fallback.jpg); }
html.flexbox .container { display: flex; }
html.no-flexbox .container { display: block; }
.no-js .carousel { overflow-x: auto; }
注意：.no-js 是兜底项——JS 未加载或被禁用时也能生效，别漏掉。
检测项默认不包含 flexbox、grid 等新特性
npm 安装的 modernizr 包只是个空壳，官网默认构建版也不含 flexbox 或 cssgrid（注意不是 cssgridlegacy）。直接 import Modernizr from 'modernizr' 会得到 Modernizr.flexbox === undefined。
解决办法：
- 去 modernizr.com/download 勾选需要的检测项，下载定制版
- 用 Webpack 的
modernizr-webpack-plugin，配合modernizr-config.json注入"css/flexbox"等路径 - 在控制台输入
Modernizr.flexbox，确认返回true或false，而不是undefined
只检测一两个特性时，手写比引入 Modernizr 更可靠
如果你只关心 webp 和 flexbox，下面这段代码比加载整个 modernizr.min.js 更轻、更可控：
const supportsWebP = () => {
const webP = new Image();
webP.onload = webP.onerror = () => {
document.documentElement.classList.add(webP.height === 1 ? 'webp' : 'no-webp');
};
webP.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAgSSenq888BfJiADcRaVVgjVeNnuv9Bb7LzBfP6v0nz2R9z0Y4uJrRDQxUeZtGKmF+Ie35hW1yT8dD8o3n8Mw==';
};
const supportsFlex = 'flex' in document.documentElement.style || 'webkitFlex' in document.documentElement.style;
document.documentElement.classList.add(supportsFlex ? 'flexbox' : 'no-flexbox');
这类检测逻辑简单、无依赖、可调试，上线后也更容易排查问题。Modernizr 更适合中大型项目里需要统一管理几十个检测项的场景。
