HTML5 / CSS3 特性检测

功能

• 六十多项检测，分四组：HTML 元素与属性、CSS 能力、浏览器 API、媒体格式
• CSS 用 `CSS.supports()` 实测 —— 比「写一个元素再读样式」可靠，后者会因默认值相同而误报
• 媒体格式用 `canPlayType()` 实测并显示返回值（probably / maybe）
• WebGL 2 会连渲染器版本一起显示
• 可以只看不支持的那几项 —— 排查环境问题时这就是全部要看的
• 一键复制一份纯文本报告，结尾带 UA（贴给别人时第一个要问的就是它）
• 不支持的项会展开一句说明，解释它到底检测的是什么
• 全部在本机完成，不发请求、不读 cookie

使用方法

1. 打开页面，检测自动跑完
2. 看顶部那个数字 —— 那是这台机器上支持的比例
3. 切到「只看不支持的」，那几项才是真正要处理的
4. 点「复制报告」，贴到工单或群里

常见问题

为什么不直接查兼容性表格？

因为表格答的是另一个问题。它给的是「某个版本起支持」，而真实的支持情况还取决于：操作系统（同一版浏览器在不同系统上能力不同）、设备（低端机上某些 API 被禁用）、用户设置（省电模式、隐私设置、企业策略都会关掉东西）、以及你所在的上下文（`crypto.subtle` 只在 HTTPS 下存在，Service Worker 也是）。表格适合做规划，而「现在这台机器上行不行」只能实测 —— 两者不冲突，但别拿前者当后者用。

检测出来的结果能当兼容性依据吗？

能，而且比表格更准 —— 但只对这台机器上这个浏览器成立。这个工具的用法不是「判断该不该用某个特性」，而是：用特性检测写代码（`if (CSS.supports(...))` / `if ("showPopover" in HTMLElement.prototype)`），让每个浏览器自己选路径。工具的价值在于让你事先知道哪些路径需要准备、以及排查「为什么我这里没效果」。

为什么不显示「你的浏览器是 XX 版本」？

因为按浏览器名和版本号判断能力是错的。UA 字符串可以被伪装，同一版本的浏览器在不同系统上能力不同，而且版本号与实际能力之间没有可靠的对应关系。正确的做法是检测能力本身（这个工具做的），而不是检测身份 —— 这也是「特性检测优于 UA 嗅探」那条老规矩的技术理由。报告里带 UA 只是为了让人知道这份结果来自哪里。

有些项显示不支持，但我觉得应该支持？

先看那项下面的说明。几种常见情况：需要 HTTPS（`crypto.subtle`、Service Worker、摄像头麦克风、剪贴板写入）、需要用户授权（地理位置、通知）、需要特定系统（File System Access API 只有 Chromium 系有）、被设置或策略禁用（无痕模式下的存储、企业策略下的 WebGL）。这些都不是「浏览器不支持」，而是「此刻在这个页面上用不了」—— 判据不同，处理方式也不同。