IZN Tools

CSS Minifier

Shrink a stylesheet and see exactly how much you saved.

INPUT
OUTPUT
Waiting for input
Computed on this device

Conservative on purpose

There are two kinds of CSS minifier. One removes characters that cannot matter. The other rewrites the stylesheet: merging rules, reordering declarations, shortening colour notation, dropping selectors it believes are unused.

The second kind is more effective and occasionally breaks a page — usually through a cascade interaction it could not see, or a class name generated at runtime. This is the first kind.

What that leaves

  • Comments — gone
  • Whitespace between tokens — collapsed
  • Space around { } : ; , > ~ + — removed
  • The last ; before a } — removed

Selectors, property names, values, order and specificity all survive untouched.

Where to actually do this

In your build, not by hand. The value of this page is checking what a snippet costs, and reading the size difference before deciding whether the optimisation is worth any complexity at all.

Questions

What exactly is removed?+

Comments, runs of whitespace, spaces around braces, colons, semicolons and combinators, and the final semicolon before a closing brace. Nothing is reordered, merged or renamed.

Are strings safe?+

Yes. Content values, font names with spaces and url() paths are protected before whitespace is collapsed, so a value like a quoted string with a semicolon in it survives unchanged.

Why is my saving smaller than expected?+

Because well-written CSS has little redundant whitespace to begin with, and because gzip already compresses what remains. A stylesheet with heavy comments will shrink a lot; a hand-tuned one will not.

Does it optimise the CSS itself?+

No. Merging duplicate rules, shortening colours and removing unused selectors are optimiser jobs that need to understand the cascade and the pages using it. This only removes characters that carry no meaning.