Modernizr 是全局特性检测最省心方案，通过 HTML 类名和 Modernizr 对象支持多特性检测；原生 JS 可用 in 操作符、CSS.supports() 和 Image 实测分别检测 API、CSS 和图片格式支持。
用 Modernizr 做全局特性检测最省心
如果你需要同时检测多个 HTML5/CSS3 特性（比如 localStorage、flexbox、canvas、webp），Modernizr 仍是目前最成熟的方案。它会在 元素上添加类名（如 no-flexbox 或 webp），也暴露全局 Modernizr 对象供 JS 判断。
注意：不要直接引入完整版，用官网的自定义构建页（modernizr.com/download）只勾选你需要的检测项，否则会拖慢首屏加载。
- CDN 加载示例：
- JS 中判断：
if (Modernizr.canvas) { /* 使用 canvas */ }
if (!Modernizr.webp) { /* fallback 到 jpg/png */ } - CSS 中利用类名：
.webp .hero-bg { background-image: url(hero.webp); }
.no-webp .hero-bg { background-image: url(hero.jpg); }
原生 JS 检测单个 API 是否可用（不依赖库）
多数 HTML5 API 可通过检查全局对象或构造函数是否存在来判断，但要注意：存在 ≠ 可用（比如 Promise 在某些安卓 WebView 中存在但有 bug）；有些需调用后捕获异常（如 fetch）。
-
localStorage：if ('localStorage' in window && window.localStorage !== null) { /* 安全使用 */ }（仅检查存在不够，iOS 私隐模式下localStorage存在但抛错） -
fetch：if (window.fetch) {
fetch('/api').catch(err => console.warn('fetch failed:', err));
} else { /* 降级用 XMLHttpRequest */ } -
IntersectionObserver：if ('IntersectionObserver' in window) { /* 可用 */ } else { /* 加载 polyfill 或跳过懒加载逻辑 */ }
检测 CSS 特性用 CSS.supports() 最准
CSS.supports() 是 W3C 标准方法，比查 style 属性或尝试赋值更可靠，支持属性名+值对、或仅属性名两种写法。
立即学习“前端免费学习笔记（深入）”；
- 检测
inset（CSS Logical Properties）：if (CSS.supports('inset: 10px')) { /* 支持 */ } - 检测
contain：if (CSS.supports('contain', 'layout')) { /* 支持 layout containment */ } - 注意：Safari 15.4+ 才开始支持
CSS.supports()的第二参数形式（即属性+值），旧版只能用字符串规则，如CSS.supports('display: flex')
图片格式支持不能只看
srcset 是响应式语法糖，不等于浏览器真能解码 WebP/AVIF。尤其 Android 4.4–6 的 WebView、部分国产浏览器内核，会静默忽略不支持的格式并回退到第一个
- 安全做法是用
Image对象触发解码并监听load/error：const img = new Image();
img.onload = () => console.log('webp supported');
img.onerror = () => console.log('webp not supported');
img.src = 'test.webp'; - 避免在页面初始化时批量探测——大量
Image请求会阻塞资源，建议按需探测或缓存结果 - 服务端 UA 判断不可靠：很多浏览器伪造 UA，且同一 UA 下不同版本支持度可能不同
实际项目里，混合使用这几种方式最稳妥：用 CSS.supports() 控制样式分支，用 if ('xxx' in window) 快速筛掉老浏览器，对关键功能（如图片加载、离线缓存）做运行时实测。别忘了，特性检测不是一劳永逸——用户可能中途禁用某项权限（如摄像头），或系统升级后行为变更。
