CSS Validator

About CSS Validator

A CSS validator is an online service that checks the validity of CSS code. CSS is a stylesheet language used for describing the presentation and formatting of web documents, including HTML and XML. CSS validators help web developers and designers ensure that their CSS code adheres to the CSS specifications and does not contain syntax errors or other issues that could affect the rendering of web pages in different web browsers.

Here are some common tasks performed by CSS validators:

• Syntax Checking: CSS validators check for syntax errors in your CSS code. They ensure that you have used the correct syntax for CSS properties, values, and selectors.

• Compliance with Standards: They verify that your CSS code complies with the CSS specifications set by the World Wide Web Consortium (W3C). This helps ensure cross-browser compatibility.

• Detecting Deprecated or Nonstandard Code: CSS validators can identify and flag deprecated or nonstandard CSS properties, which may not be supported in modern browsers or may lead to compatibility issues.

• Debugging and Troubleshooting: CSS validators can help you find and fix issues in your CSS code, making it easier to maintain and update your stylesheets.

Web developers often use these validators during the development and testing phases of a website to ensure that their CSS code is error-free and follows best practices. By doing so, they can create websites that look consistent and perform well across different browsers and devices.

Issue Severity Levels

Every issue reported by the validator is assigned one of three severity levels, so you can prioritise what needs fixing.

Errors are genuine problems that will prevent your CSS from working as intended. This includes unknown properties, invalid values, missing or mismatched braces and semicolons, invalid selectors, malformed calc() expressions, and @media or @supports conditions with incorrect syntax.

Warnings are issues that will not necessarily break your CSS today but are likely to cause problems or indicate code that should be revisited. Obsolete vendor prefixes, deprecated properties, missing unprefixed counterparts, empty rule blocks, and undeclared CSS variable usage all fall into this category.

Info notices are purely advisory. The CSS is valid and will work correctly, but the notice highlights something worth knowing about - such as an unnecessary unit on a zero value, use of !important, duplicate selectors, @import performance implications, or unquoted font family names.

Property Validation

The validator maintains a comprehensive list of known CSS properties covering the box model, layout, typography, colour, visual effects, animation, grid, flexbox, and more. Unknown properties are flagged as errors. Vendor-prefixed properties (-webkit-, -moz-, -ms-) are allowed through without error, though obsolete prefixes that are no longer needed are flagged as warnings, and prefixed properties missing their unprefixed counterpart are flagged as errors.

Value validation is performed per property. Keyword properties such as display, position, and overflow are checked against their allowed keyword lists. Length values are checked for valid units. Colour values are validated across hex, named colours, rgb(), hsl(), oklch(), and other modern colour functions. Numeric properties like opacity and font-weight are checked against their valid ranges.

Shorthand Validation

Shorthand properties present a particular challenge for validators because their values can combine multiple types in any order. This validator takes a pragmatic approach: shorthand values are tokenized carefully, respecting CSS functions like linear-gradient() and rgb() as single units, then each token is checked against colour validators, length validators, keyword lists, and - for transition and animation - time unit requirements. Animation names are treated as valid identifiers, so animation: fade 1s ease will not generate false positives even if fade is defined in a separate file.

Selector Validation

Selectors are parsed and checked for a range of common mistakes. Invalid combinator characters like < are caught. Consecutive combinators, selectors ending or starting with a combinator, and invalid .# or #. combinations are all flagged. Class and ID names beginning with a number are reported as errors. Escaped characters in selectors are correctly recognised and allowed through without false positives.

At-Rule Validation

At-rules are validated both structurally and semantically. @media conditions are checked to ensure feature queries like max-width: 600px are wrapped in parentheses, while plain media types like print and screen are correctly allowed without them. @supports and @container conditions are checked for the presence of parentheses. @keyframes blocks are validated for a name, and keyframe selectors are checked to ensure they use from, to, or valid percentage values. Unknown at-rules are flagged as errors.

Structural Validation

The validator catches structural problems that other tools often miss or handle poorly. Missing opening or closing braces are detected and reported with the appropriate line number, and parsing continues past the error where possible so that a single structural mistake does not suppress all subsequent errors. Missing semicolons are detected including the common case where a missing semicolon causes the next property name to be parsed as part of the preceding value - generating a targeted, readable error message rather than a confusing one about an invalid value.

Summary Statistics

Every validation run produces a statistics summary alongside the error list. The summary includes the total number of rules and declarations in the stylesheet, the number of unique properties used, the five most frequently used properties, CSS variables declared and referenced, at-rules present, and a breakdown of errors, warnings, and info notices. This gives a useful at-a-glance overview of the stylesheet's complexity and health.