CSS Tools
Format, minify, validate, and diff CSS in your browser.
Tools
Formatter vs. Minifier vs. Validator vs. Diff
CSS Validator only reports whether the syntax is well-formed and where it breaks, nothing is rewritten. CSS Formatter re-indents a stylesheet for reading or code review. CSS Minifier strips whitespace, comments, and redundant characters to reduce file size for production. CSS Diff compares two stylesheets rule by rule, useful for reviewing what a refactor or a build step actually changed.
Valid syntax isn't the same as browser support
The Validator checks that a rule parses as CSS, not that any particular browser implements it. A newer property, value, or at-rule can be entirely valid syntax and still do nothing in a browser that hasn't shipped it yet, silently, with no error at runtime. Passing validation here means the syntax is correct; it doesn't mean the feature is safe to rely on without checking browser support separately.
What the Validator doesn't cover: specificity and the cascade
Two rules can each be perfectly valid CSS and still conflict, with one silently winning over the other based on specificity, source order, or !important. That's the cascade working as designed, not a syntax problem, so it's outside what a validator checks. If a style isn't applying the way you expect, the cause is more likely a competing rule than invalid syntax.
CSS nesting and modern syntax
These tools parse plain CSS, including native CSS nesting (rules written directly inside other rules without a preprocessor), not Sass or SCSS syntax. Native nesting has its own rules for when a nested selector needs an explicit &, which differ subtly from Sass conventions, so code copied from a Sass file may need adjusting before it validates as plain CSS.
What minifying should and shouldn't change
A correct minifier removes whitespace, comments, and unnecessary characters, and shortens values where it's provably safe, without changing selectors, property values, rule order, or the cascade. If minified CSS renders differently from the original, that's a bug in the minification, not an expected tradeoff, since the goal is a smaller file with identical behavior.
Frequently asked questions
- Which CSS tool should I use?
- Validator to check syntax without changing anything, Formatter to re-indent a stylesheet for reading or review, Minifier to shrink it for production, Diff to see what changed between two versions. Formatting and minifying both surface syntax errors as a side effect, since neither can safely rewrite CSS that doesn't parse.
- If CSS passes validation, will it work in every browser?
- Not necessarily. Validation checks that the syntax is well-formed CSS, not that a given browser implements the property or value you used. A syntactically valid rule using a newer feature can still be silently ignored by an older browser; check browser support separately for anything you're not sure is widely implemented.
- Does the Validator catch specificity or cascade conflicts?
- No. Two rules can both be perfectly valid CSS and still fight over the same element, with one silently overriding the other by specificity or source order. That's expected cascade behavior, not a syntax error, so it won't be flagged here.
- Does the Minifier change what my CSS does?
- It shouldn't. Minifying removes whitespace, comments, and redundant characters, and shortens values where it's safe to do so, without changing selectors, property values, or rule order. If minified output behaves differently from the source, that's a bug worth reporting rather than expected behavior.
- Is native CSS nesting the same as Sass nesting?
- They look similar but aren't identical. Native CSS nesting (rules written directly inside other rules, without a preprocessor) has its own parsing rules, for example around when a nested selector needs an explicit &. These tools work with plain CSS, including native nesting, not Sass/SCSS syntax.