JavaScript怎么检测浏览器是否支持HTML5特性

在前端开发中，检测浏览器是否支持某个 HTML5 特性的核心方法是特性检测（Feature Detection）：通过在 JavaScript 中直接检查全局对象、DOM 节点或原型链上是否存在特定的属性或方法，或者执行小范围的功能调用来确认该功能是否可用，而不是通过解析 navigator.userAgent 去猜测浏览器版本。使用特性检测不仅代码清晰可靠，而且能够精准兼容未来浏览器或不同运行环境。

为什么必须使用特性检测

在早期的 Web 编程中，不少开发者习惯于利用 navigator.userAgent 获取一段长字符串，再通过复杂的正则表达式寻找浏览器名字（如 "MSIE"、"Firefox"、"Chrome"）及版本号。然而，由于绝大多数浏览器为了向下兼容历史网站，都会在自身的 User-Agent 字符串中加入其他浏览器的标识符，这使得匹配规则极其脆弱。

更重要的是，同一个浏览器的不同定制版、手机厂商内核甚至特定的隐私模式，都可能对特定 HTML5 特性进行关闭或限制。只有特性检测（Feature Detection）关注的是“当前运行环境是否提供了这项能力”，能够做到就事论事，无论运行在桌面端、移动端 WebView 还是嵌入式设备上都能给出准确的布尔结果。

四种核心检测范式

检测 HTML5 特性并非只有一种固定写法，根据特性的实现层面，前端通常分为四种常见的检测模式：

• 模式一：全局对象属性检测（如 window 或 navigator 上的原生对象）。
• 模式二：DOM 元素属性探测（动态创建虚拟元素，检测其原型或实例上是否存在对应属性或方法）。
• 模式三：方法调用与异常捕获（针对存在虚假暴露或无痕模式限制的 API，如 LocalStorage，必须做实际的读写尝试）。
• 模式四：探测能力返回值（如媒体格式支持检测 canPlayType）。

实战：常见 HTML5 特性的具体检测代码

1. 检测 Canvas 及其 2D 上下文

仅检测 <canvas> 标签存在是不够的，因为即使未知标签在老旧浏览器中也会被解析为普通元素。必须验证其 getContext 方法并尝试获取 2D 绘图上下文：

function checkCanvasSupport() {
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

if (checkCanvasSupport()) {
  // 可以安全地初始化图表、绘制图形
} else {
  // 回退展示纯静态图片或提示信息
}

2. 检测 LocalStorage（本地存储）的特殊坑位

很多开发者仅通过 'localStorage' in window 判断，但在 Safari 或其它开启了“无痕模式/隐私浏览”的浏览器中，全局虽然暴露了 window.localStorage，但在调用 setItem 时会直接抛出 QuotaExceededError 异常。因此必须执行一次实际的写入与删除测试：

function checkLocalStorageSupport() {
  var testKey = '__test_ls_key__';
  try {
    localStorage.setItem(testKey, '1');
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

3. 检测地理位置定位（Geolocation）

Geolocation 挂载在全局的 navigator 对象下，使用 in 操作符能够最快确认该属性是否存在：

function checkGeolocationSupport() {
  return 'geolocation' in navigator;
}

4. 检测音视频能力及特定编解码格式

检测浏览器是否支持 <video> 或 <audio>，并进一步测试其能否解码特定封装格式（例如 MP4 / WebM）。canPlayType 会返回 "probably"、"maybe" 或 ""（空字符串表示完全不支持）：

function checkVideoSupport() {
  var v = document.createElement('video');
  return !!v.canPlayType;
}

function checkH264Support() {
  var v = document.createElement('video');
  if (!v.canPlayType) return false;
  
  // 必须传入标准MIME格式
  var playability = v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  return playability === 'probably' || playability === 'maybe';
}

综合封装：构建轻量级检测工具模块

为了在实际项目中方便复用，避免每次都手写冗长的 DOM 测试代码，我们可以将最常用的 HTML5 特性检测封装为一个统一的对象。以下代码无需任何外部依赖，可直接引入项目：

var HTML5Support = (function() {
  var elem = document.createElement('canvas');
  var videoElem = document.createElement('video');
  var inputElem = document.createElement('input');

  return {
    // 1. Canvas 绘图
    canvas: !!(elem.getContext && elem.getContext('2d')),

    // 2. WebGL 3D渲染
    webgl: (function() {
      try {
        return !!(window.WebGLRenderingContext && (elem.getContext('webgl') || elem.getContext('experimental-webgl')));
      } catch (e) {
        return false;
      }
    })(),

    // 3. 本地存储 (包含无痕模式防报错)
    localStorage: (function() {
      var key = '__test_support__';
      try {
        localStorage.setItem(key, '1');
        localStorage.removeItem(key);
        return true;
      } catch (e) {
        return false;
      }
    })(),

    // 4. 地理位置
    geolocation: 'geolocation' in navigator,

    // 5. Web Worker
    webWorker: typeof window.Worker !== 'undefined',

    // 6. 原生视频播放能力
    video: !!videoElem.canPlayType,

    // 7. Input 占位符支持
    placeholder: 'placeholder' in inputElem
  };
})();

// 在业务中直观使用：
if (HTML5Support.localStorage) {
  localStorage.setItem('theme', 'dark');
} else {
  // 降级为基于 Cookie 或内存状态存储
  document.cookie = 'theme=dark; path=/';
}

何时选择 Modernizr 工具库

如果项目需要检测数十个乃至上百个细粒度的 HTML5/CSS3 特性（例如多种动画过渡、SVG 滤镜、Flexbox、IndexedDB 等），自行编写检测代码的工作量会比较大。此时可以引入开源的 Modernizr 库。

Modernizr 会在页面加载完成后自动在 <html> 根标签上添加形如 .canvas 或 .no-canvas 的样式类名，同时暴露一个全局的 Modernizr 对象供 JavaScript 调用：

// Modernizr 调用方式与原生特性检测理念完全相同
if (Modernizr.canvas) {
  // 原生支持
} else {
  // 加载 polyfill 备用
}

注意事项与总结

在实施特性检测时，以下几个工程细节需要格外注意：

1. 避免污染 DOM 树：创建探测用的虚拟节点（如 document.createElement('canvas')）仅用于内存检测即可，切勿将其 appendChild 插入到真实 DOM 树中，避免引发不必要的重排与重绘。
2. 只检测用到的能力：不要盲目引入庞大的全量检测脚本，应当只在业务真正依赖某个 HTML5 接口时才执行探测。
3. 提供合理的降级方案：特性检测的目的不是为了拦截用户，而是在得知当前环境不满足要求时，能够从容加载替代脚本（Polyfill）或者展示友好的替代界面。