HTML5特性检测方法全解析

本文系统梳理了HTML5特性检测的三大核心策略：推荐使用Modernizr进行全局、可靠的DOM级特性检测（注意v3+需定制构建以避免性能损耗），针对单个API则优先采用轻量级的原生JS组合检测（如in/typeof/!!，并兼顾可用性而非仅存在性），CSS特性检测首选标准CSS.supports()但需谨慎处理兼容性与自定义属性限制，最后强调真正的健壮性在于运行时动态检测——根据加载、挂载、交互等多时机持续验证能力，而非依赖一次性初始化判断，从而应对设备切换、PWA安装、权限变化等真实场景中的环境波动。

用 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()）只能在用户手势后调用，检测“存在”不等于“可立即使用”。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~