Publié le 30/05/2011
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
0 commentaires

Minifier une feuille de style ou un code css

Minifier une feuille de style consiste à supprimer les éléments inutiles dans le code css. Ce nettoyage peut être réalisé en PHP en utilisant des expressions régulières et en remplacant certains caractères.

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}

Faut-il minifier ses feuilles de style ?

Les moteurs de recherche semble évaluer et noter la vitesse de chargement d'un site internet. Minifier son code css contribue à réduire la taille des fichiers. La méthode peut être poussée plus loin en combinant les feuilles de style 'à la volée' et en compressant les données avec gzip.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
30/05/2011
Visualisation
vu 4073 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Patrice dans CMS

Concernant la commande ShellExecute :

Si vous voulez lancer un programme dont le nom est contenu dans une propriété text,
caption, items bref d\'un string ... n'oubliez pas de transfor...

Publié par Tom dans java

Hello!
Cependant, mon Eclipse ne reconnait pas HttpLoader comme type valide...
Comment faire pour que ca marc...

Publié par hilflo dans tuto

Tres bon article qui montre bien les subtilites des mutualises de 1and1.
Je l'ai utilise pour un de mes sites en y ajoutant de l'url rewriting pour eviter d'avoir des parametres dans l'url avec cet...

Publié par chuchunain dans tuto

Petite correction dans votre code. Le premier graphe genere avec 15 valeurs aleatoires devrait faire appel au graphe "myGraph" et non "graph" sinon l'objet canvas ne recoit rien. m...

Publié par jerome dans php5

Excellente classe, merci pour ce petit code qui va me permettre de me passer de ma page igoogle qui ferme vendredi