Modernizr 是全局特性检测最省事方案，通过 DOM 测试而非 UA 判断 API 支持，v3+ 需定制构建；单 API 检测用 in/typeof/!! 组合更轻量；CSS 特性优先用 CSS.supports()，兼容性不足时回退到 style 属性探测；运行时动态检测比加载时更关键。
用 Modernizr 做全局特性检测最省事
如果你需要在页面加载初期就判断多个 API 是否可用（比如 localStorage、WebGL、flexbox），Modernizr 仍是目前最稳妥的方案。它不依赖 UA 字符串，而是通过创建 DOM 元素并测试其属性/方法是否存在来判断支持情况。
注意：新版 Modernizr（v3+）默认只打包你勾选的测试项，务必去官网定制构建，否则全量版会拖慢首屏。CDN 上的预编译版本往往包含大量无用检测逻辑。
- 直接在
中引入后，Modernizr会自动给添加 class，如webgl、no-flexbox - JS 中可用
Modernizr.webgl、Modernizr.localstorage等布尔值做条件分支 - 避免在
Modernizr加载完成前读取这些属性——建议把依赖它的脚本放在Modernizr后，或监听load事件
原生 JS 检测单个 API 用 in、typeof 和 !! 组合最可靠
对单一接口（如 fetch、IntersectionObserver）做轻量检测时，不用引入库。但不同 API 的检测方式有差异，不能一概而用 typeof xxx === 'function'。
例如：fetch 在某些旧版 Safari 中存在但不可用（抛错），仅检查类型不够；而 ResizeObserver 在 Chrome 64+ 才支持，且构造函数必须可调用才代表真正可用。
立即学习“前端免费学习笔记（深入）”；
-
fetch：用typeof window.fetch === 'function' && typeof window.Headers === 'function' -
IntersectionObserver：用typeof window.IntersectionObserver === 'function' && 'IntersectionObserver' in window -
localStorage：需尝试写入再读取，因为部分浏览器（如 Safari 无痕模式）会让localStorage存在但抛出QuotaExceededError
检测 CSS 特性用 CSS.supports()，但兼容性要查清
CSS.supports() 是标准方法，支持传入属性名/值对（如 CSS.supports('display', 'grid')）或整个声明块（CSS.supports('display: grid')）。但它在 IE 完全不支持，Safari 9.1+ 才开始支持，且早期版本对自定义属性支持不一致。
若需兼容到 iOS 9 或 Android 4.4，建议 fallback 到 document.createElement + style 属性探测：
const div = document.createElement('div');
if ('grid' in div.style) {
// 支持 display: grid
}
-
CSS.supports()对逻辑表达式（如CSS.supports('(display: grid) or (display: flex)')）的支持度更低，慎用 - 检测 CSS 自定义属性（
--my-color）不能靠CSS.supports()，得用getComputedStyle读取是否为空字符串 - 不要在循环中反复调用
CSS.supports()，它有一定开销，检测结果可缓存
运行时检测比加载时检测更关键
很多开发者只在页面初始化时检测一次特性，但用户行为可能触发环境变化：比如从桌面切到移动端横屏、PWA 被安装后获得新权限、甚至系统级字体策略更新影响 @font-face 加载。
真正健壮的检测逻辑，应结合时机：
- 首次加载时检测基础能力（如
fetch、Promise） - 组件挂载前检测其依赖（如图表库用到
canvas.getContext('2d')，需确保上下文非 null） - 用户交互后动态验证（如上传前检查
FileReader是否可用，而不是假设它一直存在）
尤其注意：某些 API（如 Notification.requestPermission()）只能在用户手势后调用，检测“存在”不等于“可立即使用”。
