Notes about the CSS Compressor
The CSS Compressor greatly reduces the size of standard CSS code, stripping out unnecessary characters and implementing CSS shortcuts, allowing you to minimize the size of CSS file downloads on your web site.
This tool does not store a copy of your code. The server processes it on-the-fly and returns the output to you without storing anything. So if you use this tool to compress a super-secret bit of CSS code (if there is such a thing) it is not stored or read by me.
Please send me your feedback to let me know what you think, or if you have suggestions or would like to report an error.
Top
Background
I wrote CSS Compressor from scratch, because I was unable to locate a suitable compactor for Lottery Post's CSS code. I have been unable to locate another CSS compactor on the Web that can make the code as small as this tool can.
In re-writing Lottery Post to XHTML 1.1 standards, and the resulting increased reliance upon style sheets, I looked for ways to reduce the download size for each page (thereby increasing performance). There are many utilities out there that remove white-space from CSS files, but nothing (that I could find) which actually changes the CSS code to take advantage of CSS shortcuts. So I wrote it myself.
Today, Lottery Post uses the same CSS compression engine as you're using on this page to generate the final CSS for the site. In addition to compressing the CSS, I also combine multiple CSS files into a single file download in order to further increase performance.
The CSS that you paste into the Input section must be error-free in order for this utility to work properly. Before compressing, CSS code should be validated to ensure that CSS Compressor will not inadvertantly strip out required CSS code.
If you have a problem with the CSS output, the first thing you should check is your CSS code: did you include all the proper brackets, does every begin quote have a matching end quote, are there any CSS hacks that could be coded incorrectly or in a confusing way?
If you find the CSS Compressor creates a buggy CSS file (and you have validated the file to be sure it's not a problem with the CSS itself), please send me a note and include the snippet of original CSS code that does not get properly compressed.
Although I am not aware of any problems with the compressor, there is no guarantee or warranty of the output results.
Top
How it works
Here is a list of the ways the CSS Compressor reduces the size of your CSS style sheet. There are no known issues with any of the shortcuts specified below in any web browser.
The only CSS bug that I have ever found (which is specified below and affects only IE6) is checked for and fixed during compression.
| Compression Technique |
Examples |
| Before |
After |
| Removes all comments. |
/* comment */ |
|
| Removes all extra indenting, spaces, and linebreaks. When you see the output text, the style sheet will appear to be one huge line of text, no longer a nice, pretty listing with indents and spacing for readability. The removed spaces and linebreaks normally is the bulk of the reduction in file size. |
p {
margin: 15px 0;
} |
p{margin:15px 0;} |
| Looks for opportunities to reduce the number of sides specified for margins, padding, and border-width. |
margin: 5px 5px 5px 5px; |
margin:5px; |
| Removes unnecessary decimals. |
margin: 10.0px; |
margin:10px; |
| Removes quote characters from url() values. |
content: url("logo.gif"); |
content:url(logo.gif); |
| Removes units on zero lengths/widths/size. This is not only a short-cut, but it is improper CSS to specify units on a zero value, so I'm fixing your CSS for you. |
margin: 0px; |
margin:0; |
| Changes 6-digit hex color codes to 3-digits whenever possible. |
color: #55aa77; |
color:#5a7; |
Further reduces colors by determining if it takes fewer characters to specify a color by name or by hex digits. Doing this conversion actually fixes a potential CSS bug: Netscape browsers prior to version 4.0 do not support the color aliceblue, which is converted to #f0f8ff during compression. |
color: blanchedalmond;
color: #f5f5dc; |
color:#ffebcd;
color:beige; |
| Changes rgb() color values to 6-digit hex codes, 3-digit hex codes, or a color name, whichever is the shortest length. Includes the conversion of percentages, which are allowed under the CSS specification. |
color: rgb(255, 25, 52);
color: rgb(50%, 50%, 0%); |
color:#ff1934;
color:olive; |
Fixes the only known CSS bug caused by compression (affects IE6) by inserting a space between :first-line or :first-letter and the following { character. |
p:first-letter{ |
p:first-letter { |
Top
Can you think of another way to compress CSS code that I missed?
Please let me know!
