modernizr仅检测浏览器特性支持与否，不修复兼容问题；检测结果以html类名形式注入，css应直接据此编写降级样式，而非用js动态添加类或依赖modernizr布尔值控制样式。
Modernizr 本身不修复任何兼容缺陷，它只告诉你“浏览器支不支持”，后续的样式降级或脚本补全必须你手动写 —— 这是绝大多数人一开始就想错的地方。
检测结果全靠 html 上的类名，不是靠 JS 判断后改样式
Modernizr 在页面加载时就把检测结果写进 标签的 class 属性里，比如支持 border-radius 就加 border-radius 类，不支持就加 no-border-radius。这些类名就是你写 CSS 的开关。
- 错误做法：
if (Modernizr.borderradius) { document.body.classList.add('has-radius'); }—— 多此一举，且容易因执行时机晚导致 FOUC（闪动） - 正确写法：直接在 CSS 里用
.border-radius .card和.no-border-radius .card分别定义样式 - 务必把
<script src="modernizr.js"></script>放在最顶部，否则首屏渲染时类名还没加上，CSS 已经解析完了 - 检查是否生效：打开开发者工具，看
标签上有没有出现类似csstransforms no-flexbox这样的类 —— 没有说明脚本没执行或路径错了
Modernizr.xxx 布尔值只适合触发 JS 行为，不适合控制样式
Modernizr.flexbox 这类属性是 JS 运行时才有的布尔值，CSS 解析阶段根本读不到它。所以别在 CSS 里幻想写 @supports (Modernizr.flexbox) {} —— 语法都不合法。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- JS 中可用它做逻辑分支：比如
if (!Modernizr.cssanimations) { import('./fallback-anim.js'); } - 要避免重复加载：加个标记变量，如
if (!window._polyfillLoaded && !Modernizr.cssgradients) - 注意：内置检测不等于实际可用，比如
Modernizr.csscalc返回true，不代表calc(100vh - 50px)在旧版 Safari 里不出错 —— 得查 caniuse 具体子项 -
Modernizr.load已废弃，别在新项目里用；推荐用原生import()动态导入 Polyfill
降级不能只靠 CSS 类，视觉和行为要分开处理
一个 .no-flexbox 类能帮你切到 float 布局，但它解决不了“子元素等高”这种 Flexbox 原生能力。这时候就得 JS 补逻辑，或者换更稳妥的布局方案。
- 视觉降级（CSS）：用
.no-grid切到flexbox或display: table，别硬塞 JS 模拟 Grid - 行为补全（JS）：比如
!Modernizr.localstorage时，改用内存缓存或cookie存临时数据 - 某些特性没有靠谱 Polyfill，例如
cssgrid—— 强行用 JS 模拟会导致滚动卡顿、重排严重，不如早切布局 - 别忘了
.no-js类：它在 JS 加载前短暂存在，可用于纯 CSS fallback，比如.no-js .hero-banner { background-image: url(fallback.jpg); }
真正容易被忽略的点是：Modernizr 检测的是“能不能用”，不是“用得稳不稳”。同一个 csstransforms 在 IE10 和 Android 4.3 上表现可能完全不同，而 Modernizr 只会统一返回 true。上线前必须在目标机型上实测关键动效和布局流变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
