I have been looking for a reliable css minifier that doesn’t require command line to run. Something similar to Google closure compiler where you can input multiple JavaScript files and minify them into a single file. So far I have found this from this thread.
I fed it a few css files and found that one of the images referenced in one of the css files was mangled in the minified file.
background-image: url('/abc/img.png')
and it was converted to
background-image: url(http://mydomain.com/'abc/img.png')
which doesn’t look right. Oddly enough if only a single file with above code is fed the outcome is correct. Also, if I change background-image to background, again the outcome is correct. So I am a little confused as what the problem is:
1 – Is it legal CSS to omit background-position when background-image is used?
2 – Are there any alternatives to this tool (accept multiple css files to minify and doesn’t require to be run as command).
Any other suggestions and insight is much appreciated.
The
backgroundshorthand can be safely used with only the color or only the image portion. I’ve been doing it this way since 2000~ because I’m lazy and never seen a problem. Of course, you could have tried asking the CSS validator to see if it was valid or not (see: http://jigsaw.w3.org/css-validator/).Personally, I let Sass take care of my minification needs since I’m already using it for its other features. I haven’t paid too much attention to how well it crushes the generated file, but all whitespace and comments are removed in its most compact mode and colors are compressed to their 6 or 3 digit hex values.