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

Publié par PizzaToy dans php5

Salut,
super Class mais elle a fait son temps. Il faut maintenant passer la version 1.1 de l'API Twitter search et son authentification !

Publié par skud dans java

La methode getTextFile() etant statique, il faut donc l'appeler de maniere statique. Modifier l'exemple de la maniere suivante

System.out.print(HTTPLoader.getTextFile('http://fobec.com/CMS/ind...

Publié par hungerGames dans php5

Salut!
je suis un debutant en php,et lorsque j'ai execute le code
sur la creation de la base 'member',on m'a affiche cet message:
"Undefined class constant 'ATT_ERRMOD...

Publié par Do dans tuto

Et lorsque l'on a un recordset a parcourir ? Que faut-il passer a la vue ? ligne par ligne ou un tableau ? ?
Le PHP est a lui seul deja un systeme de template :
>?php
echo $titre;
?>

Publié par Christophe dans CMS

en remplacant la ligne:
SHGetFileInfo(PChar(ePath.Text + SearchRec.Name), 0, FileInfo, SizeOf(FileInfo), SHGFI_ICON);
par la ligne
SHGetFileInfo(PChar(ePath.Text + Sear...