11

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

3
  • 1
    stackoverflow.com/questions/787789/…
    – Mauricio Scheffer
    Commented Oct 27, 2009 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
    Commented Oct 27, 2009 at 22:08
  • 1
    Please post a link that doesn't require you to log in.
    – DisgruntledGoat
    Commented Oct 28, 2009 at 10:46

3 Answers 3

Reset to default
8

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

9
  • I just tried using your site, leaving all the default settings and it produces CSS that makes my site look different than before.
    – Ted
    Commented Oct 27, 2009 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
    Commented Oct 27, 2009 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
    Commented Oct 27, 2009 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
    Commented Oct 27, 2009 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
    Commented Oct 27, 2009 at 21:36
0

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.

0

Try Devilo.us

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.