HTML5兼容性检测方法详解

最轻量、最可靠的检测方式是手动创建一个 HTML5 标签，再检查它是否具有标准元素行为：

function supportsHtml5() {
  return 'querySelector' in document &&
         'createElement' in document &&
         (function() {
           var el = document.createElement('header');
           el.innerHTML = 'x';
           return el.childNodes.length === 1;
         })();
}

这个函数避开依赖 document.doctype 或 UA 字符串（不可靠），直接测试行为：能否创建、能否正常插入内容、DOM 是否响应。返回 true 基本意味着可安全使用语义化标签。

检查 localStorage 和 sessionStorage 是否可用

很多“HTML5 功能”其实是独立的 Web API，和标签无关，但常被当作兼容性指标。比如 localStorage 在 IE7 及更早版本完全不可用，IE8 开始支持但仅限于本地文件协议（file://）下可能失效。

检测必须加 try-catch，因为某些环境（如隐私模式下的 Safari）会抛出异常：

• typeof localStorage !== 'undefined' 不够 —— Safari 隐私模式中 localStorage 存在但访问即报错
• 必须实际读写一次才能确认可用性

function supportsLocalStorage() {
  try {
    const key = '__storage_test__';
    localStorage.setItem(key, key);
    localStorage.removeItem(key);
    return true;
  } catch (e) {
    return false;
  }
}

用 Modernizr 替代手写检测（适合多特性场景）

如果项目需要同时判断 Canvas、Geolocation、Web Workers、Flexbox 等几十项能力，自己一个个写检测逻辑既重复又易错。这时候 Modernizr 是合理选择 —— 它不是“检测 HTML5”，而是按需检测具体 API。

注意两点：

• 不要引入完整版 modernizr.js（几百 KB），用官网定制构建只保留你需要的检测项
• 它不会帮你“降级”，只是提供 Modernizr.canvas 这类布尔值，后续逻辑仍需你写

例如加载后直接用：

if (Modernizr.websockets) {
  // 初始化 WebSocket 连接
} else {
  // 回退到轮询或提示不支持
}

别信 document.doctype 或

很多人误以为只要页面写了 就“用了 HTML5”，其实这只是触发浏览器的标准模式（standards mode），跟功能支持无关。IE6 即使声明了 HTML5 doctype，依然不支持 querySelector 或 localStorage。

同样，document.doctype 在 IE8- 中可能为 null，且即使存在也无法反映运行时能力。真正有意义的永远是「能不能做某件事」，而不是「文档声明了什么」。

复杂点在于：同一浏览器不同上下文表现可能不同（比如 Chrome 扩展页禁用 localStorage，iOS WebView 对 fetch 的 Promise 支持滞后）。所以检测逻辑最好封装成可重试、带 fallback 的小函数，而不是一次性全局判断。

终于介绍完啦！小伙伴们，这篇关于《HTML5兼容性检测方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！