CSS 验证器

Q: 会检查浏览器支持情况吗？

不会，只检查语法和语法规则。

基于 css-tree 语法数据检查 CSS 的语法错误、未闭合的块、未知属性和无效值，每个问题都标明行号和列号，在浏览器中运行。

CSS 输入

依据 css-tree 语法数据检查语法、未知属性和无效值。自定义属性和使用 var() 的值不做检查。

完全在浏览器中运行，您的数据不会被上传。

什么是 CSS 验证？

CSS 验证器会报告结构错误（未闭合的大括号、字符串、注释或括号）、解析错误、未知属性、无效的属性值以及未知的 @ 规则，并标出各自的行号和列号。属性和值的检查使用 css-tree 自带的 CSS 语法数据；它不是 W3C 的 CSS 验证服务。

如何使用 CSS 验证

把 CSS 粘贴到输入框中。
点击验证（输入时结果会同步更新）。
查看汇总以及错误和警告列表。
根据显示的行号和列号逐项修正。

示例

输入

a { colr: red; color: bluee; }

输出

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

何时使用 CSS 验证

适合发现 colr 或 bluee 这类拼写错误、在长文件中找出未闭合的大括号，或在部署前检查手写的 CSS。特别新的属性可能还不在语法数据中；它也不检查浏览器兼容性。

CSS 验证的工作原理

扫描器先检查 {} 和 () 是否成对，以及字符串和注释是否闭合。然后样式表由 css-tree（与 CSSO 一起打包）解析，并报告解析错误。每条声明都通过 lexer.matchDeclaration 与 css-tree 的属性语法匹配：未知属性是错误，带厂商前缀的未知属性（-moz-foo）是警告，不符合语法的值（例如带五个值的 margin）是错误。自定义属性（--x）以及使用 var()、env() 或 attr() 的值无法静态检查，会被跳过。