CSS Compressor 3.0

January 3, 2011
Tags: css, php

I'm a huge fan of competition, so when Stoyan posted his css-minifiers-comparison post, I took it as a personal challenge to beef up my own compressor, and make sure that I am ahead of the curve. Below are a list of new features/improvements made.

Safety

Safety is the main goal of this release, and the standard for future releases. A lot of the minifiers out there today tend to break stylesheets with their custom optimizations, or simply remove browser hacks added in. CSSCompression is built around the idea of keeping everything in place, and compressing only what it knows.

Full CSS Level 2 Support, Some CSS Level 3 Support

A lot of work has gone into reading through the CSS Level 2 Spec to find as many optimizations as possible. Some work has been done to dig into the new CSS3 properties, but most of them will simply be passed over until the working draft is finished.

Modes

3.0 introduces the concept of modes, or configuration sets. This makes it easier to manage and use different option sets to fit your needs.

  • Safe: (99% safe) Safe mode does zero combinations or organizing. It's the best mode if you use a lot of hacks.
  • Sane: (90% safe) Sane mode does most combinations(multiple long hand notations to single shorthand), but still keeps most declarations in their place.
  • Small: (65% safe) Small mode reorganizes the whole sheet, combines as much as it can, and will break most comment hacks.
  • Full: (64% safe) Full mode does everything small does, but also converts hex codes to their short color name alternatives.

Full Test Suite

As stated above, Safety was the main goal of this upgrade, and having most thorough test suite possible is a good way to ensure that. Version 2.0 had roughly 50 unit tests including a stylesheet for trim testing, but nothing too serious. So there was plenty of room to improve.

Sandbox Testing

Sandbox testing is the concept of running multiple tests that are meant to both pass and fail through a single compression function. This helps pinpoint problems with changes at the lowest level possible. Each test contains inbound parameters, and the expected result. Of course there will be special use cases where complex parameters or output need to be handled, but for the most part just pass in an array of parameters, and get back a string result.

The sandbox specs are located in the unit/sandbox/ directory, with each file representing a subclass. The actual specs go three levels deep in objects. The first being the method to focus on, the second being the name of the test for display purposes, and the third level contains the contents of the test. Here's an example you would find from the Numeric.json spec.

{
	"decimal": {
		"test removal": {
			"params": [ "1.0em" ],
			"expect": "1em"
		}
	}
}

We access the decimal method of the Numeric class, pass in "1.0em", and expect "1em" as the output. The "test removal" name is just for display.

Sheet Testing

Full stylesheet testing has been added to the test list to make sure all focused compressions behave together. It can be a pain during development having to always modify these guys to account for new techniques, but well worth it in the end.

Benchmarks / Regression Testing

This feature has the most exciting future prospects. What happens is we run the compressor against a large set of test files (thank you csszengarden.com) and store the results in a JSON file. Then, after we add new compressions, we can run the benchmark again and make sure we didn't lose bytes with the new additions.

Have a question or comment? ask@codenothing.com.