CSS Minifier - Minify CSS Online Without Breaking calc(), url() or Strings

A minifier that works by search and replace on the whole text breaks CSS sooner or later, because the same characters mean different things in different places: a space inside a string is content, a space inside calc() is syntax, and a space before a colon in a selector changes what it matches. This tool first splits your CSS into tokens following the CSS Syntax Module Level 3 rules: comments, strings with their escapes, url() values, identifiers, numbers with units, colours, brackets and punctuation. Only then does it decide, token pair by token pair, whether a space between them can go.

A space is removed only next to { } ; and commas, just inside ( ) and [ ], around / and * inside values, around the combinators > + ~ in selectors, and around the colon in a declaration or a media feature. Everything else keeps a single space. That is why calc(1px + 2px) keeps the spaces around + and - (CSS Values 4 says whitespace is required on both sides of those two operators, while * and / need none), why "and (min-width: 48em)" keeps the space after and (Media Queries 4 says it is required, otherwise "and(" reads as a function), and why "a :hover" stays different from "a:hover". The last semicolon before a closing brace is dropped, and @charset stays first in the file, with the single space before the quoted name that browsers require.

With "Shorten values" on, numbers are written in their shortest form (0.5 becomes .5, 1.50 becomes 1.5), a zero length loses its unit (0px becomes 0, which CSS Values 4 allows for lengths), and a colour such as #ffffff becomes #fff when every pair of digits repeats. Percentages, times and angles keep their units, so 0%, 0s and 0deg are untouched. A unit is never removed inside calc(), min(), max(), clamp(), var() or env(), where a bare 0 would be invalid or change the result, nor in the flex shorthand or inside @property. Old Internet Explorer filters (progid:) and expression() values are not rewritten at all. The value of a custom property (--name) is kept as written apart from comments and the space at its start and end, because the page may use it in ways no tool can see.

After minifying, the tool tokenizes its own output and compares it with your input, ignoring white space, comments and the final semicolon in each block, and tells you whether the two match. The gzip figure is an estimate made with your browser's CompressionStream; a web server may use another compression level, so treat it as a guide. Beautify uses the same tokenizer, so it also keeps strings and url() intact, puts each selector of a list on its own line, and keeps any comments it finds. Problems it cannot repair for you, such as a brace that is never closed or a stray semicolon between rules (a browser reads that semicolon as the start of the next rule and ignores the rule), are reported above the result.