A noter

C'est le 782e jour depuis le début de cette aventure !

Comment optimiser ses feuilles de styles CSS

Publié le 05 jan 07 à 08:01 | Catégorie : Développement Web | 19 commentaires

Dans tous les langages de programmation, il existe aujourd’hui des outils pour formater son code suivant une convention bien précise. Le but est bien évidemment de produire un code plus lisible et plus facile à maintenir. C’est également un bon moyen de faciliter la communication entre plusieurs développeurs (en établissant un standard), même si il n’est pas toujours évident de mettre au point un format qui plaise à tout le monde.

Le développement de fichiers CSS n’échappe pas à cette pratique, mais leurs spécificités font qu’il peut être intéressant de les optimiser aussi. En effet, ces fichiers sont à la fois du code source et une ressource utilisable telle quelle (il n’y a aucun processus de compilation pour générer des fichiers exécutables par exemple).

Si vous développer un site Internet en utilisant correctement les feuilles de styles (c’est-à-dire en faisant en sorte de bien séparer le code de la présentation) vous devez sûrement avoir des fichiers CSS plutôt conséquents (sauf si le design de votre site est du type craigslist). Heureusement, voici deux services web qui vont vous permettre de nettoyer et de réduire la taille de ces fichiers en optimisant certaines instructions.

Ces deux outils fonctionnent sur le même principe. Ils vont analyser la feuille de styles que vous allez leur soumettre et l’optimiser en :

  1. Factorisant certains attributs (c’est-à-dire en utilisant leur forme raccourcie) des polices de caractères, bordures, images de fond, …
  2. Regroupant les sélecteurs lorsque cela est possible
  3. Supprimant les unités des valeurs de certains attributs lorsqu’elles sont nulles
  4. Et en enlevant les commentaires et espaces afin de réduire au maximum la taille du fichier

CSS Tweak CSS Tweak a une interface très claire. Très simple d’utilisation (il n’y a qu’une dizaine d’options en tout), il a pu réduire la feuille de styles de ce blog de 37% :

CSS Tweak

Clean CSS Clean CSS est beaucoup plus fourni en options. Il ne permet pas de charger un fichier depuis son disque dur. En revanche, il est possible de le faire depuis une URL. Clean CSS s’est montré plus performant que CSS Tweak en réduisant de 41% la taille de mon fichier de test en mode standard. Il a réduit de presque 45% ce même fichier dans le mode le plus agressif (sans aucun formatage, tout le code tient alors sur une seule ligne) pour le passer de 46Ko à 25.5Ko :

Clean CSS

Il peut même vous signaler des choses qui ne vont pas comme par exemple une règle CSS non supportée.

Ces deux services web servent surtout à optimiser les fichiers CSS juste avant de les mettre en ligne. En effet, si on active toutes les options et particulièrement celles qui supprime les espaces et les commentaires, on se retrouve avec une feuille de styles tout à fait fonctionnelle mais complètement illisible !

Néanmoins, il est quand même possible de formater son code avec Clean CSS. Comme il est basé sur CSSTidy, un parser de fichiers CSS open source, il est possible de mettre au point ses propres règles de formatage.

Je me demande d’ailleurs si il n’existe le même genre de services pour les fichiers Javascript ?

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 28 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

