Minification is the practice of removing unnecessary characters from code, to reduce it's size thereby improving load time performance. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). Additionally code would be further formatted onto a single line instead of multiple.

Most CSS can be compressed approximately to 1/5th of it's original size, sometimes even more! This minification tool work on Full Throttle and don't lose your time with annoying options and menus. The idea is to get the most minified and stable code, by clicking one button only. It's fully CSS3, Media Queries and IE hack compatible, so you don't have to worry about this. Just paste your code into the first textbox, click on 'compress' button and copy the generated code from the textbox below. You can find more information, about what this compressor do, at the sections below.

This compressor is based on simple but well organized regular expression. It does not mess with your code as much as needed, because we want to prevent malfunctioning or any other form of unwanted behaviour to your website.

All of the described functionalities are carefully tested and worked well.
Here is a full list of all major actions that this compressor do:

• Remove all comments See Example

  before: /* my comment */ .selector{style:value}
after: .selector{style:value}

• Remove all empty selectors See Example

  before: .selector{style:value} .selector2{}
after: .selector{style:value}

• Remove all unneeded white space characters (space, newline, and tabs) See Example

  before: .selector{
   style: value;
}
after: .selector{style:value}

• Remove last ; See Example

  before: .selector{style:value;}
after: .selector{style:value}

• Turns 0(em,px,pt,% .etc) to 0 See Example

  before: .selector{margin:1px 0px;padding:0px;}
after: .selector{margin:1px 0;padding:0}

• Remove quotes from background url path See Example

  before: .selector{background-image:url("../img/myPic.jpg");}
after: .selector{background-image:url(../img/myPic.jpg)}

• Replace font-weight:bold/normal with 700/400 See Example

  before: .selector{font-weight:bold;}
after: .selector{font-weight:700}

• Reduce HEX color codes (#ffffff to #fff) See Example

  before: .selector{background-color:#ffffff;}
after: .selector{background-color:#fff}

• Optimize margin, padding and box-shadow values See Example

  before: .selector{margin:2px 0px 2px 0px; padding:5px 2px 10px 2px; box-shadow:5px 5px 5px 5px;}
after: .selector{margin:2px 0;padding:5px 2px 10px;box-shadow:5px;}

• Remove 0 from decimal fraction See Example

  before: .selector{opacity:0.7;background-color:rgba(255,0,0,0.5);}
after: .selector{opacity:.7;background-color:rgba(255,0,0,.5)}

Grouping styles works as follows:
The function loops the whole css file in search of recurring styles. When the function detects two repetitive styles, it works as follows:

1. It preserves the selectors, to which the set style belongs.
2. It deletes this style in all places where it is found.
3. It groups all gathered selectors from step 1 and assigns them the selected style, and all of this is added to the bottom of the css file.

Let's demonstrate this with an example.

It is important to note that this method of minification is not always as effective as the standard one. In our first example the input css contains 143 characters and the output css - 152. This means that in this case, css size increased by 9 characters, which is the opposite of what we want to achieve. However, if we run standard minification of the code from example one, it turns out that we saved 5 characters.
In the second example, however, we saved 43 symbols by grouping styles and with the standard minification of the code we would decrease it only by 7 characters. This shows the true power of this method. Considering the fact that we would apply these methods on css with a much larger volume, the differences in size become enormous. Such discrepancies occur, due to the nature of the work of this functionality. As you can tell from these examples, this method can work for you as well as against you.

We should note one major drawback of this method, because of which it is not recommended. Generating these new grouped styles, there is a danger of rewriting. This would lead to the breaking of your site layout.

If this code is executed #lang. container would have a gray background because #lang. container {background:#c0c0c0} is written after #header .container {background:red}. If we minify the code using grouping of styles we would have the following css:

.container{width:960px;margin:0 auto;padding:5px 0}
#header, #lang .container{background:#c0c0c0}
#header .container, #lang{background:red}


As seen after grouping the selector #header,#lang .container{background:#c0c0c0} is now before #header .container,#lang{background:red}, which means that #lang. container will have a red background. Here we observe rewriting of styles that will change the layout.
This rewriting can be avoided if the selectors of styles are defined very specifically.

before: .container{width:960px;margin:0 auto;padding:5px 0}
#header{background:#c0c0c0}
#header > .container{background:red}
#lang {background:red;}
#lang > .container{background:#c0c0c0}
In this case there is no danger of rewriting. after: .container{width:960px;margin:0 auto;padding:5px 0}
#header, #lang>.container{background:#c0c0c0}
#header>.container, #lang{background:red}


Of course, if you have a large amount of styles, however the effort, it is very much possible to obtain such rewriting. Therefore, the use of this feature is not recommended because it can not guarantee that the outcome wouldn’t break your site.
On the other hand, this instrument that can give you guidance on the stability of your styles. If you want to have right set styles, that are in no way possible to rewrite each other, this is the ideal tool for inspection.