html5如何检测浏览器兼容性_特性支持检测方法汇总【方法】

Modernizr 是全局特性检测最省心方案，通过 HTML 类名和 Modernizr 对象支持多特性检测；原生 JS 可用 in 操作符、CSS.supports() 和 Image 实测分别检测 API、CSS 和图片格式支持。

用 Modernizr 做全局特性检测最省心

如果你需要同时检测多个 HTML5/CSS3 特性（比如 localStorage、flexbox、canvas、webp），Modernizr 仍是目前最成熟的方案。它会在 元素上添加类名（如 no-flexbox 或 webp），也暴露全局 Modernizr 对象供 JS 判断。

注意：不要直接引入完整版，用官网的自定义构建页（modernizr.com/download）只勾选你需要的检测项，否则会拖慢首屏加载。

• CDN 加载示例：

• JS 中判断：

  if (Modernizr.canvas) {/* 使用 canvas */}
  if (!Modernizr.webp) {/* fallback 到 jpg/png */}

• CSS 中利用类名：

  .webp .hero-bg {background-image: url(hero.webp); }
  .no-webp .hero-bg {background-image: url(hero.jpg); }

原生 JS 检测单个 API 是否可用（不依赖库）

多数 HTML5 API 可通过检查全局对象或构造函数是否存在来判断，但要注意：存在 ≠ 可用（比如 Promise 在某些 安卓 WebView 中存在但有 bug）；有些需调用后捕获异常（如 fetch）。

• localStorage：

  if ('localStorage' in window && window.localStorage !== null) {/* 安全使用 */}

  （仅检查存在不够，iOS 私隐模式下 localStorage 存在但抛错）

• fetch：

  if (window.fetch) {
    fetch('/api').catch(err => console.warn('fetch failed:', err));
  } else {/* 降级用 XMLHttpRequest */}

• IntersectionObserver：

  if ('IntersectionObserver' in window) {/* 可用 */} else {/* 加载 polyfill 或跳过懒加载逻辑 */}

检测 CSS 特性用 CSS.supports() 最准

CSS.supports() 是 W3C 标准方法，比查 style 属性或尝试赋值更可靠，支持属性名 + 值对、或仅属性名两种写法。

立即学习 “ 前端免费学习笔记（深入）”；

• 检测 inset（CSS Logical Properties）：

  if (CSS.supports('inset: 10px')) {/* 支持 */}

• 检测 contain：

  if (CSS.supports('contain', 'layout')) {/* 支持 layout containment */}

• 注意：Safari 15.4+ 才开始支持 CSS.supports() 的第二参数形式（即属性 + 值），旧版只能用字符串规则，如 CSS.supports('display: flex')

图片格式支持不能只看 ，得实测解码

和 srcset 是响应式语法糖，不等于 浏览器 真能解码 WebP/AVIF。尤其 Android 4.4–6 的 WebView、部分国产浏览器内核，会静默忽略不支持的格式并回退到第一个 ，但不报错。

• 安全做法是用 Image 对象触发解码并监听 load/error：

  const img = new Image();
  img.onload = () => console.log('webp supported');
  img.onerror = () => console.log('webp not supported');
  img.src = 'test.webp';

• 避免在页面初始化时批量探测——大量 Image 请求会阻塞资源，建议按需探测或缓存结果
• 服务端 UA 判断不可靠：很多浏览器伪造 UA，且同一 UA 下不同版本支持度可能不同

实际项目里，混合使用这几种方式最稳妥：用 CSS.supports() 控制样式分支，用 if ('xxx' in window) 快速筛掉老浏览器，对关键功能（如图片加载、离线缓存）做运行时实测。别忘了，特性检测不是一劳永逸——用户可能中途禁用某项权限（如摄像头），或系统升级后行为变更。