CSS 兼容性检查 - 在线工具

扫描 CSS 找出属性名拼写错误、已废弃写法、缺失厂商前缀与新特性浏览器支持度,逐条给出正确写法与替代方案

CSS 兼容性检查 · 使用说明

扫一遍 CSS,找出属性名拼写错误、已废弃或非标写法、缺失的厂商前缀与新特性支持度。拼写检查会回显你写错的那个词并给出正确写法(colouor → color),一行多处问题逐条列出。也会提示 sticky 需要祖先无 overflow 这类易踩的坑。扫描在浏览器本地逐行完成,样式不上传。

示例

输入
a { colouor: red; zoom: 1.2; }
输出
第 1 行 2 处:colouor → color(err)、zoom 非标准,建议 transform: scale()(err)

如何使用

  1. 把 CSS 粘贴到输入框,或点「示例」看一份典型的有问题的样式
  2. 结果按错误 / 警告 / 提示分级列出,每条都带行号
  3. 按提示修改后重新粘贴复查
  4. 确认无误后复制走你的 CSS

小贴士

  • err 是大概率会出问题(拼写错误、非标准属性),warn 是旧浏览器或特定场景下有坑,info 是可用但值得知道的用法
  • 「正常 CSS 不报错」本身也是检查器的验收标准之一:如果你看到满屏提示,多半是把某些正常写法误判了
  • 行号按你粘贴的原始文本计算,便于回原文定位

常见问题

它和 Autoprefixer 是一回事吗?

不是。Autoprefixer 是构建时自动补前缀的工具;这里是纯静态检查,不产出构建产物,只告诉你哪里需要前缀、哪里已经废弃,适合快速自查和别人发来的代码片段。

会不会把正确写法误报成错误?

拼写检查只枚举明确列出的常见错拼,正确写法一律不匹配(例如用 colou?r 这类「可选字母」写法会连正确的 color 一起命中,检查器就失去可信度了)。另外正常 CSS 已被纳入测试断言,确认不产生任何错误或警告。

一行里有好几个错拼会漏掉吗?

不会。扫描对每条规则做全局匹配,同一行里的多处问题会逐条列出,每条都带自己的属性名和正确写法。

能检查 SCSS / Less 吗?

可以贴进来一起扫,但变量、嵌套和混合这些预处理语法不在识别范围内,可能产生噪音,建议先编译成纯 CSS 再扫。

扫描会上传样式文件吗?

不会。逐行拆分和规则匹配都在浏览器本地完成,没有任何网络请求,公司内部样式片段可以放心粘贴。

📂

松开以自动格式化

支持 .json / .sql / .csv / .html / .css / .xml / .yaml 文件