Why did my CSS declaration silently stop working?
CSS has no error reporting. A browser drops any declaration it cannot parse and continues, so a single typo produces a layout bug with no error anywhere.
By Sapun Lamichhane · Arcetis
Because CSS has no error reporting. The specification requires a browser to discard any declaration it cannot parse and continue with the rest - no exception, no console message, no indication that anything was dropped. A single typo produces a visual bug with no error trail anywhere.
This is deliberate and it is what makes CSS forward-compatible: a browser that has never heard of a new property ignores it instead of refusing the stylesheet. The cost is that a mistake and an unsupported feature are indistinguishable from the outside.
What gets silently dropped?
- Misspelled properties. `colour`, `font-wieght`, `bakground` - all ignored, all leaving the element at its inherited value.
- Values that do not match the property's grammar. `display: flexx`, `color: notacolor`, `margin: 10 px` with a space. The property is real; the value is not, so the declaration is dropped.
- Everything after an unclosed brace. A missing `}` makes the parser treat the following rules as part of the broken one, and an entire section of your stylesheet stops applying.
- Declarations using a feature the browser has not shipped. Valid CSS, correctly ignored - which is the same outcome as a typo, and the reason validity alone is not enough.
How do I find them without reading every line?
Parse the stylesheet and check each declaration against the formal grammar the CSS specifications define for that property. Those grammars are published as machine-readable data in `the published property grammars` - the same dataset MDN's own documentation is generated from - so this is a mechanical check, not a heuristic.
Three things fall out: parse errors, unknown properties, and values that do not match the property's grammar. Each is a declaration that is currently doing nothing.
Is valid CSS enough?
No, and this is the second half of the problem. A declaration can be perfectly valid and unsupported in a browser your visitors use, which produces exactly the same silent drop.
Baseline - the W3C WebDX Community Group's shared definition of what is safe to use - answers that question. A feature is Widely Available when it has been supported across Chrome, Edge, Firefox and Safari for over 30 months, Newly Available when it is supported everywhere but recently, and Limited Availability when at least one of them still lacks it.
One caveat worth knowing: Baseline marks `cursor` and `resize` as limited availability purely because iOS Safari lacks them, and iOS Safari lacks them because a touch screen has no pointer and no resize handle. Nothing is broken and there is no fallback to write. A checker that flags those is generating work rather than finding it.
How do I check my own stylesheets?
The CSS validator on this site fetches every inline and linked stylesheet, parses them with the CSS conformance parser, and reports parse errors, unknown properties and grammar mismatches with the file, line and column. It resolves every property against Baseline in the same pass, so you find out a declaration is valid and unsupported at the same time.