Modernizr检测需DOM就绪后执行，localStorage和geolocation须try/catch及回调验证，canPlayType返回非布尔值，CSS支持应优先用CSS.supports()并缓存结果。
用 Modernizr 检测 HTML5 特性最省事，但得注意加载时机
直接在 DOM 加载前调用 Modernizr 的属性会返回 undefined，因为检测逻辑依赖于 DOM 就绪后的元素创建与样式读取。常见错误是把判断写在 <head> 里、没等 DOMContentLoaded 就查 Modernizr.canvas 或 Modernizr.webp。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
Modernizr脚本放在<body>底部，或用defer属性加载 - 检测逻辑放在
DOMContentLoaded回调或$(document).ready()中（如果用了 jQuery） - 不推荐用
load事件——它等所有资源（含图片）加载完，太晚 - 若只检测一两个特性（如
localStorage），可跳过 Modernizr，手写更轻量
手写 localStorage 和 geolocation 检测要防报错
localStorage 在隐私模式（如 Safari 无痕、Chrome 无痕+第三方 Cookie 阻止）下可能抛出 SecurityError；geolocation 则可能因权限拒绝或设备不支持返回 undefined 或触发失败回调。不能只靠 typeof navigator.geolocation !== 'undefined' 就认为可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
localStorage检测必须加try/catch：function hasLocalStorage() { try { const key = '__test__'; localStorage.setItem(key, key); localStorage.removeItem(key); return true; } catch (e) { return false; } } -
geolocation要结合存在性 + 可用性：if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( () => { /* 成功 */ }, () => { /* 失败：拒接/不可用/超时 */ } ); } else { // 浏览器原生不支持 } - 别在服务端 UA 判断代替运行时检测——UA 可伪造，且同个浏览器不同模式行为不同
HTMLMediaElement 的 canPlayType() 返回值含义容易误解
video.canPlayType('video/mp4') 不是布尔值，而是返回 'probably'、'maybe' 或空字符串。很多开发者误把 'maybe' 当作“不支持”，其实它表示“格式合法但无法确认是否能解码”。Safari 对 webm 常返回 ''，但实际支持 VP9（需看具体 codec 参数）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只把
'probably'视为高置信度支持，'maybe'建议作为备选格式兜底 - 检测 WebP 图片支持不能只靠
canPlayType，要用Image+onload/onerror动态加载测试 - 对
audio格式，canPlayType('audio/wav')在 Firefox 返回'probably'，Chrome 却是''——差异真实存在，得实测
自定义 supports 检测函数要注意 CSSOM 读取开销
用 document.createElement('div').style.cssText = 'display: grid;' 再读取 style.display 是无效的——内联样式写入后不会自动映射回 JS 属性。正确方式是设置属性后，用 getComputedStyle 或检查 style.grid（现代浏览器）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测 CSS Grid：
function supportsGrid() { return CSS.supports('display', 'grid'); }——这是最准的方式，IE 不支持，但 IE 本来就不支持 Grid - 兼容老浏览器可用：
function supportsGridFallback() { const div = document.createElement('div'); div.style.display = 'grid'; return div.style.display === 'grid'; } - 避免高频调用：CSS 支持检测结果不会变，应缓存一次，后续直接读变量
-
CSS.supports()对函数语法（如color-mix()）支持不一，Chrome 117+ 才开始逐步支持新特性，别默认全平台可用
检测 HTML5 特性不是“有或没有”的二值判断，而是“能否安全使用+降级是否合理”的连续决策。最容易被忽略的是：同一特性在不同上下文（如 iframe、sandbox、隐私模式）中行为可能突变，运行时检测永远比构建时假设可靠。
