最轻量可靠的HTML5新标签检测是用document.createElement创建标签并验证DOM行为；localStorage需try-catch读写测试；Modernizr适合多特性场景但需定制构建；doctype声明不等于功能支持。
用 document.createElement 检测是否支持 HTML5 新标签
HTML5 兼容性不是“全有或全无”，关键看浏览器是否能正确解析并渲染新标签（如 、）。老版 IE（尤其是 IE8 及以下）不识别这些标签，会把它们当未知元素，导致无法设置样式、querySelector 查不到、甚至被忽略在 DOM 中。
最轻量、最可靠的检测方式是手动创建一个 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 的小函数，而不是一次性全局判断。
