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' || //
-
document.createElement('video')在 Chrome 中返回一个有canPlayType方法的对象，说明内核识别它 - 对
、这类纯语义标签，不能靠方法判断，得用typeof document.createElement('section').getAttribute === 'function'或更稳妥的'classList' in document.createElement('section') - 别用
!!document.createElement('canvas').getContext—— 它在旧 Chrome（v10）里会返回undefined，但实际已支持，应直接调用getContext('2d')并捕获异常
用 Modernizr.js 快速验证全部 HTML5/CSS3 特性
手动检测每个特性太琐碎，Modernizr 是专为这事设计的库。它会在 document.documentElement 上添加 class（如 canvas、webgl），并暴露全局 Modernizr 对象。
在 Chrome 中引入后直接查：
立即学习“前端免费学习笔记（深入）”；
- 注意：Modernizr v3+ 默认只检测你配置的特性，要全量检测得用自定义构建或 v2.x
- Chrome 开发者工具里输入
Modernizr可直接看到所有布尔属性，比翻文档快得多 - 它检测的是“能力”，不是“版本号”——例如
Modernizr.flexbox在 Chrome v21+ 返回true，但 v21 的 flex 实现和 v50 差很多，仅靠这个值不能判断语法兼容性
打开 chrome://version 看内核版本，再查 caniuse 数据
Chrome 版本决定 HTML5 支持边界。比如 在 Chrome v95 才移除实验标志（chrome://flags/#enable-web-platform-features），v94 及之前必须手动启用或 fallback。
操作步骤：
- 地址栏输入
chrome://version→ 记下Google Chrome后的版本号（如126.0.6478.127） - 访问
https://caniuse.com/，搜索目标特性（如web-share-api），筛选 “Chrome” 列，找绿色格子对应最低支持版本 - 注意右上角的“Notes”：有些特性（如
IntersectionObserver）在早期 Chrome 版本中存在内存泄漏 bug，即使标 ✅ 也不建议在 v51–v55 生产使用
在 DevTools Console 里直接运行 HTML5 API 测试命令
不用写完整页面，打开任意网页按 F12 → Console，粘贴以下命令快速验证：
// 检查 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
- 某些 API（如
Notification）即使存在，首次调用也会触发权限请求，不要只看'notification' in window就认为可用，得结合Notification.permission状态判断 -
WebRTC相关对象（RTCPeerConnection）在 Chrome 中默认启用，但若启用了“限制第三方 Cookie”策略，部分功能（如getStats()）会静默失败 - 控制台里执行
location.protocol，如果是file://协议，多数 HTML5 API（localStorage、fetch、ServiceWorker）会被浏览器主动禁用，此时检测结果为 false 属于预期行为，不是 Chrome 不支持
