Online CSS Optimizer That Can Handle CSS3 Gradients

Question

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

I've tried using http://www.cleancss.com/ but converts something like this cross browser style :

.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));

into:

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

Thanks!

score 4 · Accepted Answer · answered Apr 05 '11 at 23:34

4

This one says it can handle CSS3 http://devilo.us/. I tried your snippet and it wasn't too smart about the hex, but at least it doesn't hose your code.

answered Apr 05 '11 at 23:34

methodofaction

68,083
21
145
162

Hey nice find! Works a treat - apart from it not compressing the hex colours but I can live with that. Thanks! – jigglyT101 Apr 06 '11 at 00:53
2

-1 This is actually an extremely bad tool. It converts `background-repeat:no-repeat;background-position:50% 50%;` to `background:no-repeat;background:50% 50%;`. Do NOT use this tool. Check [@lukescammell's answer](http://stackoverflow.com/a/5567966/1029952). (http://refresh-sf.com/yui/) – Pierre Jan 26 '12 at 10:46
-1 agreed @Pierre I just tried this to compress `.example{background-repeat:no-repeat;background-position:50% 50%;}` and it output `.example{background:no-repeat 50% 50%}`. This is terrible! The YUI compressor is smart enough to know that it cannot be safely compressed any further and doesn’t. – lukescammell Jan 31 '17 at 10:29

lukescammell · Answer 2 · 2017-01-31T10:25:06.803

http://refresh-sf.com/

Once you set it to "CSS" in the dropdown, this handles cross-browser CSS gradients just fine, including minimising the hex values.

It compressed 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))}

score 0 · Answer 3 · answered Apr 05 '11 at 23:39

Though not particularly on point here, I would highly recommend trying out SASS which does all sorts of compression (without removing things) and adds a whole crap load of cool things to CSS:

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

Which will "watch" master.scss for changes and once a change has been made via saving the file, the CSS will be compressed and saved to master.css.

SASS also adds a lot of cool things to CSS like variables, if/else statments, reusable code blocks (e.g. Mixins), and functions like lighten(#000, 10%) and darken(#fff, 30%) which can take a color and lighten/darken it a specific percentage.

Lots of cool stuff, check it out.

score 0 · Answer 4 · edited May 23 '17 at 11:53

0

You are better off formatting the CSS to be readable yourself, and then using a CSS minifier automatically when moving to production.

edited May 23 '17 at 11:53

Community

1
1

answered Apr 05 '11 at 23:39

alex

460,746
196
858
974

score -1 · Answer 5 · answered Jun 29 '11 at 23:54

-1

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

answered Jun 29 '11 at 23:54

Adam Youngers

5,795
6
34
47

Online CSS Optimizer That Can Handle CSS3 Gradients

5 Answers5