18 commentaires à propos de “Comment optimiser ses feuilles de styles CSS” :

  1. “pour le passer de 46Ko à 25.5Ko” - 46Kos ton CSS? Aaarrgllllll!!!

    Aymeric Jacquet le 5 janvier 2007 à 10:56 (#1)

  2. Oui ! Je reconnais que ce n’est pas ce que j’ai fait de mieux. Evidemment, je ne suis pas adepte des raccourcis, donc ça fait vite grimper la taille de la feuille de styles. Peut-être que je les remettrais d’équerre lors de la prochaine mise à jour de ce blog. Par contre ça fait un très bon exemple pour cet article !

    Stéphane le 5 janvier 2007 à 12:06 (#2)

  3. Je ne connaissais pas ce genre d’outil, vraiement très utile je trouve ! Ca existe version PHP ?
    Merci Stéph. :-)

    Chris le 5 janvier 2007 à 14:17 (#3)

  4. Oui il existe le même genre d’outil pour JavaScript, très utile quand on utilise le combo prototype + scipt.aculo.us qui a tendance à être bien glouton : JSMin (http://javascript.crockford.com/jsmin.html).

    Sinon pour ma part pour éviter la tendance à l’obésité du CSS j’ai pris l’habitude d’avoir un fichier qui contient tout ce qui est commun à toutes les pages, et de petits fichiers qui complètent ici et là suivant la demande. Ca paraît être un luxe mais en fin de compte si on organise les choses “par thème” on se rend compte qu’on s’y retrouve bien.

    Brice le 5 janvier 2007 à 16:39 (#4)

  5. Salut Stephane! Je ne comprends rin a ce qui est ecrit mais je fait partie e ta famille donc je l’ai visite le site web! Tres sympa d’ailleurs!

    Melina le 5 janvier 2007 à 18:44 (#5)

  6. Merci Mélina ;)

    Stéphane le 5 janvier 2007 à 19:03 (#6)

  7. A propos de minimisation de fichier source Javascript, il y a aussi l’outil tres bien fait de Jack Slocum (l’auteur de l’extension YUI-EXT pour la lib JS de Yahoo).
    Son tool est fait uniquement pour ca et est donc tres minimaliste, simple et intuitif. Il est peut etre encore legerement instable mais ca ne devrait pas durer longtemps connaissant la productivite de ce mec.
    Vous pouvez le trouver sur son blog dans la section download (cherchez JS Builder).
    Je ne connaissais pas ces 2 sites pour minimisation de CSS par contre, tres uile. Merci Stephane. Bonne continuation pour ce blog qui commence a etre une tres bonne source d’information. En tout cas merci pour la qualite des articles et l’ecriture parfaite.
    Patrick

    Patrick le 8 janvier 2007 à 08:56 (#7)

  8. Chris, jettes donc un coup d’oeil à CSSTidy, il y a une version Php de disponible.

    Merci pour vos liens Brice et Patrick ! J’ai noté les adresses de JSMin et JS Builder et je les testerai sûrement lors de la prochaine mise à jour de ce blog.

    Stéphane le 8 janvier 2007 à 13:45 (#8)

  9. Salut Stéph.,
    Je parlais d’une version qui corrige le code PHP, et non d’une version PHP d’un cleaner CSS :-)
    Je suis confus !
    Désolé de mon imprécision et merci quand même :-)
    ++
    Badoux

    votre nom le 8 janvier 2007 à 14:02 (#9)

  10. Ok Chris, on s’est mal compris. Par contre si tu trouves cet outil de formatage de code Php, je suis preneur. Celui intégré à Eclipse pour Java fonctionne plutôt bien, mais je n’ai pas encore trouvé d’équivalent pour Php.

    Stéphane le 8 janvier 2007 à 14:27 (#10)

  11. Ok :-) Pas de problème, si je trouve je t’appelle promis !
    Tu utilise Eclipse ? Je l’avais essayé une fois, je vais peut-être mis remettre :-)
    Je voudrai trouver de la doc dessus, mais en français, tu aurai ça en stock !?

    Badoux le 8 janvier 2007 à 14:39 (#11)

  12. Merci pour ce trés bon tutorial, ca serait sympa que tu le soumette dans http://tutmarks.com :)

    benm le 9 janvier 2007 à 10:26 (#12)

  13. Je connais bien Eclipse Chris, mais seulement dans le cadre du développement d’applications Java/J2EE. J’ai essayé les différents plugins Php existants pour cette environnement de développement, mais je n’ai pas retrouvé ce qui fait le charme d’Eclipse version Java. Donc actuellement je travaille avec Aptana. Désolé, je ne connais pas de documentation en français.

    Ca y est benm, j’ai soumis cet article à Tutmarks. Il est disponible ici.

    Stéphane le 9 janvier 2007 à 14:38 (#13)

  14. Ok, merci Stéphane.
    Je vais essayer cette plateforme “Aptana”, qui me semble très bien ! Elle dispose a se que l’on voit sur le printscreen des librairies les plus convoité du net comme: script.aculo.us, Dojo, Rico Yahoo UI,… Tout ceci malheureusement en anglais, encore et toujours :-)

    P.S. : Je vais bientôt acheter un CD-ROM d’apprentissage pour travailler a nouveau la langue de shakespear :-)

    Badoux le 9 janvier 2007 à 14:55 (#14)

  15. Une remarque en plein dans ce sujet… Une partie des liens de ce blog (p. exemple les nom en face des n°d’intervention) sont souslignés par de petits points. Avec Firefox 1.5.0.9, voici le phénomène: en approchant lentement la flèche, elle se transforme en main pour suivre le lien et revient à la flèche dans une boucle sans fin rapide, qui consomme 80% du temps CPU!
    Bug typique CSS, me semble-t-il.
    Homris ce léger inconvénient, féicitation pour l’ergonomie et la qualité du site!

    Yves Masur le 18 février 2007 à 18:54 (#15)

  16. Ah, moi ça stagne à 40% du CPU. Merci Yves pour ta remarque ! Par contre, je ne sais pas trop comment corriger ce problème (à moins de supprimer carrément le surlignement des lignes qui utilise actuellement une bordure). Une idée ?

    Stéphane le 20 février 2007 à 07:31 (#16)

  17. Pour la vérification du code, vous pouvez utiliser JSLint de douglas crockford.

    Boris le 21 avril 2007 à 17:59 (#17)

  18. Merci Boris, ton outil est vraiment excellent !

    Stéphane le 22 avril 2007 à 10:31 (#18)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “Comment optimiser ses feuilles de styles CSS” :

  1. La toile en vrac - episode 3 at Toile-filante
    Le 6 janvier 2007 à 01:19

Articles Récents

Les derniers articles publiés

A Propos

Pas facile de franchir le pas et d'abandonner un poste de consultant. Mais depuis octobre 2006, je me consacre entièrement à la conception d'un nouveau service Internet et au montage d'une société.

Ce blog raconte le parcours d'un entrepreneur dans la net économie et aborde de nombreux aspects pratiques, juridiques et financiers liés au développement d'un business sur Internet.

Lire la suite…