CSS Validator

Find unknown properties, invalid values, and syntax errors in CSS.

0 chars
0 words
0 lines
0 chars
0 words
0 lines

CSS Validator – Check CSS for Errors

Browsers silently ignore CSS they do not understand. A typo like colr: red or border-radius: 8pxx simply has no effect, and you may spend a long time wondering why a style does not apply. The CSS validator finds these mistakes instantly and tells you exactly where they are.

What it checks

  • Syntax errors – broken declarations and unclosed or extra braces.
  • Unknown properties – misspelled property names such as colr, widht, or flex-direciton.
  • Invalid values – values that do not match the property's grammar, such as display: flexbox, color: bluee, or margin: 10 px.
  • Unknown at-rules – @mediaa instead of @media.
  • Vendor prefixes – unknown prefixed properties like -webkit-foo are reported as warnings (or errors, or ignored — your choice).

Custom properties (--brand-color) are always accepted, since their values can be anything.

How it works

Validation is powered by css-tree, which parses CSS and matches every declaration against property grammars derived from the W3C specifications and MDN data. That is the same approach as the csstree-validator used in CI pipelines. Modern CSS — grid, flexbox, custom properties, clamp(), color-mix(), container queries — is supported.

Reading the report

Each issue lists the line, column, severity, and a message. A summary banner shows the number of errors and warnings. Fix the first error, and the report updates live as you type.

Validation vs. browser support

A valid property is not necessarily supported in every browser. The validator checks that your CSS follows the specification; check browser support separately for very new features.

Format your stylesheet with the CSS Beautifier to make errors easier to spot, minify the validated CSS with the CSS Minifier, and check scripts with the JavaScript Validator.

Frequently Asked Questions

It checks the same kinds of problems using grammar data based on W3C specifications, but runs entirely in your browser with the css-tree library. Results can differ slightly for very new or experimental features.

Prefixed properties like -webkit-box-shadow are non-standard by definition. Known ones are accepted; unknown ones are reported as warnings by default because they might be valid in a specific browser.

No. Preprocessor syntax such as variables, nesting with mixins, and functions is not plain CSS. Compile it first, then validate the CSS output.