Any Recommendations For a CSS Minifier

Any recommendations for a CSS minifier?

The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.

What are some good css and js minimizers for production code?

YUI Compressor does both JavaScript and CSS. I'm not sure if you can send it a batch of files.

You can batch process at YUI Compressor Online (yui.2clics.net), though that version only accepts JavaScript. Another Online YUI Compressor (refresh-sf.com) accepts CSS, too, but doesn't batch.

In terms of comparing the various minifiers, see jQuery : Frequently Asked Questions (FAQ) : How do I compress my code? Also, check out Microsoft Ajax Minifier.

jQuery has switched from the YUI Compressor to Google's Closure Compiler for the minified version that they distribute.

How can I minify my CSS?

You minimize your CSS using a CSS minifier or compressor. This question has answers that will address that for you:

What are some good css and js minimizers for production code?

As for caching, the smaller the file the better, of course. You can also set your EXPIRES HEADERS that your server sends out. Yahoo has some information here:

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

Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

This can be done using CSSO.

Consider the following input:

input{margin:0}body{margin:0;background:white}

CSSO output:

input,body{margin:0}body{background:#fff}

(exactly what you are looking for)

~~But unfortunately, CSSO optimize this:~~

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

~~To:~~

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

~~However, CSSTidy converts the above to the corresponding shorthand property:~~

.dont-care {
    background:url("images/chart.png") no-repeat;
}

~~Seven~~ Four steps solution for optimizing CSS:

Here is the practice I follow:

Merge CSS files in all.css.
Supply to CSSO input.
Hit Minimize
Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..

But what about old IE hacks?

If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO output:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

~~CSSTidy will ignore asterik(* hack used for IE6), and output:~~

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.

Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

Consider that example:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

and if you'd have <div class="a b"></div> — an element with both
classes, you can't optimize the .b as you write, 'cause it would
override the background-attachment set in .a.

So, no, that's not a safe optimization.

Python script for minifying CSS?

This seemed like a good task for me to get into python, which has been pending for a while. I hereby present my first ever python script:

import sys, re

with open( sys.argv[1] , 'r' ) as f:
    css = f.read()

# remove comments - this will break a lot of hacks :-P
css = re.sub( r'\s*/\*\s*\*/', "$$HACK1$$", css ) # preserve IE<6 comment hack
css = re.sub( r'/\*[\s\S]*?\*/', "", css )
css = css.replace( "$$HACK1$$", '/**/' ) # preserve IE<6 comment hack

# url() doesn't need quotes
css = re.sub( r'url\((["\'])([^)]*)\1\)', r'url(\2)', css )

# spaces may be safely collapsed as generated content will collapse them anyway
css = re.sub( r'\s+', ' ', css )

# shorten collapsable colors: #aabbcc to #abc
css = re.sub( r'#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3(\s|;)', r'#\1\2\3\4', css )

# fragment values can loose zeros
css = re.sub( r':\s*0(\.\d+([cm]m|e[mx]|in|p[ctx]))\s*;', r':\1;', css )

for rule in re.findall( r'([^{]+){([^}]*)}', css ):

    # we don't need spaces around operators
    selectors = [re.sub( r'(?<=[\[\(>+=])\s+|\s+(?=[=~^$*|>+\]\)])', r'', selector.strip() ) for selector in rule[0].split( ',' )]

    # order is important, but we still want to discard repetitions
    properties = {}
    porder = []
    for prop in re.findall( '(.*?):(.*?)(;|$)', rule[1] ):
        key = prop[0].strip().lower()
        if key not in porder: porder.append( key )
        properties[ key ] = prop[1].strip()

    # output rule if it contains any declarations
    if properties:
        print "%s{%s}" % ( ','.join( selectors ), ''.join(['%s:%s;' % (key, properties[key]) for key in porder])[:-1] )

I believe this to work, and output it tests fine on recent Safari, Opera, and Firefox. It will break CSS hacks other than the underscore & /**/ hacks! Do not use a minifier if you have a lot of hacks going on (or put them in a separate file).

Any tips on my python appreciated. Please be gentle though, it's my first time. :-)

Any Recommendations For a CSS Minifier