HTML5Test网站在线检测浏览器API支持度，Modernizr用于页面内特性判断，caniuse-api/browserslist查兼容性数据，手写检测需规避隐私模式等陷阱。
HTML5Test 网站直接测，不用安装
HTML5 兼容性检测工具绝大多数是在线服务，html5test.com 是最常用、更新最及时的。打开浏览器访问就能立刻出分，无需下载、无需安装、不写配置。它会自动运行一整套 Canvas、WebGL、Web Workers、localStorage 等 API 检测，最后给出总分和各模块支持详情。
注意：html5test.com 测的是「当前浏览器」的能力，不是你写的 HTML 文件是否合规——它不校验语法或语义错误，只看底层 API 是否可用。
本地跑 HTML5 检测？用 Modernizr 手动集成
如果你需要在自己的页面里判断某个 HTML5 特性是否存在（比如用户能否用 input type="date"），就得引入 Modernizr。它不是“测试工具”，而是一个特性检测库，适合开发阶段做渐进增强。
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
if (Modernizr.inputtypes.date) {
console.log('支持原生日期选择器');
} else {
// 加载 polyfill 或 fallback UI
}
</script>
-
Modernizr不检测全部 HTML5 标签，只覆盖它内置的约 100 个特性（含 CSS3） - 自定义构建可减小体积：去
modernizr.com/download勾选需要的检测项再下载 - 它依赖
标签上自动添加的 class（如no-draganddrop），别手动删掉
命令行查浏览器支持？用 caniuse-api 或 browserslist
前端工程中常需知道某特性在哪些浏览器版本可用，这时不用开网页，直接查数据源：
立即学习“前端免费学习笔记（深入）”；
$ npx caniuse-cli flexbox ✓ flexbox: Chrome 21+, Firefox 20+, Safari 6.1+, iOS Safari 7.0+, Android Browser 4.4+
-
caniuse-api和browserslist都基于caniuse.com的数据库，但后者更常用于构建工具（如 Babel、Autoprefixer） - 别直接信
caniuse-cli返回的“Chrome 21+”——某些 Android WebView 或旧版 Edge 可能有兼容性断层 - 若项目用
postcss，在.browserslistrc里写last 2 versions, not dead，比手动查更贴近真实构建行为
自己写检测脚本？避开常见陷阱
手写特性检测看似简单，但容易误判。比如检测 localStorage：
// ❌ 错误：仅检查全局变量存在性
if (window.localStorage) { ... }
// ✅ 正确：还要捕获 QuotaExceededError 和 SecurityError
try {
const test = '__storage_test__';
localStorage.setItem(test, test);
localStorage.removeItem(test);
} catch (e) {
// 可能是隐私模式（Safari 无痕）、禁用、或配额超限
}
- 很多 API 在隐私模式下会抛
SecurityError，而非返回undefined -
document.createElement('canvas').getContext('2d')返回null表示不支持 2D 渲染，但不等于不支持canvas标签本身 - 检测
fetch不能只看window.fetch，IE 完全没实现，但某些 polyfill 会挂载到window上导致误判
html5test.com 给 Safari 95 分，不代表你的 WebRTC 应用就能跑通，还得看权限、HTTPS、设备摄像头是否就绪。 
