About

Malformed CSS fails silently. Browsers skip invalid declarations without warning, leaving you debugging layout issues that stem from a missing semicolon or a misspelled property name like font-weigth instead of font-weight. This validator parses your stylesheet using a rule-based engine that checks against 200+ standard CSS properties and their allowed value types. It catches syntax errors (unmatched braces, unclosed strings), semantic errors (unknown properties, invalid value types for known properties), and flags warnings for excessive !important usage, empty rulesets, and vendor-prefixed properties lacking unprefixed equivalents.

The tool approximates W3C CSS specification compliance for CSS3 properties. It does not execute the CSS or evaluate cascade/specificity. Custom properties (--*) are accepted without value validation. Shorthand expansions and calc() expressions are validated structurally but not computed. For production audits, pair results with browser DevTools.

Formulas

CSS validation operates on a tokenization-parsing pipeline rather than mathematical formulae. The validator applies a deterministic finite automaton (DFA) to classify input characters into tokens.

Input → Tokenizer(DFA) → Token Stream → Parser → Rule List → Validator → Diagnostics

Each declaration is matched against a property database. Value validation uses type-checking rules:

isValid(property, value) = value ∈ allowedTypes(property)

Where allowedTypes maps each property to a set of valid CSS value types: LENGTH, COLOR, PERCENTAGE, NUMBER, KEYWORD, URL, STRING, or enumerated keyword lists. A brace-depth counter d tracks structural validity: d < 0 at any point indicates an unmatched closing brace; d ≠ 0 at EOF indicates unclosed blocks.

Reference Data

Error Type	Severity	Example	Impact
Unknown Property	Error	colr: red	Declaration silently ignored by browser
Invalid Value	Error	width: abc	Falls back to inherited or initial value
Missing Semicolon	Error	color: red margin: 0	Subsequent declarations may be consumed as part of value
Unmatched Brace	Error	.a { color: red	Entire remaining stylesheet may be invalidated
Unclosed String	Error	content: "hello	Parser enters error recovery, may skip rules
Empty Ruleset	Warning	.a { }	Dead code, increases file size
Duplicate Property	Warning	color: red; color: blue	Intentional override or mistake - last wins
Vendor Prefix Only	Warning	-webkit-transform	No unprefixed fallback for standards compliance
!important Overuse	Warning	>10 uses	Specificity wars, maintainability degradation
Zero with Unit	Info	margin: 0px	Unnecessary unit - 0 suffices
Float Usage	Info	float: left	Consider Flexbox or Grid for layout
Color without Hash	Error	color: fff	Interpreted as unknown keyword, not hex color
Negative Length	Warning	width: -10px	Negative values invalid for sizing properties
Invalid @-rule	Error	@fontt-face	Entire block ignored by parser
Missing Colon	Error	color red	Property-value pair unparseable

Frequently Asked Questions

The validator checks against the W3C CSS specification, not browser-specific implementations. Vendor-prefixed properties (e.g., -webkit-appearance) and experimental properties may be flagged as warnings. A property working in one browser does not guarantee specification compliance or cross-browser support.

Custom properties following the --* naming convention are accepted as valid property names. Their values are not validated because the CSS specification allows any token stream as a custom property value. Validation only occurs when custom properties are consumed via var() in standard properties.

No. This is a static syntax and semantic validator. It does not compute specificity weights, evaluate the cascade, or simulate rendering. It catches structural errors (broken syntax) and type errors (wrong value for a property). For cascade debugging, use browser DevTools' computed styles panel.

Duplicate properties are sometimes intentional as progressive enhancement fallbacks. For example: background: red; background: linear-gradient(...) provides a solid color fallback for browsers without gradient support. The validator warns so you can verify intent.

The database includes properties from CSS 2.1, CSS3 Modules (Flexbox, Grid, Transforms, Transitions, Animations, Filters, Columns, Backgrounds, Box Model), and widely-adopted CSS4 drafts. It covers approximately 200+ standard properties. Niche or highly experimental properties may not be included.

The validator checks that function syntax is structurally valid (matched parentheses, non-empty arguments). It verifies that calc() contains arithmetic operators and valid operand types. However, it does not evaluate the computed result or verify dimensional analysis (e.g., adding a length to a time). Nested functions like min(), max(), and clamp() are recognized.