Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

Question

For example

input{margin:0}body{margin:0;background:white}

would be shorter written like this

input,body{margin:0}body{back         


        

Answer 1

This can be done using CSSO.

Consider the following input:

input{margin:0}body{margin:0;background:white}

CSSO output:

input,body{margin:0}body{background:#fff}

(exactly what you are looking for)

But unfortunately, CSSO optimize this:

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

To:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

However, CSSTidy converts the above to the corresponding shorthand property:

.dont-care {
    background:url("images/chart.png") no-repeat;
}

Seven Four steps solution for optimizing CSS:

Here is the practice I follow:

1. Merge CSS files in all.css.
2. Supply to CSSO input.
3. Hit Minimize
4. Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..

But what about old IE hacks?

If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO output:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

CSSTidy will ignore asterik(* hack used for IE6), and output:

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the tag of your HTML/masterpage/template/layout file eventually:

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.

Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

Consider that example:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

and if you'd have

— an element with both classes, you can't optimize the .b as you write, 'cause it would override the background-attachment set in .a.
So, no, that's not a safe optimization.