Welcome Guest
Log In | Register )
You last visited December 22, 2014, 4:13 pm
All times shown are
Eastern Time (GMT-5:00)

CSS Compressor

Online CSS Compressor

Compact your CSS style sheets into the smallest size possible

  • Please see the extensive Notes section below, which includes a complete description of the compressor and the various techniques it uses to compress your CSS style sheets.
  • Don't forget to compress your JavaScript code too!

Input

Paste CSS code into this space, and then click the Compress CSS button.

Compress CSSPasteClear Input


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.

Background

I wrote CSS Compressor from scratch, because I was unable to locate a suitable compactor for Lottery Post's CSS code.  Other compressors I found did not use all the possible methods of compression, or they try to do too much and end up altering the CSS cascade (and ruining the page layout), or else they do not handle CSS bugs that need to be taken into account when compressing style sheets.

In re-writing Lottery Post to XHTML 1.1 standards several years ago, 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 at the time there were no quality tools I could find that would make harmless changes to the CSS code to take advantage of CSS shortcuts.  So I wrote it myself.

Today, Lottery Post uses the same CSS compression engine on the Web server to compress this site's CSS that you're using with this CSS Compressor tool.  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 inadvertently 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.

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 TechniqueExamples
BeforeAfter
Removes all comments./* comment */(No content)
Removes trailing semi-colons in style blocks.p {
   border: none;
   color: #000;
}
p{border:none;color:#000}
Removes all extra indenting, spaces, and line breaks.  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 line breaks normally is the bulk of the reduction in file size.p {
   margin : 15px  0;
}
p{margin:15px 0}
Removes empty style blocks.div { ; }
pre { }
p {
   /* border: none; */
}
(No content)
Looks for opportunities to reduce the number of sides specified for margin, padding, and border-width.margin: 5px 5px 5px 5px;
padding: 12px 2px 5px 2px;
margin:5px;
padding:12px 2px 5px;
Removes unnecessary decimals.margin: 10.0px;margin:10px;
Removes leading zeros.margin: 0.90em;
width: 0100px;
padding: -0.5em;
margin:.9em;
width:100px;
padding:-.5em;
Removes unnecessary positive number indicators ("+").margin: +10px;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 we convert 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;
Changes font weights to numeric values and removes unnecessary normal weight.font-weight: normal;
font-weight: bold;
font: normal 12px Arial;
font-weight:400;
font-weight:700;
font:12px Arial;
Changes some none values to 0.border: none;
background: none;
outline: none;
border:0;
background:0;
outline:0;
Converts IE opacity filters to shorter IE4 format.
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
Converts almost all text to lower-case, which saves bytes when gzipped (hat tip to Adam Koch).  Exceptions are URLs, ID and class name selectors, font family names, and attribute selectors.  Some browsers treat these parts in a case-sensistive manner.H1.myTitle[class=myClass] {
   FONT-FAMILY: Arial;
   COLOR: #FF1934;
   BACKGROUND: URL(/myImage.GIF);
}
h1.myTitle[class=myClass]{
font-family:Arial;color:#ff1934;
background:url(/myImage.GIF)}
Removes any spaces before !important.width: 10px !important;width:10px!important;
Minifies any JavaScript code contained within an expression() using all compression techniques in the JavaScript Compressor.width:
  Expression( window['width'] + 'px' );
width:expression(window.width+"px");
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 {

What else can I do?

Two words: GZIP compression.

The single-most effective technique for cutting download time for your Web pages is the application of GZIP compression to every type of resource that can handle it.  (You would not apply GZIP compression to resources that are already compressed, such as GIF images, because they can't be further-compressed, and you'll just waste CPU cycles if you try it.)

Apply GZIP compression to your HTML pages, CSS files, JavaScript files, XML files, web services output, and anything else that today your Web server sends as uncompressed text.

Most Web servers can apply GZIP compression by simply setting an option in the server.  (It's beyond the scope here to instruct you how to do it: there are lots of sources of help for this on the Web.)

So, definitely continue to use utilities like CSS Compressor to reduce the size of Web resources, but then also apply GZIP compression to your Web resources.  Combining these two techniques will make your pages load an order of magnitude faster.

What does the CSS Compressor purposely NOT do?

There are some great aggressive compression techniques that the CSS Compressor is programmed not to do.

I encourage you to implement these techniques when you are building your CSS files, but for reasons I'm about to explain, they are techniques that can be harmful to the integrity of your pages and layout when automated.

The table below explains what can go wrong when aggressive techniques are applied, but I don't want to create the impression that they would always fail.  However, the intent of this CSS Compressor is to ensure that the final output always works identically to the un-compressed CSS.  If these aggressive techniques were applied I could not reliably achieve that goal.

I am aware of some CSS compressors that aggressively combine CSS properties and use other techniques that I purposely avoid (as specified below).  Using such tools can actually lead to increased development time and frustration, because it can be difficult to track down the source of errors when the compressed CSS content cannot be relied upon.  Plus, the incremental benefits gained even when the aggressive techniques are successful can be minimal next to the space savings already realized from all of the techniques employed by the CSS Compressor plus GZIP compression.

Compression Technique / ExampleReason Not Used
Combine individual font styles into a single font property. font-family: Arial;
font-size: 12px;
font-weight: bold;
Becomes font: bold 12px Arial;
When the shortcut font property is used, all individual font properties that are not specified within the definition are reset to their default values.  This would have the unintended effect of disabling a previously-set font property on an element.  For example, if the font definition in the example were used on an em tag, the text within the tag would no longer appear in italics, because font-style would be reset to normal since it is not specified in the font definition.
Combine individual margin, padding, or border styles into a single property. margin-top: 10px;
margin-right: 0;
margin-bottom: 8px;
margin-left: 30px;
Becomes margin: 10px 0 8px 30px;
The "C" in CSS is extremely important: it stands for "Cascading", and means that the style rules are applied (and re-applied) in the order they appear in the page and in all the page's external CSS files.  Changing the order of the styles can easily disrupt the cascade and thus change the entire layout and/or style — and that is the problem with combining individual margin, padding, and/or border styles: it re-writes to order of the cascade, because rarely are they all specified perfectly together like in the example.
Combine styles for the same element that are specified in different style blocks. #element {
   margin: 0;
}

#element {
   color: #000000;
}
Becomes #element {
   margin: 0;
   color: #000000;
}

This technique has the same problems as the previous technique.  (Hopefully you're noticing the common thread that is emerging!)  It's the cascade: an attempt to combine the styles of an element that are specified in two different places can easily disrupt the order and application of the styles.  Plus, there may be other styles that get applied to the same element, but the CSS selector is different (such as selecting by class rather than id).  Those styles wouldn't be combined, and then things could be doubly-messed up.

Combine styles for multiple elements that share the same style definition. #element1 {
   margin: 0;
}

#element2 {
   margin: 0;
}
Becomes #element1,
#element2 {
   margin: 0;
}

Can you figure this one out?  That's right, it's the cascade.

There are some cases when combining definitions like this may be OK, such as when the definitions appear directly one after the other, but in every other case this technique risks corrupting the cascade of styles.

Can you think of another way to compress CSS code that I missed?
Please let me know!