Web developers: CSS minifier & alphabetiser

Started by bvanoudtshoorn, August 27, 2009, 22:52:48

Previous topic - Next topic

bvanoudtshoorn

http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/

Yesterday, I wrote a little Java app that will not only minify your CSS, but also optimise it for gzip compression, saving you even more bandwidth.

A 78.2KB CSS file, which normally gzips down to 13.2KB now gzips down to just 11.5KB after being run through this app -- that's nearly 13% smaller. Check out the blog post linked above for more details and to download.

Oh, and it's released under the MPL, which should make most people happy. :)

LPChip

"Heh, maybe I should've joined the compo only because it would've meant I wouldn't have had to worry about a damn EQ or compressor for a change. " - Atlantis
"yes.. I think in this case it was wishful thinking: MPT is makng my life hard so it must be wrong" - Rewbs

Rakib

^^

Saga Musix

Some suggestions, if you're still working on it:
- Add an option to "approximate colours", i.e. to not only convert #112233 to #123, but also f.e. #112434 to #123.
- Convert rgba(100%,50%,100%,0.3) to rgba(255,128,255,0.3)

BTW, Something you might not be aware about and I haven't actually tried it, but anyway...
Have a look at those lines:
border-left:3px solid #bbb;
border-color:rgba(255,255,255,0.8);

Browsers that don't know the rgba() macro will simply use #bbb as border colour (CSS forward compatibility), whereas more advanced CSS3 browsers will display a border with alpha channel (second line overrides #bbb in that case).
However, when ordering attributes alphabetically, this would not work anymore, because it would be #bbb for all browsers then.
» No support, bug reports, feature requests via private messages - they will not be answered. Use the forums and the issue tracker so that everyone can benefit from your post.

bvanoudtshoorn

You're right Jojo, that particular snippet would stop working. :/ As a workaround, though, this should remain untouched:
border: 3px solid #bbb;
border: 3px solid rgba(255,255,255,0.8);

The sort it does *should* be stable, and it's only sorted by the property name, not its value, so those two should stay in order. Not ideal, I know. :/

I'm "kinda" still developing it. :) I've put it up on GitHub [http://github.com/barryvan/CSSMin/], and we're using it at work in production, so I update it as we need to. ;) If I get a chance, I do like your suggestions -- particularly the approximation of colours. There'd have to be some sort of "don't approximate this value" flag, though, perhaps as a special comment or something.

Because it's on GitHub, anyone who wants to can hack away at it -- it's also released under the MPL, so *anyone* who wants to can do *anything* they want with it, essentially. :)