Comments on: YUI CSS Min – part 2

By: Mathias

Mathias — Wed, 20 Oct 2010 12:38:12 +0000

Here’s another possible optimization: .test[foo='bar'] { color: red; } Compressed: .test[foo='bar']{color:red} Could be: .test[foo=bar]{color:red} Of course, YUI compressor should only remove the quotes around the attribute value in cases where it’s allowed — e.g. if you have something like a[href$='.pdf'] { color: red; }, removing the quotes would make the CSS invalid (and it wouldn’t work in all browsers anymore).

By: Stoyan

Stoyan — Fri, 28 May 2010 15:11:54 +0000

Excellent, thanks Matthias!

By: Mathias

Mathias — Fri, 28 May 2010 12:56:40 +0000

Some additional optimizations: .test { border:none; } Compressed: .test{border:none} Could be: .test{border:0} The same goes for other CSS properties that have a none value but can also take numeric values.

By: Stoyan

Stoyan — Thu, 27 May 2010 19:40:58 +0000

Thanks Emil, this is good stuff! I believe someone even committed a patch for shorthands.

Definitely going in the next release

By: Emil

Emil — Thu, 27 May 2010 08:26:18 +0000

I noticed few areas that could be improved. All the tests are based on http://tools.w3clubs.com/cssmin/

Original:
.test1 {
margin: 10px 15px 8px 15px;
}

.test2 {
margin: 10px 15px 10px 15px;
}

Compressed:
.test1{margin:10px 15px 8px 15px}.test2{margin:10px 15px 10px 15px}

Could be:
.test1{margin:10px 15px 8px}.test2{margin:10px 15px}

It seems that margin:{x x x x} also does not become margin{x}

By: Stoyan

Stoyan — Fri, 21 May 2010 21:10:35 +0000

Sunnybear, that’s cool, I thought CSSTidy was no longer being developed, happy to see the project is alive and kicking. Yes, I was using the PHP version for testing.

By: sunnybear

sunnybear — Fri, 21 May 2010 08:35:19 +0000

@Stoyan: not sure what version of CSS Tidy was used – because there has ben made some improvements, but we still can’t sync C-branch with PHP-branch to release 1.3
CSS Tidy also can merge selectors and sort (yeah!) properties and selectors in alphabetic order.

By: NICCAI

NICCAI — Fri, 21 May 2010 06:59:31 +0000

When evaluating CSS, I come across a lot of developers that default to color names. It would be nice to regex out at least common values like black and white to #000 and #fff.

By: Arnout

Arnout — Fri, 21 May 2010 06:43:20 +0000

The only issue I once had with charsets is that Safari doesn’t like @charset “utf-8″;rule{here:0px} It needs a space behind the charset ; or it will ignore the complete stylesheet.

So you might want to double check that if you are using charsets inside your stylesheets.

By: Stoyan

Stoyan — Fri, 21 May 2010 05:12:21 +0000

yes, I think CSS tidy is the most advanced, it parses the CSS, while YUI’s css min is a bunch of regexp. I’ve compared some here:
http://www.phpied.com/reducing-tpayload/
YUI CSS min is a little better now than these measurements but just with about 2%

For background and font you mean using shorthands, right?

Sorry for the spam thingie, it’s just some plugin I installed.