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?

good luck - that's more like refactoring than minification

Phil Helix
– Phil Helix

2011-02-23 23:28:24 +00:00
Commented Feb 23, 2011 at 23:28 — Phil Helix
– Phil Helix, Commented Feb 23, 2011 at 23:28

thirtydot · Accepted Answer · 2011-02-23 23:29:16Z

16

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.

answered Feb 23, 2011 at 23:29

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurav · Accepted Answer · 2011-02-23 23:37:03Z

4

Make sure you also have gzip enabled on your server (or some other form of compression for text files).

answered Feb 23, 2011 at 23:37

Saurav

3,1443 gold badges22 silver badges12 bronze badges

1 Comment

thirtydot Over a year ago

A good point. You'll probably save much more from HTTP compression than CSS optimisation. A pedantic tip to squeeze every last byte out of your CSS size (if you're using HTTP compression) - use lowercase colours: don't use #CFCFCF, use instead #cfcfcf - that way the compression ratio will be slightly higher because you're more likely to have the characters c and f than C and F in your file, because everyone uses lowercase declarations, like color: red.

Collectives™ on Stack Overflow

How to compress CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related