Introduction
CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.
Features ("a" stands for all selectors, "margin" stands for all properties):
- colours like "black" or rgb(0,0,0) are converted to #000000 or rather #000 if possible. Some hex-codes are replaced by their colour names if they are shorter.
- a{property:x;property:y;} becomes a{property:y;} (all duplicate properties are merged)
- margin:1px 1px 1px 1px; becomes margin:1px;
- margin:0px; becomes margin:0;
- a{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;} becomes a{margin:10px;}
- margin:010.0px; becomes margin:10px;
- all unnecessary whitespace is removed, depending on the compression-level
- all background-properties are merged
- all comments are removed
- the last semicolon in every block can be removed
- missing semicolons are added, incorrect newlines in strings are fixed, missing units are added, bad colors (and color names) are fixed
- property:value ! important; becomes property:value !important;
Why optimise?
If you optimise your CSS code you have faster loading pages and lower traffic costs. So both you and your visitors benefit from an optimisation. If you are interested in a faster loading webpage, websiteoptimization.com might also be an interesting resource.
Compression ratio
The compression ratio mostly depends on the level of whitespace-removal. Using standard whitespace-removal (which preserves the readability) the compression ratio often is 30% and more. In theory the compression ratio can be 99,99% but only very "stupid" stylesheets will allow those ratios. Also have a look at the examples.
Apart from compression
If a high compression is not important for you, you can also use CSSTidy to format or fix CSS code for a higher browser compatibility. Apart from the 4 default templates you can specify custom templates so that you can easily format a lot of CSS code using your own coding style. Other features are sorting and changing the case of selectors and properties.