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 4826 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 263 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Ludwig dans tuto

Bonjour,
Il me semble que les plugins de gestion d'images sont payants pour TinyMCE et CKeditor, est-ce toujours le cas ?
Il manque amha l'excellent Xinha dans cette liste, qui lui est Open Sour...

Publié par Kal747 dans php5

Merci pour l'info !

Publié par options binaires dans php5

genial l'outil ! merci

Publié par Pierrot dans CMS

Je présume que c'est plutot application.terminate;, le clavier à fourcher, ça m'arrive souvent.
@+

Publié par fobec dans logiciel

MAJ: migration vers GoogleMap V3 de la carte