Does your module minify CSS before compress them ?

Comments

mikeytown2’s picture

mikeytown2 commented

Core does that already

heyyo’s picture

heyyo commented

Didn't konw, I thought it was only agreggator and compressor.
thanks

mikeytown2’s picture

mikeytown2 commented

CSS is not programming language like javascript, so minifying it like javascript is not possible. But as you know, CSS is white space compressed and aggregated by core. Doing a quick google search for http://lmgtfy.com/?q=minify+CSS it seems like they are talking about white space compression & comment removal. Please give me a link explaining what your thinking if minifying CSS is more then this.

heyyo’s picture

heyyo commented

It's also possible to minify CSS, it removes comments & whitespace, but does really more. Have a look to :

http://csstidy.sourceforge.net/

http://developer.yahoo.com/performance/rules.html#minify

http://code.google.com/p/minify/

http://code.google.com/p/minify/source/browse/trunk/min/lib/Minify/CSS.php

Regards

mikeytown2’s picture

mikeytown2 commented
Status: Active » Postponed (maintainer needs more info)

CSS Tidy is the only project that looks interesting; it does CSS rule compression
a{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;}
a{margin:10px;}
If you can prove to me that you can get an improvement of over 1k by using these tools I will strongly consider using a toolkit (pre gzip size).

Way to test:
Optimize CSS files: Enabled
Grab the css file that drupal makes inside the sites/all/files/css directory.
Throw it at the tools.
Compare size (uncompressed).

Marking this postponed until I get some benchmarks back.

heyyo’s picture

heyyo commented

I tried csstidy. Here my results:

Optimize CSS files: Enabled
Gzip CSS: disabled

I used the css from my test website:
http://test.hsh.co.il/sites/test.hsh.co.il/files/css/css_58ffed064f11854...

Original size :33,123 bytes (in Windows after FTP download)
Compressed by csstidy: 31,045 bytes

Options I used:
csstidy.exe css.css --remove_last_;=true --case_properties=2 --optimise_shorthands=2 --lowercase_s=true css_min.css

So allmost 2KB :-)

But I did more...

Csstidy adds new lines for better readiblity (maybe there is an option to disable it, but I didn't find the option)

I found an online YUICompressor's CSS minifier in Javascript :-)
http://www.phpied.com/cssmin-js/
http://tools.w3clubs.com/cssmin/

So I compress the result of csstidy with YUICompressor(cssmin):
Original size :31,045 bytes (after csstidy)
Compressed by cssmin: 29133 (93.84%)

So allmost 4KB :-). Exactly 12% less...

PS: the minification with YUICompressor of the original drupal optimized CSS compresses less than 1%.

heyyo’s picture

heyyo commented

I found an online tool ofr csstidy 1.3

In this online tool we have more options to compress.
http://geeklord.com/tools/csstidy/optimize.htm

Here new results only with CSStidy 1.3:
Input: 33.462KB, Output:28.787KB, Compression Ratio: 14% (-4675 Bytes)

template: highest
Options

NO Preserve CSS
NO Sort Selectors (caution)
NO Sort Properties
YES Regroup selectors : Merge selectors with same attributes
YES Optimise shorthands : ALL
YES Compress colors
YES Compress font-weight
YES Lowercase selectors

Case for properties: Lowercase
YES Remove unnecessary backslashes
YES Remove last ;
NO Discard invalid properties
NO Add timestamp ???

Sad that this project has been discontinued by the author...

mikeytown2’s picture

mikeytown2 commented
Status: Postponed (maintainer needs more info) » Active

Sweet, you proved your point. I'll be working on this soon.

mikeytown2’s picture

mikeytown2 commented
Project: CSS Gzip » CSS Preprocessor
Version: 6.x-1.x-dev »

New project got launched that might be a better place for this; if not I'll take this back... I'm also willing to merge the 2 projects together if wanted.

heyyo’s picture

heyyo commented

nice to see that you work on it.hope to see a first release soon.

philbar’s picture

philbar commented

See: http://drupal.org/project/csstidy