CSS formatieren
CSS Formatter re-indents and minifies a stylesheet in your browser. It tokenises rather than parses, which is what lets unknown at-rules and syntax newer than the tool pass through unchanged — a parser rejects what it does not recognise, and for a formatter, preserving something it does not understand is always better than deleting it.
Die Oberfläche dieses Tools ist auf Englisch.
Die folgende Anleitung ist nur auf Englisch verfügbar.
How does CSS Formatter and Minifier work?
Formatting CSS is mostly about knowing where a thing begins and ends, and there are four places where the naive answer is wrong.
A brace is not always a block
content: "}" contains a closing brace inside a string, and /* } */ contains one inside a comment. Splitting on braces without tracking those states produces a formatter that mangles any stylesheet with a pseudo-element counter or a commented-out rule in it. The sample above contains both, deliberately.
A colon is not always a property separator
background: url(https://example.com/x.png) has a colon inside the value, and a custom property's value can contain anything at all — that is what makes custom properties useful. The split is at the first colon that is not inside parentheses.
A comma is not always a selector separator
:is(a, b) span is one selector containing a comma, and :nth-child(2n of .x, .y) is another. Splitting a selector list on a bare comma breaks both. The split is at the top level only, which also keeps rgb(0, 0, 0) intact in a value.
A tokeniser outlives a parser
CSS gains syntax constantly: nesting, @container, @layer, :has(), relative colour syntax. A parser has to model each one and rejects anything it does not know, which means it breaks on CSS that browsers already accept. A tokeniser only needs to know where strings, comments, blocks and semicolons are, and that has been stable since CSS 1. Unknown syntax is passed through rather than dropped, which is the only behaviour a formatter can responsibly have.
Minification keeps a licence comment
/*! … */ is the convention for a comment a minifier must preserve, and it usually carries a licence — stripping it may actually breach the terms the stylesheet was distributed under. Everything else goes. The last semicolon before a closing brace also goes, since it is separating a declaration from nothing.
What minification here does not do is rewrite values: no shortening #ffffff to #fff, no merging rules, no reordering. Those are real wins and they are also where a minifier becomes a compiler with a bug surface. For a build pipeline, use a real minifier; this is for making a stylesheet small enough to paste.
Input
a,b{color:red;margin:0}Formatted
a,
b {
color: red;
margin: 0;
}What options and edge cases does CSS Formatter and Minifier support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Indent | spaces | 2 | Applied per nesting level, so a rule inside a media query indents twice. |
| Selector per line | boolean | on | Each selector in a comma-separated list on its own line. Splits at the top level only, so :is(a, b) stays intact. |
| Blank line between rules | boolean | on | A blank line after each top-level rule, which makes a long stylesheet scannable. |
| Keep comments | boolean | on | Multi-line comments keep their internal shape rather than being re-flowed, because ASCII-art section banners are common and re-flowing destroys them. |
| Strings | preserved | — | content: "}" contains a closing brace. Tracking string state is what stops that ending the block. |
| url() | consumed whole | — | An unquoted url() can contain characters that would otherwise be structural, including colons and parentheses in a data URI. |
| At-rules | nested | — | @media, @supports, @layer, @container and anything newer. Unknown at-rules are passed through rather than dropped. |
| Minify | whitespace only | — | Collapses whitespace and removes the last semicolon in a block. Does not rewrite values or merge rules — those are a build step's job, not a paste-box's. |
| Licence comments | /*! … */ | kept | Preserved when minifying, by the convention every minifier follows. Stripping one may breach the licence it carries. |
Frequently asked questions
Will it break my nested CSS or @container queries?
No, and that is the point of tokenising rather than parsing. The formatter only needs to know where strings, comments and blocks begin and end — it does not need to understand what an at-rule means. Syntax newer than the tool passes through unchanged, which is the opposite of what a parser does when it meets something it does not recognise.
Why does the minified output still have a comment in it?
Because it starts with /*! rather than /*. That is the convention every minifier honours for a comment that must survive, and it almost always carries a licence — stripping it can breach the terms the stylesheet was distributed under. Ordinary block comments are removed.
Why does minifying save less than a real build tool?
Because this only removes whitespace. A production minifier also shortens colours, merges duplicate rules, drops overridden declarations and rewrites shorthand — each of which is a genuine saving and also a transformation that can change behaviour if it gets an edge case wrong. For a build pipeline use a real minifier; this is for making a stylesheet small enough to paste somewhere.
Why did my selector list not split at every comma?
Because some of those commas are inside a functional pseudo-class. :is(.card, .panel) is one selector that happens to contain a comma, and splitting there produces two selectors that are both invalid. The split is at the top level only — the same rule that keeps rgb(0, 0, 0) intact in a value.
Does it validate my CSS?
No. It will format a stylesheet with a misspelled property or an invalid value without complaining, because a formatter that rejected unknown properties would reject every vendor prefix and every new feature. If you need validation, the browser's own DevTools flags unknown properties in the Styles panel, which is a more reliable signal than any static list.
Is my stylesheet uploaded?
No. Tokenising and formatting run in your browser. That matters less for CSS than for a payload, but it matters some: a stylesheet from an unreleased product describes the product, and a stylesheet from an internal tool describes the internal tool.