特征检测应优先于版本检测，用'in'检查全局属性（如'fetch' in window）、方法存在性（如'showModal' in document.createElement('dialog')）和CSS.supports()判断CSS特性，避免依赖不可靠的userAgent。
用 in 检测全局对象属性最直接
很多新 api（比如 fetch、intersectionobserver）挂载在 window 或 navigator 上，直接查属性是否存在比查版本更可靠。
- 别写
typeof window.fetch !== 'undefined'—— 冗余，'fetch' in window更快更直观 - 注意大小写：
'localStorage' in window✅，'localstorage' in window❌ - 某些 API 在旧版 Safari 中存在但报错（如
ResizeObserver），in只管定义，不管可用性，得配合 try/catch
document.createElement 检测 HTML 元素支持
像 dialog、details 这类语义化标签，浏览器可能解析但不实现行为。光看标签能否被创建不够，还得看原型链。
- 基础检测：
'showModal' in document.createElement('dialog')—— 判断是否真有方法 - IE11 会创建
dialog元素但没showModal，所以必须查方法而非元素本身 - 部分安卓 WebView 会返回
HTMLUnknownElement，此时instanceof HTMLDialogElement为 false
用 CSS.supports 判断 CSS 特性是否生效
CSS 新特性（如 aspect-ratio、container-type）不能靠 JS 对象判断，必须走 CSSOM 接口。
- 写法固定：
CSS.supports('aspect-ratio', '1/1')或CSS.supports('color', 'oklch(50% 0.2 120)') - 别漏引号：参数必须是字符串，
CSS.supports('display', 'grid')✅，CSS.supports(display, grid)❌ - 部分浏览器支持语法但渲染异常（如早期 Chrome 的
@container），CSS.supports返回 true 不代表能用，建议加视觉 fallback
特征检测不是版本检测，别碰 navigator.userAgent
UA 字符串不可靠，Chrome 120 和 Edge 120 都可能返回类似 Chrome/120.0.0.0，但 WebGPU 支持程度不同。
- UA 解析库（如 UAParser.js）只是妥协方案，仅用于统计或降级提示，不能作为功能开关依据
- 服务端 UA 检测更危险：同一浏览器不同设备（桌面/平板/折叠屏）能力差异大，客户端检测才真实
- 真正要兼容老环境时，优先用 polyfill + 特征检测组合，而不是写一堆 if (UA.includes('Safari'))
特征检测的麻烦点不在写法，而在边界情况：API 存在但抛错、CSS 支持但渲染错位、事件注册了却不触发。每次加检测前，先在目标浏览器里手动 console.log 看一眼原型和返回值，比查文档更快。
立即学习“前端免费学习笔记（深入）”；
