CSS Minifier

Four things, and nothing else. Comments in the /* */ form go completely. Runs of whitespace collapse to a single space, and the space either side of a brace, colon, semicolon, comma or child combinator goes entirely. The final semicolon before a closing brace is redundant in CSS and is dropped. And rules with an empty body are deleted. What is not touched is the substance: every selector, property and value arrives on the other side spelled exactly as you wrote it. A six-digit hex colour does not become a three-digit one, a zero with a unit keeps its unit, and two rules setting the same property are both kept.

Entirely down to how the file was written. A stylesheet with a comment above every section and generous indentation loses a large share of its bytes to formatting alone; one exported by a tool that already wrote it densely may barely move. The counter under the output measures both versions in UTF-8 bytes on your own machine, so it is a real measurement of the two strings rather than an estimate — but it is a measurement of the file, not of what a visitor downloads, which depends on compression as well. Paste your file in once and you will know where it sits.

It should, because whitespace in CSS is meaningful in only a few places and those are left alone. Text inside quotation marks is copied through character for character, so a font family with spaces in its name, a content string, and the row strings in grid-template-areas all survive intact. The descendant combinator is itself a space and it is kept — only the spaces around braces, colons, semicolons, commas and the child combinator are removed. The gap that bites is unquoted content: a data URI or an inline SVG pasted into a property without quotes can have spaces taken out of the middle of it. Quote those.

Not the original — only something readable. Beautifying restores structure: one declaration per line, two-space indentation for nested blocks, a space after the colon in each declaration and after the commas in a selector list, and a blank line between top-level rules. What it cannot restore is anything the minifier discarded, and comments are the big loss. The path runs through the minifier first, so beautifying gives you back layout and never the author's notes. Original line breaks, blank lines used for visual grouping, and any indentation style other than two spaces are gone the same way.

No. The whole thing runs inside the page you are looking at. There is no upload control and no file picker — the only way in is pasting into the text box — and the result is recomputed in the browser from that text as you type. The byte figures are worked out on your machine too, counted with the browser's own UTF-8 encoder rather than fetched from anywhere. Nothing is kept between visits either: the input lives only in the page's memory, so reloading the tab leaves you with an empty box. That matters when the stylesheet belongs to a site nobody has seen yet.

Less than the raw byte figure suggests, but usually still worth it. Compression algorithms handle repeated whitespace extremely well, so most of what minifying removes is exactly what gzip would have squeezed anyway — the gap between compressed minified and compressed formatted CSS is far narrower than the gap between the two uncompressed files. Where minifying earns its place is wherever compression is not applied: CSS pasted inline into an email, a style block in a page served without it, a field with a character limit. Minify by default in a build, and do not expect the headline saving on the wire.

Almost always empty rules. A rule whose body held only a comment has nothing left once comments are stripped, so it is deleted — and the deletion runs repeatedly, meaning a wrapper such as a media query block that contained only that rule is removed on the next pass. Placeholder selectors left in for later, and an at-rule kept open for a feature you have not written yet, both disappear this way. The other loss people notice is a licence banner. Comments opening with an exclamation mark are conventionally preserved by build tools; here they are not, so keep that header separately if the licence requires it.

Only after it has been compiled. Sass and Less are separate languages that produce CSS, and what works here is the CSS. Two things go wrong if you paste the source in. Single-line comments starting with two slashes are not CSS and are not recognised, so rather than being removed they lose their line break and swallow whatever followed onto the same line. Variables, mixins and nested selectors written with the parent reference pass through untouched, which leaves you holding a smaller file that no browser can use. Compile first and minify the output — the order a build pipeline uses anyway.