Comparison CSS cleanup/compress/optimizer tools

Introduction

This article gives a quick overview of the different features of several CSS cleanup and optimisation tools (so no manual cleanup tips are given here).
For each a list of features is given and any other related useful links. The one I found the best suitable for what I wanted to do (cleanup) is at the top. But definitely check the other entries too, they are in no particular order, and they might be fitting your needs.
At the end of the article a bunch of generic tips are given.
Note the distinction you need to make between tools that cleanup your CSS and tools that compress your CSS before it is sent to the browser.
CSS cleanup (often also called optimisation): cleans up the CSS, for example by removing comments and unnecessary spaces and newlines.
CSS compression: before the CSS is sent to the browser, it is compressed with for example gzip.
Both reduce the amount of data for the CSS that is sent back to the browser. The cleanup does this by reducing the size of the plaintext CSS file. CSS compression does not modify the plaintext contents of the CSS, but compresses the CSS contents before it is sent over. When it arrives at the browser, it is decompressed
Thus, for optimal minimal CSS size, you should first do a cleanup and have it compress before it is sent to the browser.

Here we go

• http://csstidy.sourceforge.net/
  • Open source (GPL) CSS cleanup tool.
  • PHP and C++ sources are downloadable. Executables too.
  • An online version is also available.
  • Flag to indicate if you want comments and browser specific hacks to be removed.
  • Customizable templates for cleanup rules.
  • Here’s a short post about someone trying out a few csstidy settings: http://www.g-loaded.eu/2006/12/04/optimize-and-compress-css-files/.
  • Currently with version 2.1 there is a bug reported which I also encountered: when you have an invalid CSS 2.1 property like ‘opacity: 0.5′, CSSTidy will convert the 0.5 into 0.5px which is of course wrong. You can’t disable this conversion. In the end I just commented out that check in the actual PHP code.
• http://dev.wp-plugins.org/wiki/css-compress
  • A mix of compression and cleanup.
  • A WordPress plugin.
  • PHP sources available.
• http://www.cssdrive.com/index.php/main/csscompressor/
  • Online, with 3 levels of cleanup and stripping of comments.
  • Help for what turning on/off each option does.
• http://www.fiftyfoureleven.com/sandbox/weblog/2004/…
  • Tips for compressing your CSS when no Apache compression module is available.
  • On-the-fly compression, that is, when the page is loaded
  • Two methods are described. First is a PHP snippet you prepend to your CSS page. Second is a change in .htaccess
• http://isnoop.net/tools/css.php
  • Very basic CSS cleanup tool. Not many options to set.
  • Online version.
• http://www.joomlaspan.com/css_optimizer/index.php
  • Cleanup tool based upon CSSTidy. Many options.
  • Online version only.
  • Templates customizable.

Tips

Below are several tips when considering any of the CSS cleanup and compression tools:

• Double check the tool for what it does with browser hacks! Some tools might delete them!
• For performance reasons, it is not recommended to have the cleanup done dynamically. That is when you would let for example run CSSTidy over the CSS *each time* a user requests a page.
• When using compression, make sure you check all the browsers you want to support with your site actually do support compression.
• Caching can be an issue was reported somewhere… forgot where
• Validate your CSS before and after you cleanup and/or compress it at: http://jigsaw.w3.org/css-validator/

Other stuff

And finally, here are a couple of other articles that do some comparisons between cleanup/compression tools.

• This one
  • Here are 4 optimizers (cleanup) listed and compared in their compression rate.

• http://www.bloggingpro.com/archives/2006/08/17/…
  • Another 4 optimizers (cleanup) compared. Some overlap with previous post.

• And this one
  • Another CSS compression site referenced plus Javascript and HTML compression. Also a reference to an article in the comments that HTML zipping not always works, at least not for IE5.

Soooo…

What do you think? Any tools I missed that you use?

Post of this on digg.