CSS Minimizer?

Question

Do you know of an online CSS compressor that helps remove redudant/ineffecient CSS declarations and replaces it with more optimized CSS?

Meaning, I know that a lot of "compressors" exist that simply remove tabs, remove comments, etc.

But what I'm looking for is something smart enough to know that:

border-top: 1px solid red; 
border-bottom: 1px solid red; 
border-right: 1px solid red; 
border-left: 1px solid red;

is the same as the more efficient:

border: 1px solid red;

UPDATE: The CSS I'm trying to optimize is at the link below

http://tinyurl.com/yhy5ln

http://stackoverflow.com/questions/787789/any-recommendations-for-a-css-minifier — Mauricio Scheffer, Oct 27 '09 at 21:02
@Mauricio Scheffer, the selected answer in that most was to use YUI Compressor. All YUI Compressor does it strip your CSS of unneeded characters (like cartridge returns, tabs, spaces, etc). What I'm looking for is a CSS Optimizer, that combines redundant CSS declarations. — Ted, Oct 27 '09 at 22:08

score 8 · Answer 1 · answered Oct 27 '09 at 20:40

8

Will this do? It beautifies, minifies, merges, and simplifies rules where possible, and is highly configurable.

answered Oct 27 '09 at 20:40

ceejayoz

176,543
40
303
368

I just tried using your site, leaving all the default settings and it produces CSS that makes my site look different than before. – Ted Oct 27 '09 at 20:47
And as such, since it doesn't maintain the same visual look for my site - I cannot recommend (or use) the link you gave – Ted Oct 27 '09 at 20:48
Try tweaking the settings. Also, if you post your CSS, we may be able to figure out why. This compressor has never changed my site's appearance that I can recall, so I'm wondering if it's a hack or a browser-specific issue. – ceejayoz Oct 27 '09 at 20:49
1

@ted have you tried different options when running the CSS through other than the default? There's a reason multiple options are available to customize... – Agent_9191 Oct 27 '09 at 20:52
@Agent, I've left all the defaults expect for trying each of the different compression levels: Highest, High, Standard, and Low. Each compression results in my web page visually looking different than without using the compression tool. – Ted Oct 27 '09 at 21:36
Again, if we could see your CSS we might be able to troubleshoot. It's possible it's a simple fix. – ceejayoz Oct 27 '09 at 22:07
@ceejayoz, I've updated my original post to give a direct link to my web page in question – Ted Oct 27 '09 at 22:16
@ceejayoz, could you please indicate who you are using my CSS to not produce results that make my web page look different ... while at the same time using your tool to optimize my CSS code – Ted Oct 28 '09 at 03:35
The link you provided requires a login. – ceejayoz Oct 28 '09 at 12:21

score 0 · Answer 2 · answered Feb 08 '13 at 08:55

0

Try Devilo.us

It also gives you control over how much you want to compress your code.

answered Feb 08 '13 at 08:55

rafleo

580
8
28

DisgruntledGoat · Answer 3 · 2009-10-28T11:00:45.490

Clean CSS is one I tried before.

However, for your example of merging rules I highly recommend doing it by hand, because there are situations where any automatic tool could mess something up or not catch an optimization.

If you had, for example:

border-top: 3px solid red; 
border-bottom: 3px solid red; 
border-right: 1px solid red; 
border-left: 1px solid red;

The best way to optimize this is:

border-width: 3px 1px;
border-style: solid;
border-color: red;

But an optimizer may not catch this.

EDIT

Tried the above example and Clean CSS didn't cut the mustard. However, FlumpCakes Optimizer is better. It catches your example, but not my advanced example.

CSS Minimizer?

3 Answers3

Linked