Optimiser et compresser des feuilles de style CSS


CSS
CSSTidy est un optimisateur de feuilles de style CSS. Celui-ci s'utilise en ligne de commande sous Linux et permet de réduire la taille d'une feuille de style CSS selon différents critères, afin de rendre l'affichage d'un site web plus performant.

1. Optimisation

Pour installer CSSTidy, ouvrez un terminal en root et lancez la commande suivante pour une distribution à base de rpm :

yum install csstidy

Ou celle-ci pour une distribution à base de Debian :

apt-get install csstidy

Vous pourrez ensuite lancer la commande csstidy sans aucun paramètre afin de voir les options proposées. Voici quelques exemples d'optimisation possibles :

  • compress_colors : utilise des codes de couleur hexadécimal, la propriété black devient #000 par exemple
  • discard_invalid_properties : supprime toutes les lignes invalides. Cette option est assez dangereuse car on n'est jamais à l'abri d'une faute de frappe (widht au lieu de width)
  • lowercase_s : change tous les sélecteurs en minuscule
  • preserve_css : supprime tous les commentaires si l'on utilise l'option false
  • remove_last_; : supprime le dernier ; de chaque section

Pour ceux qui ne veulent pas choisir d'options spécifiques, il faut savoir que CSSTidy embarque des templates capables de faire de l'optimisation automatique selon plusieurs niveaux (low, high, highest). Voici un exemple d'utilisation :

csstidy style.css --template=high style.css.out
...
Selectors: 63 | Properties: 198
Input size: 6.24KiB Output size: 3.728KiB Compression ratio: 40.27%

Si l'on compare le nombre de lignes entre les deux fichiers :

cat style.css | wc -l
368
cat style.css.out | wc -l
51

La différence avant et après compression est donc souvent très visible. Il faudra tout même revérifier sa feuille de style afin d'être sûr que le programme n'a pas commis d'erreurs ou supprimé des options importantes.

2. Compression et décompression d'une feuille de style

Si l'on souhaite ensuite compresser une feuille de style en une seule ligne, on pourra utiliser la commande suivante :

cat style.css | tr -d "\n" > compress.css

Et celle-ci pour revenir à un format lisible :

cat compress.css | awk '{gsub(/{|}|;/,"&\n"); print}' > uncompressed.css


3 Commentaires pour "Optimiser et compresser des feuilles de style CSS"

Flux des commentaires de cet article Ajouter un commentaire
  •  

    Moi jusque là j'utilisais le service CleanCSS! http://www.cleancss.com/ il permet de faire les mêmes choses, mais bon avoir ça sur son propre pc c'est plus intéressant.
    merci ;)

    RépondreRépondre
    inalgnu , le 3 juin 2009 à 21:19
  •  

    Mais bon avoir ça sur son propre pc c'est plus intéressant.

    RépondreRépondre
    moncler , le 26 août 2010 à 05:23
  •  

    Compass!!!!

    La seule alternative qui s'occupe de tout en tache de fond et rend la problématique de l'optimisation CSS complètement obsolète. :)

    RépondreRépondre
    Fabien , le 12 juin 2011 à 00:32
 

Ajouter un commentaire

actualité android apache apple astuce astuces bash bilboblog blog boot chrome clavier commande commandes conky date debian Desktop développement elementary exploit faille fedora firefox flash gimp gnome google graphique Graphisme hack hacking Hardware humour intel internet iphone jailbreak Jeux Kde kernel libre Linux log logiciels Logiciels Libres lucid lynx maemo mail maquette metasploit microsoft mobile mockup monitoring mozilla multi-touch musique mysql n900 nautilus nokia noyau openoffice open source password photos php Planet publicité redhat red hat rpm réseau screenshot script serveur serveurs shell sql ssh statistiques sysadmin system Sécurité thème tux-planet tv twitter ubuntu unity vidéo vidéos vlc voyage wallpaper windows wordpress yum