Modernizr通过在<html>标签添加flexbox或no-flexbox等类名检测CSS特性，CSS选择器须直接使用.flexbox或.no-flexbox（不加前缀），且需确保脚本在<head>中尽早加载以避免FOUC。
Modernizr怎么检测CSS特性并写对CSS选择器
Modernizr本身不执行样式切换，它只往 <html> 标签上写类名，比如支持 flexbox 就加 flexbox 类，不支持就加 no-flexbox。你得靠这些类名写CSS规则，否则检测了也白检测。
常见错误是把类名写成 .modernizr-flexbox 或 .has-flexbox —— Modernizr默认不加任何前缀，就是直接 .flexbox 或 .no-flexbox。
- 检查页面源码或开发者工具里
<html class="js flexbox no-webp csstransforms">是否出现，没出现说明脚本没加载成功或没执行 -
<script>必须放在<head>里（越早越好），否则首屏渲染时类名还没加上，CSS已生效，造成闪动 - 否定类名永远是
no-开头，比如.no-csstransforms表示不支持 CSS transform，可用于回退到 JS 动画或固定定位
在JS里怎么用Modernizr判断CSS特性并触发Polyfill加载
Modernizr对象的属性（如 Modernizr.flexbox、Modernizr.csstransforms）是布尔值，可直接用于条件分支。但注意：这些属性只反映检测结果，不自动加载任何代码。
如果你要用 Modernizr.load（即 yepnope.js）做条件加载，得确认你用的是带 loader 的构建版本（默认 CDN 版通常不含）。更推荐现代做法：手写条件逻辑 + import() 动态导入。
立即学习“前端免费学习笔记（深入）”；
- 检测失败再加载 Polyfill：
if (!Modernizr.cssanimations) { import('animate.css').then(...); } - 避免重复加载：加个标记变量，比如
if (!window._loadedCssAnimationsPolyfill && !Modernizr.cssanimations) -
Modernizr.load已废弃，不要依赖它；Webpack/Vite 等打包工具对import()有原生支持，无需额外配置
为什么不能只靠CSS类名做降级，还得配合JS逻辑
CSS类名只能控制样式，没法补功能。比如 .no-flexbox 可以让你改用 float 布局，但解决不了“容器内子元素需要等高”这种 Flexbox 才原生支持的行为。
- 视觉降级（CSS）和行为补全（JS）必须分开考虑：前者管“看起来像”，后者管“能用”
- 某些特性（如
grid）没有轻量级 Polyfill，强行 JS 模拟性能极差，此时应直接用no-cssgrid类切到flexbox或display: table回退布局 - 检测
Modernizr.csscalc成功，不代表calc(100vh - 50px)在所有旧版 Safari 里都可靠——实际兼容性比布尔值复杂，需查 caniuse 细节
自定义CSS特性检测该怎么写
Modernizr内置检测覆盖大部分常用特性，但像 aspect-ratio、container-query 这类较新特性，老版本 Modernizr 不包含，得手动加。
用 Modernizr.addTest 注入检测逻辑，核心是模拟浏览器解析行为：创建临时元素 → 设样式 → 读计算值 → 判断是否生效。
- 简单检测示例：
Modernizr.addTest('aspectratio', 'aspectRatio' in document.documentElement.style); - 更可靠的做法是测渲染效果：
Modernizr.addTest('aspectratio', function() { /* 创建 div，设 aspect-ratio，测 clientHeight 是否符合预期 */ }); - 检测结果会同步生成
aspectratio和no-aspectratio类，JS 中也可用Modernizr.aspectratio - 自定义检测要放在 Modernizr 初始化之后、其他逻辑之前，否则类名不会被注入到
<html>
真正难的不是写检测，而是决定“检测到不支持时，该降级成什么”。比如 no-cssgradients 可以用 PNG 贴图，但得权衡 HTTP 请求和设计一致性；no-csstransforms 下做轮播，是用 left + top 还是纯 JS 重绘？这些决策点比代码本身更影响最终体验。
