浏览器兼容性检查器

浏览器兼容性检测工具回答一个很具体的问题:你现在正在使用的这个浏览器,能不能识别某一条 CSS 声明,比如 display: grid 或者 text-wrap: balance。你输入一个 CSS 属性名和一个属性值,页面会立刻告诉你当前浏览器支持还是不支持。它背后用的是浏览器自带的 CSS.supports 接口。需要先说明它不能做的事:它只能检测「当前这一个浏览器」,不能一次列出 Chrome、Firefox、Safari 各个版本的对比表;它也不检测 JavaScript 接口或 HTML 特性,只检测 CSS 的属性与值。

操作步骤

1. 在「CSS 属性名」输入框里填入属性名,例如 aspect-ratio。页面打开时默认是 display。
2. 在「属性值」输入框里填入对应的值,例如 16/9。默认是 grid。
3. 不需要点任何按钮,只要两个框都不为空,下面就会即时出现结果:绿色对勾加「你当前的浏览器支持 属性: 值」,或者红色叉号加「你当前的浏览器不支持 属性: 值」。
4. 想快速试一试常见写法,可以点击「常见属性快速测试」下方的按钮,例如 display: flex、backdrop-filter: blur(10px)、color: oklch(0.7 0.15 180) 等,点击后会自动填入两个输入框并显示结果。

一个可以确定的例子,以及结果怎么读

有一个不依赖具体浏览器的例子:把属性名填成 display、属性值填成 banana,结果一定是「不支持」,因为 banana 根本不是 display 的合法取值。这说明红色叉号可能有几种含义:属性名拼错了、取值不合法,或者这个浏览器确实太旧没有实现这个功能。所以看到「不支持」时,先检查拼写、单位和格式,例如 aspect-ratio 的值写成 16/9 是对的。至于 text-wrap: balance、container-type: inline-size 这类较新的特性,结果就取决于你用的浏览器及版本,同一个页面在新旧浏览器里打开,结果可能不同;这也是它的实际用处:检查某位用户的浏览器能不能识别你准备使用的写法。我们不在文中列出具体的浏览器版本号,因为这些信息会随版本更新而变化。

支持范围与已知限制

• 只检测当前正在使用的浏览器,没有任何跨浏览器、跨版本的数据。需要完整兼容性矩阵时,请参考页面提示里推荐的 caniuse.com 之类的专门数据库。
• 只检测「属性名 + 属性值」这种组合是否能被浏览器解析,不能判断它在页面里渲染得是否正确,也不能发现实现上的 bug。
• 属性名和值都为空或只有空格时不会显示结果。输入的前后空格会被忽略。
• 不检测 @规则(如 @container)、选择器(如 :has())、JavaScript API 或 HTML 元素。
• 结果是按你输入的每一个字实时计算的,所以边输入边变化是正常的,输入到一半时可能暂时显示不支持。
• 对 gap: 10px 这样的声明,检测的只是这个属性能不能被识别,不检查它是否用在了 flex 或 grid 容器上。
• 快速测试按钮是固定的 10 个示例,其中 gap 出现了两种取值(1rem 和 10px),不能自行增删。
• 极少数非常老的浏览器没有 CSS.supports 接口,在这种浏览器里工具可能无法正常显示。

常见问题:这个工具能告诉我某个特性要支持到哪个版本吗?

不能。它只告诉你「现在这个浏览器」的结果。要查版本信息,请使用专门的兼容性数据库,并结合你的用户实际使用的浏览器统计来决定是否要做降级处理。

常见问题:显示支持,是不是所有用户都能正常看到?

不是。支持只代表你当前这个浏览器能识别这条声明。别的浏览器、别的版本、开启了不同设置的浏览器可能结果不同。正式上线前仍需要在目标浏览器里实际测试。

常见问题:自定义属性和带浏览器前缀的属性能测吗?

代码把你填的属性名和值原样交给浏览器的 CSS.supports 接口,所以像 -webkit-backdrop-filter 这样带前缀的写法是可以直接填写测试的,结果由浏览器判定。我们没有为此设计专门的示例按钮。

常见问题:为什么一个明明正确的写法显示不支持?

常见原因是值的格式不对,比如缺少单位、多了分号、大小写或空格不符合语法。请只填值本身,不要带分号,也不要把整条声明塞进一个输入框。另一个可能是这个浏览器确实不支持。

隐私与处理方式

检测完全在你的浏览器里完成,工具直接调用 CSS.supports,没有任何网络请求,你输入的内容不会被发送或保存到服务器。刷新页面后输入框会回到默认值。