Le CSS est un des composants de base de toute page web. Il est chargé par la quasi-totalité des visiteurs, et son optimisation peut donc valoir le coup pour les gros sites.

Il est recommandé de limiter le nombre de CSS externes pour décharger serveur mais aussi navigateur, mais on peut faire encore mieux en compressant le CSS. Je ne parlerai pas ici d'envoi gzippé, puisqu'il s'agit d'une solution dépendant du serveur que vous utilisez, mais de réduction réelle du fichier CSS. Celui-ci comporte de fait un certain nombre d'informations inutiles qui peuvent être économisées.
Le petit script de minification CSS et son explication suivent.

Que peut-on supprimer ?

• Les commentaires, bien entendu. Ils sont utiles pour le designer mais présentent peu d'intérêt sur un site en production ;
• les espaces et tabulations ;
• les sauts de ligne ;
• les points-virgule de fin de sélecteur (pour rappel, la norme CSS n'impose pas de placer un ; à la fin de la dernière règle, ce qui permet d'éviter une bonne centaine de caractères) ;
• les couleurs : le système rgb() peut être converti sans perte de données en notation hexadécimale bien plus concise. Petit exemple : rgb(79,129,189) deviendra #4f81bd.
• les couleurs (2) : la notation hexadécimale elle-même peut être compressée. Ainsi, #ffaa22 devient #fa2 : même résultat, trois caractères de moins.

On voit dès lors que si la compression est effective, le fichier CSS résultant est illisible. Pour parer au problème, rien n'empêche de garder un fichier CSS « de développement » et son équivalent automatiquement minifié. C'est le cas sur Omnilogie : un fichier de base, et son équivalent compressé. Mieux : le fichier résultant est en fait la compression de deux CSS en un seul fichier ! Vous noterez cependant que j'ai gardé des sauts de ligne à la fin de chaque sélecteur, pour ne pas créer un monstre illisible…

Sans plus attendre, voici le code :

$buffer = file_get_contents('chemin/vers/css');

//Enlever l'aération du code, les commentaires.
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
$buffer = str_replace(array('{ ',', ',': ','; ','} ',';}','}'), array('{',',',':',';','}','}',"}\n"), $buffer);

//Optimiser les couleurs
function dec2hex($v)
{
	return str_pad(dechex($v),2,' ',STR_PAD_LEFT);
}
function rgbToHex($C)
{
	return '#' . dec2hex($C[1]) . dec2hex($C[2]) . dec2hex($C[3]);
}
$buffer = preg_replace_callback('`rgb\(([0-9]+),([0-9]+),([0-9]+)\)`','rgbToHex',$buffer);//rgb(,,) = #...
$buffer = preg_replace('`#([0-9A-F])\1([0-9A-F])\2([0-9A-F])\3`i','#$1$2$3',$buffer);//#111111 = #111
file_put_contents('chemin/vers/min/css',$buffer);

Et pour ceux qui ne sont pas allés voir les fichiers, un exemple de rendu :

/*----------------------------------------------------------------*/
/*----------------------- 3. page proposition ------------------- */
/*----------------------------------------------------------------*/
#ul_propositions_libres {
position:relative;
}
	#ul_propositions_libres li, #ul_propositions_reservees li {
	border:1px grey solid;
	margin:15px 0 0 0;
	padding:10px 5px;
	}
		#ul_propositions_reservees li {
		min-height:33px;
		}


#ul_propositions_libres li:hover, #ul_propositions_reservees li:hover {
border:1px solid grey;
background-color:#def0ef;
outline: 1px solid #FFFFFF;
}

Qui donne :

#ul_propositions_libres {position:relative}
#ul_propositions_libres li,#ul_propositions_reservees li {border:1px grey solid;margin:15px 0 0 0;padding:10px 5px}
#ul_propositions_reservees li {min-height:33px}
#ul_propositions_libres li:hover,#ul_propositions_reservees li:hover {border:1px solid grey;background-color:#def0ef;outline:1px solid #FFF}

Cette compression CSS n'est pas complexe à mettre en œuvre (on pourrait imaginer bien plus compliqué par analyse sémantique des règles) mais peut valoir le coup sur les fichiers critiques. À vous de voir !