W3C CSS Validator: the official syntax check for your style sheets

When a layout stubbornly refuses to display as intended, the cause is sometimes trivial: a missing semicolon, an extra curly brace, “colr” instead of “color.” The browser simply ignores the faulty line without warning you. That is exactly what the W3C validator brings to light, in a few seconds, with nothing to install, and with the backing of the consortium that publishes the CSS specifications. For a beginner, a student or a front-end developer who wants a quick check, it still has its place.

You do need to know what it doesn’t do, though. Valid doesn’t mean compatible: the tool says nothing about whether Safari or Firefox actually supports a property, and perfectly conforming CSS can still render badly. Above all, the validator lags behind the standards. In our tests, it accepted nested rules, the :has() selector and @layer cascade layers, but flagged container queries and the @property rule as errors, even though every recent browser supports them. An error in the report isn’t always an error in the code, so you have to sort through it yourself. Prefixes like -webkit- are now only warnings, which makes the report easier to read.

In professional projects, the tool has largely given way to linters, led by Stylelint, which check code right in the editor and on every commit, with rules tailored to the team. The W3C validator then remains a good second opinion, or a simple way to check the CSS of a site whose source files you don’t have. One last caveat: its documentation isn’t always up to date, and it still says the default profile is CSS 2.1, even though the form now offers CSS 3.