CSS Validator

What is CSS Validator?

The CSS Validator reports structural errors (unclosed braces, strings, comments or parentheses), parse errors, unknown properties, invalid property values and unknown at-rules, each with its line and column. Property and value checks use the CSS grammar data shipped with css-tree; it is not the W3C CSS validation service.

How to use CSS Validator

1. Paste your CSS into the input box.
2. Click Validate (results update as you type).
3. Read the summary and the list of errors and warnings.
4. Fix each issue using the line and column shown.

Example

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

When to use CSS Validator

Use it to catch typos like colr or bluee, find the unclosed brace in a long file, or check hand-written CSS before deploying. Very new properties may be missing from the grammar data; browser support is not checked.

How CSS Validator works

A scanner checks that {} and () are balanced and strings/comments are closed. The stylesheet is then parsed by css-tree (bundled with CSSO), which reports parse errors. Every declaration is matched with lexer.matchDeclaration against css-tree's property grammar: unknown properties are errors, vendor-prefixed unknown properties (-moz-foo) are warnings, and values that do not match the grammar (for example margin with five values) are errors. Custom properties (--x) and values using var(), env() or attr() cannot be checked statically and are skipped.

Common Use Cases

• ✓ Finding a typo in a property name
• ✓ Locating an unclosed brace that breaks the rest of the file
• ✓ Checking values such as grid templates or colors
• ✓ Reviewing CSS submitted by users or generated by tools

FAQs

Explore more categories