22

For example

input{margin:0}body{margin:0;background:white}

would be shorter written like this

input,body{margin:0}body{background:white}

or this

input,body{margin:0}body{margin:0;padding:0}

would be shorter written like this

input,body{margin:0}body{padding:0}

Conclusion no such tool See the accepted answer.

A tip to the tool writers, you may want to consider gzip. Sometimes, leaving a few bytes on a second-rate optimization will be shorter in the end because gzip is essentially byte-level deduplication. If there are two identical sections, gzip will reference the earlier one. Ideally this would be considered in deciding if certain optimizations should be skipped some or all of the time, and what the order of the selectors and rules should be.

700 Software
  • 85,281
  • 83
  • 234
  • 341

11 Answers11

20

This can be done using CSSO.

Consider the following input:

input{margin:0}body{margin:0;background:white}

CSSO output:

input,body{margin:0}body{background:#fff}

(exactly what you are looking for)

But unfortunately, CSSO optimize this:

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

To:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

However, CSSTidy converts the above to the corresponding shorthand property:

.dont-care {
    background:url("images/chart.png") no-repeat;
}



Seven Four steps solution for optimizing CSS:

Here is the practice I follow:

  1. Merge CSS files in all.css.
  2. Supply to CSSO input.
  3. Hit Minimize
  4. Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..



But what about old IE hacks?

If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO output:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

CSSTidy will ignore asterik(* hack used for IE6), and output:

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.


Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

Consider that example:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

and if you'd have <div class="a b"></div> — an element with both classes, you can't optimize the .b as you write, 'cause it would override the background-attachment set in .a.
So, no, that's not a safe optimization.

vulcan raven
  • 32,612
  • 11
  • 57
  • 93
2

If you use visual studio, you could install the Web Essentials extension. It has experimental support for cleaning and merging CSS rules, but not exactly like you subscribed. It, for one, creates more whitespace, but it does combine css tags, that have (partially) equal styles eg..

Filip Cornelissen
  • 3,682
  • 3
  • 31
  • 41
2

try LESS.

LESS will automatically recognizes when you save your *.less file and immediately compiles your CSS-Code and will minified. You can create as many files as you want and LESS will observe them all to trigger compilation.

You will only work in the .less files. the Tool will auto compile and save you files as .css

http://lesscss.org/

Prasad Jadhav
  • 5,090
  • 16
  • 62
  • 80
Louis
  • 1,014
  • 2
  • 11
  • 20
2

I would recommend https://www.npmjs.com/package/gulp-clean-css

if you don't have problems using gulp it's doing exactly as you want

Ahmed Mahmoud
  • 1,479
  • 2
  • 12
  • 18
2

Take a look at CSS Tidy, it can do some merging: http://csstidy.sourceforge.net/

VoxPelli
  • 2,697
  • 1
  • 16
  • 22
  • Their feature list does not seem to work on the level I described (I don't blame them, I had little expectation to find such a tool anywhere except by converting an entire project to GWT.) – 700 Software Apr 18 '11 at 12:30
1

CSSO is little bit outdated, ACCSS is a port CSSO to but fixes open issues of the original code.

https://github.com/acwtools/accss

and it also has a better compression ratio

Yuri Okada
  • 21
  • 1
1

Yes, there is. The YUI Compressor does this for you. I was wrong, the YUI Compressor is only a minifier, but indeed very useful. What and how they minify is presented here.

This is a .jar package that you'll have to download and then run through the terminal, if you're on Unix or Linux (I don't know about Windows, so someone fill this gap!), with the following syntax:

$ java -jar /path/to/yuicompressor-x.y.z.jar myfile.css -o myfile-min.css

The -o option declares what file you wish to write your minified content to.

Alexander Wallin
  • 1,394
  • 10
  • 22
  • YUI doesn't re-write rules and combine like rules as the OP is asking. It does do generic minification (did I just invent a word there?), but that's not what he was asking if I understood correctly)... – ircmaxell Feb 04 '11 at 22:54
  • irc is correct. This only seems to handle basic optimizations such as whitespace and comments. Also the command you displayed is the same on Windows if you add Java's bin to the `PATH`. If not you have to specify the full path to the exe file in double quotes `"C:\Program Files\Java\...\bin\java.exe" -jar ...` – 700 Software Feb 05 '11 at 01:32
1

May be the wrong thing, but http://www.cleancss.com/?

Alex Chin
  • 1,642
  • 15
  • 28
  • That is close. At least they convert `form{margin:0}body{margin:0}` into `form,body{margin:0}`. It also shortens color names (`#FF0000` is shorter as `red`). It does not handle of the examples in the question. – 700 Software Feb 05 '11 at 01:25
  • CleanCSS.com is based on an old version of CSS Tidy. Found a site running the latest version via Google: http://cdburnerxp.se/cssparse/css_optimiser.php – VoxPelli Apr 03 '11 at 21:23
1

No, there is no such tool which optimizes to the level you ask (that I'm aware of at least), and I'm not sure you'd want to use it if there was. The reason is that it's not a trivial problem to find the smallest possible minified css code. For the trivial CSS you provided, it's easy. But imagine doing that on a 300kb block of CSS. It's not trivial. And is it worth wasting the CPU time generating it (it might be if you're caching the results, but it won't be if you're serving it dynamically)?

And what's the gain? Saving a few percent at most on the transfer? Unless you have facebook level traffic, you're not going to save much bandwidth. And a few percent isn't going to impact your users much either (even over dial-up, transferring a few kb isn't that bad).

Just use a standard compressor (minify, YUI Compressor, etc) and be done with it. Instead, worry about the low hanging fruit. The easy to fix problems...

ircmaxell
  • 163,128
  • 34
  • 264
  • 314
  • The plan is to cache the minified and gzipped versions of all CSS and JavaScript on all apps assuming they have a single commented out line that says it is OK to do so (not trying to debug code). Also this is for obfuscation in order to make our code harder to run off with. The CPU would only happen once for every change to the file. This handling would be on the webserver level which will be replicated to many servers. - - - So if there was one available,, I would use it. Although we don't have FaceBook level traffic, we do like to keep our code from getting out. – 700 Software Feb 05 '11 at 01:37
  • @George: for obfuscation or keeping your code from getting out, this is not the right way. That's a separate problem (which I would argue isn't possible to solve in this case), so it should likely be treated as such... – ircmaxell Feb 05 '11 at 03:31
1

have you tried less.js ? you can write css code in an object oriented manner, also you can use this framework either on client side or server side, below a demonstration on your case:

/* you can write you desired css as follows */
body {
  &input {
        margin: 0;
  }
  background:white;
}

and it will be automatically compiled into:

body, input {
    margin:0;
}

body {
    background:white;
}
Anas Nakawa
  • 1,977
  • 1
  • 23
  • 42
  • Looks pretty good so far, but I cannot fully test right now because in order to output plain CSS I have to use Node JS. Using the browser seems to just call the generated CSS without actually outputting it to the screen. I will get around to this eventually. – 700 Software Feb 28 '11 at 15:35
  • Instead of embedding the less.js directly, you could use WinLESS/Less.app (Win/Mac) to watch the directory where you store your .less files. It will automatically convert it into .css for you (and the apps should even have options for better compression) – Brian Jun 26 '12 at 22:03
1

Ther are several out there. Some of the best ones are;

http://refresh-sf.com/yui/

http://www.minifycss.com/css-compressor/

The second one groups rules that match together also and more.

Desi
  • 375
  • 2
  • 9