怎样使用Modernizr配合CSS处理新特性的平稳降级？-css教程-PHP中文网

Modernizr仅提供特性检测结果，不处理降级；CSS降级需类名加在上且必须同时定义.feature和.no-feature规则，否则旧浏览器样式错乱或空白。

怎样使用modernizr配合css处理新特性的平稳降级？

Modernizr 本身不处理降级，只提供检测结果；CSS 降级生效的前提是类名加在上，且必须同时写 .feature 和 .no-feature 规则。

Modernizr 类名必须作用于才能匹配 CSS

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 未加载或被禁用时也能生效，别漏掉。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

检测项默认不包含 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 更适合中大型项目里需要统一管理几十个检测项的场景。