CSS Minifier and alphabetiser
What is it?
CSSMin takes your CSS file and strips out everything that's not needed -- spaces, extra semicolons, redundant units, and so on. That's great, but there are loads of programs that do that. A shell script could do that! So what makes CSSMin different?
When you deliver content over the web, best practice is to deliver it gzipped. CSSMin takes your CSS file, and optimises it for gzip compression. This means that there's a smaller payload delivered over the wire, which results in a faster experience for your users. It does this optimisation by ensuring that the properties inside your selectors are ordered consistently (alphabetically) and in lower case. That way, the gzip algorithm can work at its best.
What this means in practice is that your gzipped CSSMin-ed files are significantly smaller than plain gzipped CSS, and noticeably smaller than files that have been compressed by other means (say, YUI).
In this update:
Nested properties are now fully supported.
This means that the following CSS:
[sourcecode language="css"]@-webkit-keyframes 'fadeUp' {
from { opacity: 0; }
to { opacity: 1; }
}[/sourcecode]
is compressed down to
[sourcecode language="css"]@-webkit-keyframes 'fadeUp'{from{opacity:0}to{opacity:1}}[/sourcecode]
Your nested properties will have their contents compressed with all of the other tricks in system, but their order will be retained.
Thanks to
bloveridge for reporting this bug and verifying the fix.
Font weights are replaced by their numeric counterparts.
[sourcecode language="css"].alpha {
font-weight: bold;
}
.beta {
font-weight: normal;
}[/sourcecode]
becomes
[sourcecode language="css"].alpha{font-weight:700}.beta{font-weight:400}[/sourcecode]
Values supported are "lighter", "normal", "bold", and "bolder".
Quotes are stripped where possible.
[sourcecode language="css"].alpha {
background: url('ponies.png');
font-family: 'Times New Roman', 'Arial';
}[/sourcecode]
becomes
[sourcecode language="css"].alpha{background:url(ponies.png);font-family:'Times New Roman',arial}[/sourcecode]
As much text as possible is changed to lower-case.
Only selectors, quoted strings (such as 'Times New Roman') and url() values are left intact.
Note that this means that if you mix the case of your selectors (for example, SPAN and span), your compression will be sub-optimal.
Thanks
Some of the ideas for this update were inspired by
Lottery Post's CSS Compressor.
Start using it!
Requirements
You will need a recent version of Java and the Java compiler.
Download
Download or fork it on GitHub.
Usage
- Compile the Java: [sourcecode]# javac CSSMin.java[/sourcecode]
- Run your CSS through it: [sourcecode]# java CSSMin [input] [output][/sourcecode]
If you don't specify an output file, the result will be dumped to stdout. Warnings and errors are written to stderr.
Results
These are the results of compressing the main CSS file for one of the webapps I develop at work. Note that many of these compressors only offer an online service, which means that they can't easily be used as part of your general build process.
Feedback
Let me know how you go with it -- bug reports and feature requests are always welcome!
Contact
Barry van Oudtshoorn (bvanoudtshoorn [at] g[mail] [dot] com)
