Target: %COMSPEC% /K [script name]
Start in: %CD%

Ok browser makers. Let's start over. I don't think any site is using the navigator.appVersion anymore so now is as good of time as ever to start fresh. What do you say?

I decided to evaluate different CSS compressors to see which one was "the best". I really didn't expect it to take a week to put this together. Along the way I discovered more ways of compression: some from the tools I evaluated and some I thought of along the way.

I began my research by taking the list of 10 compressors from Design Shack's 18 CSS Compression Tools and Techniques article by Joshua Johnson. I replaced one with the tool I currently use, YUI compressor. YUI compressor is the only tool that can be downloaded and added to the build process. I also consulted the wonderful resource found at Lottery Post. The next step was to create a CSS file, feed it to each of the compressors and compared them. I was going to use the color name "ForestGreen" but because it wouldn't pass CSS validation I used the CSS-compliant color name "fuchsia". The original file has a size of 4.01KB. Keeping the CSS file simple was difficult. Compressors were thrown off I placed comments in strange places, but in the end I left those fringe cases out.

Compressors

Here are the compressors, listed alphabetically.

• Arantius CSS Compressor
• CleanCSS
• CSS Compressor
• CSS Drive
• CSS Optimiser
• Lottery Post
• PHP Insider
• Pingates
• Seven-forty
• YUI compressor

Compression Techniques

The compression techniques that I was looking for spanned from "simple and expected" to "difficult and potentially behavior-changing". Lottery Post does a good job explaining some advanced compression techniques and why they are dangerous. I decided to break up the compression techniques into categories.

1. Safe
2. Unconventional
3. Dangerous

Safe

1. Removes comments
2. Removes whitespace
3. Removes empty blocks
4. Removes decimals
5. Removes units from zero values¹
6. Removes quotes from URIs
7. Reduces margin, padding, border-width
8. Compresses hex colors
9. Compresses colors by hex or name, whichever is shorter
10. Converts RGB to hex

The "safe" techniques I expected to see from most compressors, although some did surprise me. These should have no ill effects, such as removing quotes around URIs².

Unconventional

1. Removes duplicate rules
2. Removes overwritten rules
3. Compresses font weight
4. Changes color names to lowercase
5. Changes color hex values to lowercase

These techniques shouldn't affect the behavior of the page and were either not very common or I hadn't seen them before -- especially compressing the font weight. Only two compressors did this -- CSS Compressor and CleanCSS. You might wonder why changing the colors to lowercase would help. Well, using lowercase letters helps when you GZIP your files³. In a simple test, using lowercase RBG hex values saved me two bytes after GZIP compression.

Dangerous

1. Converts tag names to lowercase
2. Combines styles for the same element
3. Combines font styles
4. Combines margins, paddings, borders
5. Combines same styles from different elements

Techniques 2-5 match up to the ones Lottery Post won't perform because of the possibility of changing the behavior. I often don't use the "Cascading" part of "Cascading Style Sheets" so I don't think it would affect any of my CSS. Again, changing the case where you can will help GZIP compression. Beware, though. This is safe for HTML, but not safe for XML⁴. In a simple test, changing "DIV" to "div" did save one byte after GZIP compression. (I know, "1 byte". But we're talking about micro-optimizations.) Since none of the compressors changed the tags' case, I didn't include it in the summary table.

Commonalities

All compressors removed some comments and most whitespace. Most compressors tried to compress hex color values. But besides this, there were very little that all compressors shared.

Compressor Results

Arantius CSS Compressor

I wasn't too impressed with the Arantius compressor. It removed spaces and single line comments, but not multi-line ones. The compressor removed all possible semicolons, minus the extra one in the "removesExtraSemicolons" class. Everything else was unchanged. Output CSS - 1.95KB

CleanCSS

CleanCSS applied most techniques, but did miss 2 "safe" ones (removing the decimals and removing quotes around URLs) and one "dangerous" technique of combining font styles. Otherwise, it was one of the better compressors. It was one of only two that compressed the font-weight and was smart enough to remove overwritten and duplicate rules. It combined individual margins and paddings when all four sides were present and grouped classes with the same style. It tied for second place in smallest file size.
Output CSS - 1.51KB

CSS Compressor

CSS Compressor had some options and I tried to use the most aggresive ones. Here is the setup I used: "Highest" compression mode, checked "Remove last ;" and unchecked "Only safe optimisations"
This compressor was the best. It removed all possible spaces and semicolons. CSS compressor also compressed the font-weight and did a remarkable job of combining rules, even combining the "removesURLSingleQuotes" and "removesURLDoubleQuotes" which some other compressors missed. CSS Compressor had the smallest compressed file size.
Output CSS - 1.50KB

