CSS Minifier & Compressor

Roughly a third of a hand-written stylesheet is whitespace, comments and semicolons the browser throws away the moment it parses the file. CSS Minifier removes exactly that, and nothing else. Paste a stylesheet and the compressed version appears underneath with a byte count.

The risky part of minifying CSS is knowing when a space carries meaning. A space around a > combinator is decoration; the one in @media screen and (max-width:640px) is load-bearing, and the one inside calc(100% - 2rem) is the difference between a valid declaration and a dropped one. This scanner tracks whether it is reading a selector, a value or a media query and decides each space on that basis, rather than collapsing every run of whitespace and hoping.

Four optimisations sit above the input as independent toggles. Turn any of them off and the output rewrites immediately, so you can watch what each one is actually worth on your own stylesheet instead of trusting a single number at the end.

Example: One Panel Through the Scanner

Press Load Sample and the first stylesheet in is /* checkout-widget.css — v3.2.0 */, a 40-line component sheet with a comment banner, four-space indentation and a media query. Watch what happens to it:

• background-color: #ffffff; becomes background-color:#fff — the space after the colon goes, the six-digit hex folds to three, and the semicolon disappears because it was the last one in its block.
• margin: 0px auto 24px auto; becomes margin:0 auto 24px auto. Only the zero loses its unit; 24px keeps its own.
• padding: 1.500rem; becomes padding:1.5rem, and an opacity of 0.50 becomes .5.
• The /* checkout-widget.css */ banner is a plain comment, so it goes. A /*! banner would have survived, which is how licence headers stay attached to the file they belong to.

What Happens When a Comment Sits Inside a String

• A declaration such as content: "a; b { }" holds a semicolon and a pair of braces that mean nothing to CSS. Strings are lifted out before any rewriting happens and put back at the end, so their contents are never counted as structure.
• The same shielding covers url(), which is why a base64 data URI survives with its padding = characters intact.
• An empty rule is deleted along with its selector. If that empties the @media block wrapping it, the block collapses too, on the same pass — the counter under the output tells you how many went.
• Leave a quote open and nothing is minified at all. You get "A quoted string is never closed — check for a stray apostrophe." and the input stays on screen, because a partial minify of a broken stylesheet is worse than none.

Limits: What This Will Not Touch

• Zero keeps its unit whenever dropping it would be invalid. The 13 length units are stripped; s, ms and deg are not, so transition:opacity 0s linear stays exactly as written.
• Declarations are never reordered, merged or deduplicated. Two rules setting the same property both survive, because which one wins depends on selector specificity this tool does not evaluate.
• Longhand is not collapsed into shorthand. Four separate margin declarations stay four.
• Savings are reported in UTF-8 bytes rather than characters, so a stylesheet carrying accented content strings reports the size a server would actually send.