Voici une méthode permettant de compresser des CSS, que j’utilise depuis quelques mois. Elle répond à plusieurs impératifs :

  • Réduire le nombre de CSS chargés au minimum, pour économiser les requêtes HTTP.
  • Permettre de créer des fichiers CSS à la volée, sans code php à l’interieur, et de les diviser le plus possible.
  • Compresser le résultat.
  • Mettre en cache la version compressée, qui sera servie au visiteur.

Cette méthode est grandement inspirée de l’article sur la compression des CSS chez CatsWhoCode, que j’ai décortiqué pendant un bout de temps 🙂

On fera donc appel à ces fichiers :

  • style.php : appelé pour créer la page, mais qui transmet également les instructions CSS.
  • style-min.css : Le CSS final, appelé par la version du site.
  • style/ : Le sous dossier contenant tous vos CSS.

Les éventuelles images devront être dans le même répertoire que style.php.

Voici donc le code commenté de style.php :

On déclare le contenu comme étant du CSS, pour être sûr de son interpretation.

<?php
header("Content-type: text/css");

Ensuite, il faut inclure les CSS, que l’on va trier dans l’ordre alphabétique, pour permettre d’éventuels hacks, et surtout une idée de l’ordre des instructions.

// On cree une variable de retour pour contenir le CSS.
$retour_css = '';
 
// On parcourt le sous-dossier style/
$dir = opendir("style/");
$fichiers = array();
// On ajoute chaque fichier à un tableau 'fichiers'
while($fichier = readdir($dir))
	{if($fichier!="." && $fichier!="..") $fichiers[] = 'style/'.$fichier;}
closedir($dir);
 
// Tri par ordre alphabetique des fichiers
asort($fichiers);
 
// inclusion des fichiers ... dans l'ordre
foreach($fichiers as $fichier)
	$retour_css .= file_get_contents($fichier);

La fonction compress() va agir sur plusieurs points :

  • Retirer les caractères « inutiles », comme les commentaires, tabulations, et transformer les espaces multiples en espaces simples, etc.
  • Permettre la mise en place d’un léger système de variables. Utile si vous avez beaucoup de fichiers 🙂
function compress($buffer) {
$variables_css = array(
	'COULEUR1'=>'#003366',
	'COULEUR2'=>'#336699',
	'FONT1'=>'Georgia, serif'
	);
// On remplace les variables par leur valeur
foreach($variables_css as $code_variable => $valeur)
	$buffer = str_replace('{'.$code_variable.'}', $valeur, $buffer);
 
	// Suppression des commentaires
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
	// Suppression des tabulations, espaces multiples, retours à la ligne, etc.
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '	 ', '	 '), '', $buffer);
 
// Suppression des derniers espaces inutiles
	$buffer = str_replace(array(' { ',' {','{ '), '{', $buffer);
	$buffer = str_replace(array(' } ',' }','} '), '}', $buffer);
	$buffer = str_replace(array(' : ',' :',': '), ':', $buffer);
 
	return $buffer;
}
 
// Compression du CSS
$retour_css = compress($retour_css);

Enfin, nous allons mettre en cache le contenu de la variable $retour_css, et l’afficher, pour les tests.

// Mise en cache du fichier style-min.css
file_put_contents('style-min.css',$retour_css);
// On affiche le contenu compressé
echo $retour_css;

Vous pouvez créer autant de fichiers CSS que vous le désirez dans le sous-dossier style/, afin de séparer couleurs, tailles, réglages de base, Reset CSS et autres grilles.

Vous m’avez lu jusqu’ici ? Woah 🙂 Apprenez donc que ce code est sous licence WTFPL, qu’un lien vers cet article sera accueilli avec grand bonheur, et qu’un commentaire constructif le sera également 🙂

Tags : , , ,