Si votre maîtrise des mises en page HTML à l’aide de feuilles de styles est encore un peu hésitante, voici deux outils qui pourraient vous rendre quelques services, tant du point de vue productivité qu’optimisation.
La productivité d’abord…
Même si vous utilisez des gabarits, qu’ils proviennent de vos propres créations ou d’autres sources de CSS, rien de tel qu’un générateur produisant du code propre pour faire une page correspondant réellement à vos besoins.
CSSCreator est un générateur en ligne de mise en page HTML avec CSS qui vous propose du sur-mesure : vous sélectionnez le Doctype (HTML, XHTML…), vous choisissez le type de design (largeur fixe ou fluide) puis vous indiquez les dimensions et les couleurs de vos blocs (header, sidebar, footer), vous validez, et c’est fait, vous récupérez le fichier HTML et le fichier CSS qui vont bien, avec un code nickel.
… puis l’optimisation
Vous avez bossé de longues semaines heures sur votre magnifique feuille de style dont vous êtes vachement fier. Sauf qu’à force d’ajouter des classes et des hacks à la con pour que tout fonctionne partout (comprendre : sur IE), elle est devenue un peu obèse, compliquée et longue comme un jour sans Twitter.
C’est là qu’intervient CleanCSS. CleanCSS est un optimiseur en ligne de CSS basé sur CSSTidy qui se charge de nettoyer, compresser, organiser le code de votre CSS, selon une multitude de paramètres que vous pouvez définir vous-même.
J’ai testé sur la CSS de Fuzz, devenue au fil du temps et des ajouts aussi lisible qu’un scénario de Jean-Luc Godard, et elle est passée de 23 à 16 ko, avec les réglages standards "sécurisés".
Je pense qu’on peut faire mieux en réglant plus finement les paramètres, tout en observant une certaine prudence car le résultat peut parfois produire quelques surprises désagréables dans votre belle mise en page.
L’objectif ici n’est pas tant d’accélérer le temps de chargement de vos pages que de produire un code CSS propre et lisible pour les modifications futures.
📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.
Merci Eric, je vais faire un petit tour sur les 2 sites, mais il me semble que je les connais déjà 🙂
Pas mal cleancss.
J’ai aussi constaté que certains gros sites utilisaient un script qui compressait à la volée leurs CSS en supprimant les espaces, retours à la lisible, tabulations. Illisible mais quelques octets gagnés certainement !
Merci pour ces liens çà a l’air clean et propre.
A tester mais çà servira un jour 🙂