5

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!

jigglyT101
  • 984
  • 1
  • 15
  • 33

5 Answers5

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.

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • 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
3

refresh-sf.com no longer works and has not been updated since 2016. Under the hood, it used clean-css v3.4.12 for the CSS minimising. The clean-css project has its own online GUI, and is still being updated – with version 5.3.2 as of 2023-01-19.

https://clean-css.github.io/

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))}
lukescammell
  • 150
  • 10
0

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.

Dana Woodman
  • 4,148
  • 1
  • 38
  • 35
0

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

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984
-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.

Adam Youngers
  • 6,421
  • 7
  • 38
  • 50
  • This no longer works in modern browsers and results in zero output, clean-css is still being updated and works https://clean-css.github.io/ – lukescammell Jul 17 '23 at 13:57