本文目录
什么是 CSS 校验？
CSS 校验用于检查你的样式表是否符合 CSS 规范。有效的 CSS 可确保跨浏览器渲染一致，防止意外的布局偏移，并捕捉那些可能悄然破坏设计的语法错误。
CSS 在设计上是宽容的——浏览器会跳过它无法理解的规则，而不是抛出错误。这意味着无效的属性、值中的拼写错误以及错误的选择器可能数月都不会被察觉。CSS 校验器能立即发现这些问题。
CSS 校验器如何工作
CheckTown 的 CSS 校验器会解析你的样式表，并报告带有行号和属性级细节的错误。
- 语法检查——检测无效的选择器、格式错误的规则，以及缺失的分号或括号
- 属性校验——验证属性名是否存在于 CSS 规范中，以及取值对每个属性是否有效
- 厂商前缀警告——识别非标准的厂商前缀，并在有标准替代方案时给出建议
免费试用 —— 无需注册
校验你的 CSS →常见的 CSS 错误及修复方法
CSS 错误往往难以察觉，因为浏览器会悄然忽略无效规则。以下是校验器能捕捉到的最常见错误。
- 无效的属性值——为属性使用了不正确的值类型，例如在只接受数值的地方使用了颜色名称
- 缺少单位——在需要单位的数值上忘记添加 px、em、rem 或其他单位
- 括号未闭合——缺少一个闭合花括号可能导致后续每一条规则都被浏览器忽略
何时使用 CSS 校验
CSS 校验有助于在整个开发生命周期中保持样式表整洁、易于维护。
- 部署之前——校验 CSS 以捕捉那些在开发时不可见、却会在生产环境影响用户的错误
- 调试布局问题——当布局表现异常时，校验往往能比人工检查更快地揭示根本原因
- 代码评审——将 CSS 校验作为拉取请求流程中的质量关卡
常见问题解答
校验器支持 CSS Grid 和自定义属性等现代 CSS 特性吗？
支持。校验器支持当前的 CSS 规范，包括 Grid、Flexbox、自定义属性（CSS 变量）和媒体查询。它会对照最新的 W3C 建议规范进行校验。
带厂商前缀的属性会引发校验错误吗？
带厂商前缀的属性会被标记为警告，而非错误。校验器能识别它们，但会建议检查现在是否已支持不带前缀的标准版本。
我能校验 Sass 或 LESS 文件吗？
校验器检查的是标准 CSS 语法。Sass（SCSS）和 LESS 必须先编译为 CSS。请校验编译后的输出，以检查浏览器将要解析的最终样式表中是否存在问题。