Pourquoi réduire la taille des feuilles de style ?
Accélérer le temps de chargement de la page !
En effet, une feuille de style qui a été minifiée contient uniquement les éléments CSS indispensables. La suppression des commentaires, des espaces et des sauts à ligne permet de réduire la taille de la feuille de style, réduisant par la même le temps de chargement.
Class PHP CssFileMinifier
A partir d'un fichier css ou d'un code css, la class CssFileMinifier optimise les éléments suivants:- suppression des commentaires, des sauts à la ligne et les double-espaces,
- suppression du séparateur ';' en fin de déclaration,
- insertion d'un saut à la ligne à chaque définition de style pour facilité la lecture.
<?php
/******************************************************************************
* Nettoyer une feuille de style
* @copyright Fobec 2011
******************************************************************************/
class CssFileMinifier {
/**
* Minifier une feuille de style à partir d'un fichier
* @param string $infile nom du fichier source
* @param string $outfile nom du fichier destination
* @param boolean $linebreak insérer saut à la ligne
* @return fichier css minifiée
*/
static public function fileclean($infile, $outfile,$linebreak=false) {
$buf=file_get_contents($infile);
$buf=self::minify($buf,$linebreak);
$fp=fopen($outfile, "w");
if ($fp) {
fwrite($fp, $buf);
fclose($fp);
}
}
/**
* Minifier une feuille de style à partir d'un texte
* @param string $text source la feuille de style
* @param boolean $linebreak insérer saut à la ligne
* @return source css minifiée
*/
static function textclean($text,$linebreak=false) {
return self::minify($text,$linebreak);
}
/**
* Minifier une feuille de style
* @param string $css source css à minifier
* @return source css minifiée
*/
static private function minify($css,$linebreak) {
//supprimer les commentaires
$buffer = preg_replace('!/*[^*]** ([^/][^*]** )*/!', '', $css);
//supprimer les retours chariots et les tab
$buffer = str_replace(array("rn", "r", "n", "t"), '', $buffer);
//supprimer les espaces
$buffer = str_replace(' ', '', $buffer);
//supprimer les liaisons en fin de ligne
$buffer = str_replace(';}', '}', $buffer);
//insérer un saut de ligne à chaque element de style
if ($linebreak==true) {
$buffer = str_replace("}","}n",$buffer);
}
return $buffer;
}
}
?>
Exemple de feuille de style minifiée
Prenons la définition de style suivante/*
Document : style.css
Created on : 13 mai 2011, 11:47:09
*/
a { text-decoration: none;}
/*toute la page*/
body {margin:0;margin-left:auto;
margin-right:auto; background:#FFFFFF;}
div.top {height:60px ; background:#70CF00;}
/*mettre en gris les titres*/
span { color: #666666 ;}
Minifier le code css avec la class PHP CssFileMinifier
<?php
require_once 'CssFileMinifier.php';
echo CssFileMinifier::textclean($css, true);
?>
Résultat du nettoyage
La taille de la feuille de style est réduite de 53 % passant de 305 à 163 octets.
a { text-decoration: none}
body {margin:0;margin-left:auto; margin-right:auto;background:#FFFFFF}
div.top {height:60px ;background:#70CF00}
span {color: #666666}
