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

Publié par Fobec dans logiciel

L'api ip to RIR est compatible avec les adresses IP au format ipV6

Publié par nicolasterraes dans tuto

bonjour,
je ne comprends pas cette tape:

Les liens vers les feuilles de style et les fichier js sont declares dans les pages HTML. Modifiez les balises meta ainsi:
Feuille de style:
d...

Publié par IB dans tuto

Merci ca marche bien.

Publié par math dans java

Salut, quelle est la modification a faire pour pouvoir utiliser une webcam usb qui n'est pas une logitech?

Publié par hilflo dans tuto

Pour Romaingineer, essaye d'aller voir dans le fichier functions.php dans ton theme, tu dois avoir des functions wp_enqueue_style ou wp_enqueue_script, c'est la que tu pourras faire des modifs