CSS Drive

CSS drive didn't do a very good job. It did a mediocre job removing spaces. It didn't remove any empty blocks or change RGB colors. It had the second to largest file size.
Output CSS - 1.94KB

CSS Optimiser

This compressor did an adequate job compressing styles. Some quirks though: it took my one class of "removesDuplicateRules" and declared it twice.
.removesDuplicateRules,.removesDuplicateRules{width:4%}
It removed zero value pixel units, but not percentages or ems. It did simple hex color compression, but didn't touch the RGB colors. It was one of two that compressed my font styles into one font declaration. It tried to reduce the size of the margin classes, but because of the length of the class name, actually increased the size of the file. (".combineIndividualMargins3" is larger than "margin-left:2px".)
Output CSS - 1.57KB

Lottery Post

Lottery Post is a very good CSS compressor for what it says it will do. Except for removing decimals it used all the other "easy" techniques. It doesn't try the "unconventional" or "dangerous" techniques and gives good reason not to. Lottery Post also boasts that it is the only compressor to fix a CSS bug in IE6 pertaining to ":first-line" and ":first-letter". I was disappointed to see my decimal RGB colors incorrectly converted. "rgb(250, 150, 50)" should have changed to "#fa9632" but instead was "#FAFAFA". And both RGB percentages were converted to "#FFF" If those two issues were fixed I would confidentally call this one a very good "safe" compressor.
Output CSS - 1.75KB

PHP Insider

This compressor removed new lines, tabs and comments. And that's it. It had the largest compressed file size.
Output CSS - 2.00KB

Pingates

The good: Pingates did a good job of removing spaces and combining styles. It removed duplicate and overwritten rules. It was one of only two to compress the font styles and the only one to change color values to lowercase.
The bad: RGB colors were incorrectly changed. URL quotes values were escaped instead of removed.
The ugly: It replaced my class name "removesAllWhiteSpace" to "removesAll#ffffffSpace".
Output CSS - 1.51KB

Seven-forty

A light compressor, it only tried the "easy" compression techniques and then, not real well. Whitespace was removed, but it didn't remove trailing semicolons, something I've come to expect. It incorrectly changed my "background-color: rgb(255, 0, 0)" to "#ff00".
Output CSS - 1.86KB

YUI compressor

"Ah. Saving the best for last," I thought. I thought wrong. I was surprised when the YUI compressor didn't even remove trailing semicolons! Yikes! Because it is open-source, you can download it and change what you want to. And because it is packaged as a jar file, it can be easily integrated into an Ant build process. But as far as removing bits, it lacked, settling only on trying the "safe" techniques.
Output CSS - 1.84KB

Conclusion

The conclusion I came to is no compressor does it all. And as for my development, I should probably look for something other than YUI compressor. I might have to develop my own compressor that I can plug into my build process.

References:

Friday, January 29 at 7:09 PM: Updated table to reflect that Lottery Post's compressor does remove decimals and therefore uses all "safe" compressions (including two I forgot!). Thanks to Todd for pointing that out.

"The null value ... can only be assigned by your code."
From Object-Oriented JavaScript by Stoyan Stefanov

But so will this:
num = 0;
var num = num || 10;
alert(num);

Watch out for the cases where num is "falsey".

1. I have used <!CDATA[...]> sections when I'm embedding "<" and ">" but I think that's just because I've used XSL before and they have caused problems when performing transformations. But I'll try to remove it from my HTML as he suggests.

2. If I don't have a URL to use in the href attribute, I'll still use "javascript:void(0)" because I really don't like the hash being added to my URL. Perhaps I should just add some jQuery code:

$("a[href='#']").click(function(){return false;});

That's 49 characters, so I would have to change only 3 links to use the hash instead of "javascript:void(0)" to save space.

With the latest version of Safari (4.0.3), users were accessing our company portal which contains several iframes to include different applications. Four of these iframes would flash their content and then go blank. I found if I hid my one "true" portlet, then it would work fine.

I ran the validation tool and nothing jumped out at me so I started by having my portlet output nothing and slowly added things until the other iframes went blank. I found that if a <style> tag was output by the portlet, that would make the other iframes go blank.

On one of Apple's forums, it was suggested that it had to do with people trying to use a doctype of XHTML strict, which wasn't my case. It was those style tags. I have enough control so that I can move the CSS to the header of the page. Problem solved.