views:

360

answers:

2
+7  Q: 

CSS Minimizer ?

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

+6  A: 

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

ceejayoz
I just tried using your site, leaving all the default settings and it produces CSS that makes my site look different than before.
Ted
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
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
@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
@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
Again, if we could see your CSS we might be able to troubleshoot. It's possible it's a simple fix.
ceejayoz
@ceejayoz, I've updated my original post to give a direct link to my web page in question
Ted
@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
The link you provided requires a login.
ceejayoz
A: 

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.

DisgruntledGoat