CSS 有效ator & 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 有效ator (which only checks spec compliance), this tool also catches real-world issues that would pass W3C validation but still cause problems in production.
🚨 Syntax 错误
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 有效ator Checks
- Syntax 错误s — 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 有效ator vs W3C CSS 有效ator — What's the Difference?
The W3C CSS 有效ator 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 − (错误s × 10) − (警告s × 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 警告s to review. Below 70 suggests structural issues worth addressing before shipping.
常见问题
Is this the same as the W3C CSS 有效ator?
No. The W3C CSS 有效ator 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.
我的代码会发送到服务器吗？
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.
"不需要浏览器前缀"是什么意思？
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" 警告?
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 错误, 3 per 警告, 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 警告s will score higher than a tiny file with multiple 错误s.
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 警告s or informational notices, not hard 错误s. 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 (错误, 警告, Deprecated, etc.) in the options bar to focus on what matters to you.