谷歌浏览器如何检测HTML5支持？

一分耕耘，一分收获！既然都打开这篇《谷歌浏览器如何检测HTML5支持？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

Chrome检测HTML5元素支持需用document.createElement模拟创建并检查特有属性或方法，如canPlayType、getContext、contentEditable等；语义标签用'classList' in判断；Modernizr可批量检测，但注意其返回的是能力而非完整兼容性。

用 document.createElement 检测 HTML5 元素是否被原生支持

Chrome 从很早版本（v4+）就支持绝大多数 HTML5 新增元素，但“支持”不等于“能用”——关键看浏览器是否识别该标签并赋予默认样式/行为。比如 被识别了，才可能播放； 被识别了，getContext 才不会报 undefined 错误。

最可靠的方式是模拟创建元素并检查其属性：

function supportsHtml5Element(tagName) {
  return typeof document.createElement(tagName).canPlayType === 'function' || // <audio>/<video>
         typeof document.createElement(tagName).getContext === 'function' || // <canvas>
         tagName === 'input' && 'placeholder' in document.createElement(tagName) || // input 属性
         'contentEditable' in document.createElement(tagName); // 如 <article> 等语义标签虽无方法，但可检测是否存在
}

console.log(supportsHtml5Element('video')); // true（Chrome 默认支持）
console.log(supportsHtml5Element('details')); // true（Chrome v12+ 支持）
console.log(supportsHtml5Element('dialog')); // true（Chrome v95+ 原生支持，旧版需 polyfill）

• document.createElement('video') 在 Chrome 中返回一个有 canPlayType 方法的对象，说明内核识别它
• 对
  、
• 别用 !!document.createElement('canvas').getContext —— 它在旧 Chrome（v10）里会返回 undefined，但实际已支持，应直接调用 getContext('2d') 并捕获异常

用 Modernizr.js 快速验证全部 HTML5/CSS3 特性

手动检测每个特性太琐碎，Modernizr 是专为这事设计的库。它会在 document.documentElement 上添加 class（如 canvas、webgl），并暴露全局 Modernizr 对象。

在 Chrome 中引入后直接查：

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
  console.log(Modernizr.canvas);      // true
  console.log(Modernizr.webworkers); // true
  console.log(Modernizr.localstorage); // true
  console.log(Modernizr.history);    // true（pushState 支持）
</script>

• 注意：Modernizr v3+ 默认只检测你配置的特性，要全量检测得用自定义构建或 v2.x
• Chrome 开发者工具里输入 Modernizr 可直接看到所有布尔属性，比翻文档快得多
• 它检测的是“能力”，不是“版本号”——例如 Modernizr.flexbox 在 Chrome v21+ 返回 true，但 v21 的 flex 实现和 v50 差很多，仅靠这个值不能判断语法兼容性

打开 chrome://version 看内核版本，再查 caniuse 数据

Chrome 版本决定 HTML5 支持边界。比如

// 检查 localStorage 是否可用（且未被禁用）
try { localStorage.setItem('test', 'ok'); localStorage.removeItem('test'); console.log('localStorage: OK'); } catch(e) { console.log('localStorage: FAIL', e); }

// 检查 fetch 是否存在且可用（Chrome v42+ 原生支持）
console.log('fetch' in window); // true

// 检查 WebSockets（Chrome v4+ 支持，但需服务端配合）
console.log(WebSocket.prototype.bufferedAmount !== undefined);

// 检查 Geolocation（依赖用户授权，但 API 存在性可立即验证）
console.log('geolocation' in navigator); // true