🎨 CSS 校验器（CSS 语法检查）CSS Validator

使用说明与常见问题How-to & FAQ

「CSS 校验器（CSS 语法检查）」是什么？What is the CSS Validator tool?

在线检查 CSS 语法：找出未知属性、无效的属性值（如 color: redd、rotate(10)）、缺少冒号或分号、没有闭合的大括号、字符串和注释，calc() 运算符缺空格等错误，并提示重复声明、空规则和未知 @ 规则，显示行号、列号和出错代码，支持 CSS 嵌套、@container、@layer 等新语法，代码不上传。Check CSS syntax online. It finds unknown properties, invalid values (such as color: redd or rotate(10)), missing colons or semicolons, unclosed braces, strings and comments, and calc() operators without spaces, and warns about duplicate declarations, empty rules and unknown at-rules — with line, column and the offending code. Modern syntax such as nesting, @container and @layer is supported, and your code stays in the browser.

如何使用「CSS 校验器（CSS 语法检查）」？How do I use the CSS Validator tool?

在「CSS 校验器（CSS 语法检查）」中，把内容粘贴或输入到上方输入框，结果会实时显示在下方，点击「复制结果」即可复制。例如输入「a { -webkit-foo: 1; }」，得到「✔ CSS 语法有效 · 1 条规则 · 1 个声明」。In the CSS Validator: Paste or type into the input box; the result appears below instantly — click "Copy result" to copy it. Example input: "a { -webkit-foo: 1; }" (the result message follows the page language).

会检查哪些问题？What does it check?

错误：未知的属性名（如拼错的 colr）、属性值不符合语法（如 color: redd、width: 10px 20px、rotate(10) 缺单位）、缺少冒号或分号、没有选择器的规则、没有闭合的 { }、字符串和注释、多余的 }，以及 calc()、min()、max()、clamp() 中 + / - 两侧缺少空格或运算符缺少运算数。值的错误标在值的位置，缺分号标在应该加“;”的地方。警告：同一规则里完全相同的重复声明、空规则、未知的 @ 规则和 *zoom 这类旧版 IE 写法。每条结果都带行号、列号和出错的代码行。Errors: unknown property names (a misspelt colr), values that don't match the property's grammar (color: redd, width: 10px 20px, rotate(10) without a unit), missing colons or semicolons, rules without a selector, unclosed { }, strings and comments, extra }, and + or - without spaces on both sides (or an operator missing an operand) in calc(), min(), max() and clamp(). Value errors point at the value, and a missing semicolon points where the semicolon belongs. Warnings: identical duplicate declarations in one rule, empty rules, unknown at-rules and old Internet Explorer hacks such as *zoom. Every result has a line, column and the offending line of code.

属性值是按什么标准检查的？What standard are values checked against?

使用 css-tree 3.2（MIT 许可）内置的 CSS 语法数据，它来自 W3C 规范和 MDN 数据，覆盖 Grid、Flexbox、容器查询、颜色函数（rgb 空格写法、oklch、light-dark）等现代属性。含 var() 的值和相对颜色（from …）在运行时才能确定，不做检查；自定义属性（--x）可以是任意值，也不检查。It uses the CSS grammar data built into css-tree 3.2 (MIT), which comes from the W3C specifications and MDN data and covers modern features such as Grid, Flexbox, container queries and colour functions (space-separated rgb, oklch, light-dark). Values containing var() or relative colours (from …) can only be resolved at runtime, so they aren't checked, and custom properties (--x) may hold anything.

为什么 -webkit- 开头的属性没有报错？Why aren't -webkit- properties reported?

带厂商前缀的属性（-webkit-、-moz-、-ms-、-o-）很多是非标准的，语法数据不完整，默认忽略以免误报。取消勾选“忽略带厂商前缀的属性”后，未知的前缀属性也会作为错误列出。Many vendor-prefixed properties (-webkit-, -moz-, -ms-, -o-) are non-standard and the grammar data for them is incomplete, so they're ignored by default to avoid false alarms. Untick Ignore vendor-prefixed properties to list unknown prefixed properties as errors too.

能检查 SCSS 或 Less 吗？Can it check SCSS or Less?

不能。$变量、@mixin、嵌套的 & 选择器以外的预处理器语法不是标准 CSS，会被报为错误，工具会提示“像是 SCSS/Less”。请先编译成 CSS 再检查。标准 CSS 嵌套（包括 .child { }、p { }、> .x { } 这类不以 & 开头的嵌套规则，以及写在选择器中间的 &）、@supports 的 not / and / or 组合、相对颜色 rgb(from …)、@layer、@container、@property 等新语法都可以正常检查。No. Preprocessor syntax such as $variables and @mixin isn't standard CSS and is reported as errors, with a hint that the code looks like SCSS/Less — compile it to CSS first. Standard CSS nesting (including nested rules that don't start with &, such as .child { }, p { } and > .x { }, and & in the middle of a selector), @supports conditions combining not / and / or, relative colour syntax rgb(from …), @layer, @container, @property and other modern syntax are checked normally.

数据会上传吗？Is my data uploaded?

不会，全部在浏览器本地处理。No — everything is processed locally in your browser.

「CSS 校验器（CSS 语法检查）」免费吗？需要注册吗？Is the CSS Validator free? Do I need an account?

「CSS 校验器（CSS 语法检查）」完全免费，无需注册或安装，打开网页即可使用，手机和电脑都能用；输入的内容只在你的浏览器本地处理。The CSS Validator is completely free with no sign-up or install and works on phones and desktops; what you enter is processed only in your browser.