如何使用Modernizr检测浏览器特性并提供CSS降级方案？-css教程-PHP中文网

modernizr类名必须加在标签上，否则css降级失效；需同时写.feature和.no-feature规则；脚本须同步加载且早于其他js；仅需少量特性时手写检测更轻量可靠。

如何使用modernizr检测浏览器特性并提供css降级方案？

Modernizr类名必须加在上，否则CSS降级失效

Modernizr检测结果默认写入标签的class属性，比如flexbox或no-webp。这是唯一可靠的位置——写在或某个容器上，CSS选择器就匹配不到，降级样式自然不生效。

常见错误包括：
• 把脚本放在底部，首屏渲染时还没加上类名，导致FOUC（内容闪动）
• 开发者工具里看不到，说明脚本没执行或加载失败
• 误用.modernizr-flexbox或.has-flexbox这类自定义前缀，Modernizr默认不加任何包装

CSS必须同时写.feature和.no-feature两条规则

Modernizr只负责“告诉浏览器它有没有这个能力”，不帮你写样式。漏掉.no-*规则，旧浏览器就只能显示默认样式，甚至空白。

正确写法示例：
• .webp .hero-img { background-image: url(hero.webp); }
• .no-webp .hero-img { background-image: url(fallback.jpg); }
• .flexbox .container { display: flex; }
• .no-flexbox .container { display: block; }

别只写.flexbox分支；.no-js也要考虑——JS未加载时的兜底样式，比如.no-js .carousel { overflow-x: auto; }

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

脚本必须同步加载且早于其他JS执行

Modernizr不是异步库，它靠同步执行完成所有探测并挂载到全局Modernizr对象。如果<script></script>标签加了async或defer，或者放在jQuery之后，Modernizr.flexbox可能还没定义就被读取，直接报ReferenceError。

安全做法：
• 脚本放在底部，紧挨
• 或放在开头，紧贴标签
• CDN推荐用https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js（v3+命名有变，如cssgrid不再是cssgrids）

只检测一两个特性时，手写比引入Modernizr更稳

如果你只关心flexbox和webp，下面这段代码比加载整个modernizr.min.js更轻、更可控：

function supportsFlexbox() {
  return 'flex' in document.documentElement.style;
}
function supportsWebp() {
  return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0;
}

手写的好处：
• 避免加载15KB+的完整库
• 不依赖外部CDN稳定性
• 可以按需增强，比如supportsWebp()用new Image() + onload/onerror动态验证，比Modernizr.webp静态值更准

真正容易被忽略的是：CSS类名只是开关，背后那套回退样式得你一条条写全；而JS里读Modernizr.xxx只是快照，像localStorage或geolocation这种运行时可能失效的能力，还得包try/catch或监听真实回调。