CSS Validator & Linter — How It Works
This validator checks your CSS against a comprehensive ruleset covering syntax correctness, deprecated features, browser compatibility, performance anti-patterns, and code quality best practices. Unlike the W3C CSS Validator (which only checks spec compliance), this tool also catches real-world issues that would pass W3C validation but still cause problems in production.
🚨 Syntax Errors
Unclosed braces, missing semicolons, invalid property values, malformed selectors, and unrecognised at-rules.
⚠️ Deprecated Properties
Flags legacy properties like zoom, -webkit-box-*, non-standard filters, and vendor prefixes that are no longer needed.
🌐 Browser Compatibility
Highlights properties that require vendor prefixes or have limited support — backdrop-filter, @layer, color-mix(), container queries, and more.
⚡ Performance
Detects expensive selectors, animatable properties that force repaints, overuse of !important, and unscoped universal selectors.
📐 Best Practices
Checks for missing fallbacks, zero values with units, color accessibility contrast hints, and duplicate property declarations.
🎯 Quality Score
Overall 0–100 quality score after validation — useful for tracking improvement over time or comparing stylesheets.
What This Validator Checks
- Syntax errors — unclosed braces, invalid values, unknown properties, malformed selectors
- Deprecated properties —
zoom, clip (use clip-path), -webkit-box-align, old filter syntax
- Vendor prefix overuse — prefixes no longer needed:
-webkit-border-radius, -moz-border-radius, -ms-flexbox
- Missing vendor prefixes — properties that still need prefixes for full coverage:
-webkit- for some Safari features
- Performance anti-patterns —
* selectors, deep descendant chains, animating non-compositor properties
- !important overuse — flags excessive use which signals specificity problems in the architecture
- Zero unit values —
0px, 0em should be written as bare 0
- Duplicate declarations — same property declared twice in the same rule
- Missing fallbacks — modern values without fallbacks for older browsers (e.g.
oklch() without an rgb() fallback)
- Browser compatibility — properties with limited support flagged against CSS3 / CSS 2.1 profiles
CSS Validator vs W3C CSS Validator — What's the Difference?
The W3C CSS Validator at jigsaw.w3.org is the official specification compliance checker — it tells you whether your CSS is technically valid according to the CSS spec. It's the gold standard for spec compliance, but it won't catch:
- Performance anti-patterns that are technically valid but slow
- Vendor prefixes that are no longer needed (valid, but unnecessary bloat)
- Missing fallbacks for modern features (valid, but breaks in older browsers)
- Best-practice violations like excessive
!important usage
- Deprecated properties that browsers still support but shouldn't be used
This tool fills those gaps. Use both: the W3C validator for spec compliance, and this tool for production-quality linting.
How to Read the Quality Score
The score is calculated as: 100 − (errors × 10) − (warnings × 3) − (info × 1), capped at 100 and floored at 0. A score of 90+ indicates production-ready CSS with no major issues. 70–89 is good code with some warnings to review. Below 70 suggests structural issues worth addressing before shipping.
Frequently Asked Questions
Is this the same as the W3C CSS Validator?
No. The W3C CSS Validator checks whether your CSS conforms to the CSS specification. This tool goes further — it also checks for deprecated properties, performance anti-patterns, browser compatibility issues, missing fallbacks, and best-practice violations that the W3C validator ignores. Think of the W3C validator as a spelling checker and this tool as a style guide linter.
Does my code get sent to a server?
No. All validation happens entirely in your browser using JavaScript. Your code never leaves your machine, nothing is stored or logged, and the tool works offline once the page has loaded.
What does "vendor prefix not needed" mean?
Many CSS properties once required browser-specific prefixes (-webkit-, -moz-, -ms-) to work. Most of these properties are now fully standardised and the prefixes are no longer needed — keeping them adds unnecessary file size and maintenance burden. For example, -webkit-border-radius and -moz-border-radius can both be replaced with plain border-radius.
What is a "missing fallback" warning?
When you use a modern CSS feature that isn't supported in older browsers — like oklch() colors, color-mix(), or env() variables — you should provide a fallback value that older browsers can understand. The validator flags declarations that use modern syntax without a preceding fallback value in the same property.
Why is animating certain properties flagged as a performance issue?
CSS animations are cheapest when they only affect properties handled by the compositor thread — primarily transform and opacity. Animating layout properties like width, height, top, left, margin, or padding forces the browser to recalculate layout on every frame, which is expensive and causes janky animations. The validator flags these so you can refactor to transform: translate() or transform: scale() instead.
What does the quality score mean?
The score (0–100) gives you a quick health indicator. It deducts 10 points per error, 3 per warning, and 1 per informational notice, then caps at 100 and floors at 0. A score above 90 is production-ready. 70–89 has issues worth reviewing. Below 70 suggests structural problems to address. The score is relative to the issues found — a large, complex stylesheet with 3 minor warnings will score higher than a tiny file with multiple errors.
Can I validate CSS inside HTML files?
Paste only the CSS content — either the contents of a .css file or the CSS from inside a <style> tag. Don't include the <style> opening and closing tags themselves, as the validator expects pure CSS, not HTML.
Why does the validator flag valid CSS?
Some issues flagged are warnings or informational notices, not hard errors. A valid-but-deprecated property or a valid-but-slow selector is technically legal CSS but still worth flagging. You can toggle individual issue categories (Errors, Warnings, Deprecated, etc.) in the options bar to focus on what matters to you.