CSS Minifier
Strip the comments and the slack out of your CSS. The spaces that
mean something — inside calc(), and
before a colon in a selector — are left alone.
The two spaces that are not optional
Inside calc().
calc(100% - 2rem) needs the spaces around the minus
sign. Take them out and you get calc(100%-2rem), which
is not a subtraction at all — the browser reads
-2rem as a negative number sitting next to a
percentage, cannot make sense of it, and throws the whole
declaration away. It fails silently: no error, the rule is simply
not there.
Before a colon in a selector.
.card a :hover means “any hovered element inside
a link inside a card”. .card a:hover means
“a hovered link inside a card”. They are different
rules, and a minifier that squeezes out every space turns one into
the other. Inside a declaration block a colon never has that
problem, so the space there is removed.
What else is protected
Text in quotation marks is content and is never touched, so
content: " " keeps its spaces. Anything inside
url() is left alone, because file names may contain
spaces and parentheses. And a comment beginning /*! is
kept: that is the convention for a licence notice, and stripping a
licence out of somebody's stylesheet is not a saving, it is a
problem.
What it deliberately does not do
It does not turn 0px into 0, merge
duplicate rules, reorder declarations, or drop properties it thinks
are unused. Each of those saves a little more, and each of them can
change how the page renders in a case the tool cannot see —
a shorthand later in the file, a rule another stylesheet overrides,
a class a script adds. The whole value of a minifier is that you
can use it without reading the output.
Check the gzipped numbers before you celebrate
Stylesheets are served compressed, and compression is very good at repeated spaces and repeated property names. So this page gzips both versions and shows both. A twenty per cent raw saving is often two or three per cent of what the visitor actually downloads. Still free, still worth taking; simply not what the big number suggests.
Frequently asked questions
Why did my calc() keep its spaces?
Because it has to have them. calc(100% - 2rem) is a subtraction; calc(100%-2rem) is nonsense and the browser discards the whole declaration without any error. Everything inside calc() is left exactly as written.
Why is there still a space in '.card a :hover'?
Because removing it would change the rule. With the space it means any hovered element inside a link; without it, a hovered link. They match different things, so the space stays.
What is a /*! comment?
The usual convention for a comment that must survive minifying, used for licence notices. Ordinary comments are removed and those are kept.
Does it remove units from zero values?
No. It is a real saving and it is also the kind of change that occasionally matters, so this page leaves it. The same goes for merging rules and dropping duplicates.
Can the output be read back into this tool?
Yes - minified CSS is still valid CSS, and running it through again simply changes nothing. What you cannot get back is the comments and the layout, so keep your source.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.