How to compress CSS

Question

I've looked at half a dozen CSS optimisers out there. What I'm looking for is one that will turn:

background-image: url(../images/background.png);
background-repeat: repeat-x;
background-color: #c0c0c0;

Into the single background property:

background: #c0c0c0 url(../images/background.png) repeat-x;

How can I do this? Do I have to do it by hand?

Answer 1

Try http://www.cssoptimiser.com/

Input:

body {
    background-image: url(../images/background.png);
    background-repeat: repeat-x;
    background-color: #c0c0c0;
}

(I ticked "Do not remove line breaks")

Output:

body {
    background:#c0c0c0 url(../images/background.png) repeat-x
}

Note that it also optimised away the space - you asked for background:<space>#... :)

There may be other/better tools which can do this, but that site does fulfill your wish.