Web CSS optimizer that can handle CSS3 gradients

Question

Does anyone know of an online CSS optimizer / formatter that can handle css3 gradients?

I tried using http://www.cleancss.com/ , but converted something like this cross browser:

.example {background:#555555;background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717)); 

in

 .example {background:0 color-stop(50%,#555555), color-stop(100%,#171717));} 

Thanks!

Answer 1

This suggests that it can handle CSS3 http://devilo.us/ . I tried your snippet and it was not too smart regarding the hex code, but at least it is not the hoses of your code.

Answer 2

http://refresh-sf.com/

Once you set it to “CSS” in the drop-down list, this allows you to handle cross-browser CSS gradients just fine, including minimizing hexadecimal values.

He squeezed this (260 characters):

 .example { background:#555555; background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717)); } 

to this (219 characters):

 .example{background:#555;background:-moz-linear-gradient(top,#949494 0,#555 50%,#171717 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#949494),color-stop(50%,#555),color-stop(100%,#171717))} 

Answer 3

Although I'm not really talking here, I highly recommend trying SASS , which does all kinds of compression (without deleting things) and adds all the heavy load to CSS:

 $ sass --watch -t compressed master.scss:master.css 

What will “watch” master.scss for changes, and after making changes while saving the file, CSS will be compressed and saved in master.css .

SASS also adds a lot of cool things to CSS, like variables if / else, reusable blocks of code (like Mixins) and features like lighten(#000, 10%) and darken(#fff, 30%) that can take color and lighten / darken a certain percentage.

Lots of cool stuff, check it out.

Answer 4

You better not format the CSS for reading, and then use the CSS minifier automatically when going into production.

Answer 5

You can also use http://tools.w3clubs.com/cssmin/ , which is a YUI compressor port. In my tests, it worked better than all of the above.