Modernizr不会自动加载CSS或JS，仅同步向<html>添加功能类名（如flexbox、no-flexbox）供手动编写CSS分支使用；类名需配合选择器如html.flexbox .container生效，且脚本须早于CSS加载以防FOUC。
Modernizr 不会自动加载 CSS 或 JS，它只负责检测并写入 class —— 所有样式适配必须靠你手动写 CSS 规则，且必须基于它注入的 class（如 border-radius 或 no-flexbox）来生效。
Modernizr 检测后往 <html> 写了哪些 class
Modernizr 在页面加载时立即扫描浏览器能力，并把结果以 class 形式加到 <html> 标签上。比如支持 flexbox，就加 flexbox；不支持，就加 no-flexbox。这些 class 是后续所有条件样式的基础。
- 所有检测项都对应一个 class 名，命名规则统一：支持 →
featurename，不支持 →no-featurename - 常见 CSS3 类包括：
border-radius、box-shadow、rgba、cssanimations、csstransforms等 - 注意：
<html>上还会默认带js类（表示 JS 已执行），以及no-js会在 JS 加载前短暂存在 —— 你可以在 CSS 里用.no-js .my-element做纯 CSS fallback
用 class 控制 CSS 规则，而不是靠 JS 动态插入样式表
别在 JS 里判断 Modernizr.borderRadius 然后 document.styleSheets[0].insertRule(...) —— 这既难维护又容易出竞态。正确做法是：提前写好所有分支 CSS，靠 class 开关。
- 写法示例：
.card { padding: 1rem; } .border-radius .card { border-radius: 8px; } .no-border-radius .card { border: 1px solid #ccc; } - 优先使用
.feature类写增强样式（渐进增强），再用.no-feature补降级逻辑（避免覆盖冲突） - 如果某个 CSS3 属性被多个元素共用（如
transform），建议抽成工具类：.is-transformed，再配合.csstransforms .is-transformed组合使用
为什么不能直接用 Modernizr.xxx 布尔值做样式切换
因为 Modernizr 对象本身是 JS 运行时产物，而 CSS 解析发生在 HTML 解析阶段（早于 JS 执行）。你在 CSS 里写 @supports (border-radius: 4px) {...} 是可行的，但那是原生特性检测，和 Modernizr 无关 —— Modernizr 的价值恰恰在于补全 @supports 不支持的旧浏览器（如 IE9 及以下）。
立即学习“前端免费学习笔记（深入）”；
-
@supports在 IE 全系、Opera Mini、部分 Android 4.x 浏览器中完全不可用，Modernizr 是这些环境里唯一可靠的 fallback 方案 - 如果你只面向现代浏览器，其实应优先用
@supports，而不是 Modernizr —— 后者体积大、需构建、且增加初始 HTML 大小 - Modernizr 的 class 注入是同步完成的，但必须确保它的
<script>在<head>中尽早加载（不要 defer，不要 async），否则可能造成 FOUC 或 class 滞后
真正容易被忽略的是：Modernizr 的 class 仅写入 <html>，不会影响子元素的 class 列表，也不提供事件或回调。所有样式响应都依赖你是否写了足够细粒度、无歧义的 CSS 选择器 —— 少一个点、多一个空格，降级就失效。
