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

Publié par fffffff dans php5

comment est-ce que les joueurs s'inscrivent, utilisez-vous PHP ?

Publié par MeepMeep dans tuto

Attention, un petit correctif a apporter :
headerContent-type: $header_contenttype charset: UTF-8
Remplacer charset: UTF-8 par charsetUTF-8
La difference est subtile mais susceptible d'etre m...

Publié par robbie dans tuto

desole pour le message en multiple j'ai eu un ptit beug

Publié par Laurent dans java

Merci :)
Teste sous Linux CentOS, fonctionne mais ne recouvre pas la barre des taches.

Publié par maaaher dans CMS

c'est un travail sup....