Écrire des feuilles de style efficaces
Par Holly Bergevin et John Gallant
Les bénéfices de l'efficacité
Un des avantages des CSS les plus mis en avant est qu'elles réduisent le poids total d'une page, et donc le temps de téléchargement, lors des chargements successifs d'une page grâce à la mise en cache de la feuille de style. C'est bien sûr vrai, mais bien souvent une fraction non négligeable des économies réalisées au premier chargement est perdue à cause d'un code CSS beaucoup trop redondant.
Eh bien ce problème n'en est plus un, car vous allez maintenant apprendre quelques-uns des petits «secrets » d'un codage CSS efficace, vous permettant de dépouiller au maximum vos feuilles de style. Bien sûr, les économies que vous allez réaliser ne seront pas énormes, mais pour certains sites très compétitifs, il n'y a pas de petits profits.
Il y a plusieurs domaines où la chasse aux octets superflus peut s'exercer. Ils comprennent notamment les propriétés raccourcies, les déclarations multiples, les valeurs par défaut, l'héritage des règles et les espaces blancs.
Les propriétés raccourcies
Un certain nombre de propriétés raccourcies ont déjà été effleurées dans l'article Zeroing page margins, mais il y a encore beaucoup à dire sur le sujet.
Les propriétés raccourcies les plus communément utilisées sont :
font(qui contrôlefont-size,font-weight,line-height, etc.)background(qui contrôle les éléments d'arrière-plan, leur positionnement, leur répétition, etc.)list-style(qui établit les propriétés des « puces» dans les listes d'items)margin(qui définit la largeur des marges des côtés d'une boîte)border(qui définit les propriétés des bordures d'une boîte. Il existe plusieurs propriétés raccourcies impliquant des bordures)padding(qui définit la largeur de la «marge interne » d'une boîte)
les éléments de la liste ci-dessus renvoient aux spécifications CSS2 du W3C.
La propriété font est par exemple une propriété raccourcie qui permet d'établir d'un seul coup les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family, même s'il n'est pas obligatoire de définir chacune d'entre elles. Quand une valeur est omise dans la formulation raccourcie, chaque propriété «manquante » est assignée à sa valeur initiale telle qu'elle a été définie pour la propriété font dans la spécification du W3C. Si plusieurs propriétés doivent être utilisées pour contrôler votre texte, l'utilisation de font permettra de supprimer un nombre substantiel d'octets dans une feuille de style.
Les propriétés background et list-style fonctionnent de manière similaire. Quant aux propriétés raccourcies restantes, elles concernent les quatre côtés d'une boîte CSS et sont un peu différentes.
Les propriétés raccourcies des côtés de boîte
Les quatre côtés de tous les éléments de niveau bloc (div, tableaux, listes, paragraphes, etc.) ont chacun une marge, une bordure et un remplissage (padding - NDT) dont la largeur peut être établie de manière variable pour chacun des côtés. Dans le cas des bordures, border-style et border-color peuvent aussi être définies séparément pour chaque côté. Si toutes ces propriétés doivent être écrites de façon explicite, l'ensemble des règles peut devenir relativement long. Utiliser des raccourcis permet de réduire considérablement le poids.
«L'horloge »
Quand il est nécessaire d'utiliser une des propriétés «côté de la boîte » et que tous les côtés sont identiques, vous pouvez simplement utiliser les propriétés raccourcies de la manière suivante :
margin: 10px; border-width: 1px; padding: 5px;
Remarque : border-style doit aussi être définie si l'on souhaite faire apparaître les bordures de la boîte. L'utilisation de border-width seule n'entraînera aucun affichage. Ceci peut être réalisé à l'aide de la propriété border-style, ou en définissant un style avec la propriété border.
Si toutefois certains côtés de la boîte doivent avoir des valeurs différentes, on peut utiliser une caractéristique des CSS que nous appelons «l'horloge ». Imaginez votre boîte comme une horloge vue de face. Quand les aiguilles sont pointées vers le haut, elles indiquent le sommet de la boîte, qui sera la première valeur de la propriété raccourcie. Vient ensuite la position des 3 heures qui est la valeur du côté droit, puis celle des 6 heures pour la valeur du bas de la boîte, et finalement la position 9 heures qui indique la valeur du côté gauche.
Ainsi par exemple, si nous voulons sur notre page une boîte avec une marge haute de 10px, une marge droite de 5px, une marge basse de 3px, et une marge nulle sur la gauche, voici comment la propriété raccourcie margin devra être écrite :
margin: 10px 5px 3px 0;
Dans la déclaration de la propriété, les valeurs doivent être séparées par un espace, et un espace seulement. De plus, les unités de mesure doivent être spécifiées pour chacune des valeurs, à moins qu'elles ne soient nulles. Remarquez que la taille nulle de la propriété margin est définie par un 0, car il est inutile de préciser l'unité utilisée quand une valeur est nulle. La valeur 0 de toute unité (px, em, %, etc.) est égale à la valeur 0 de n'importe quelle autre unité.
Horloges modifiées
Les différentes propriétés raccourcies de type «côté de la boîte » permettent encore plus de compression quand certains des côtés sont identiques. Comme mentionné précédemment, quand tous les côtés de la boîte sont similaires, une valeur unique s'appliquera à l'ensemble. Cependant, si le haut et le bas de la boîte doivent être définis d'une certaine façon, tandis que la gauche et la droite doivent être différents, le code de la propriété margin peut être écrit de la manière suivante :
margin: 10px 5px;
Ce code définit la marge supérieure et la marge inférieure à 10px, et les marges de côté à 5px. Un dernier truc est possible si le haut et le bas de la boîte sont différents alors que les côtés restent identiques. Avec une marge supérieure de 10px, une marge droite et gauche de 5px, et une marge inférieure de 20px, on peut écrire :
margin: 10px 5px 20px;
Tout dépend du nombre de valeurs à appliquer à la propriété raccourcie et de leur ordre. Rappelez-vous, une valeur = tous les côtés ; deux valeurs = le haut et le bas, puis les côtés ; trois valeurs = le haut, les côtés, le bas ; quatre valeurs = suivez le cadran de votre montre. Voilà, ça n'était pas si difficile !
Des bordures différentes
Cette même méthode peut être utilisée avec la propriété raccourcie border comme avec la propriété padding. border-color, border-style et padding fonctionnent de la même manière que la propriété margin. Il y a cependant une différence pour la propriété border puisque celle-ci établit une border-width, une border-style et une border-color pour les quatre côtés d'une boîte.
Ceci fonctionne très bien si les quatre côtés sont identiques. Mais que se passe-t-il s'ils doivent être différents ? Devrons-nous utiliser les bonnes vieilles border-top, border-right,etc. ? Eh bien on pourrait. Heureusement, il existe une façon un petit peu plus efficace de le faire.
Admettons que les bordures de notre boîte doivent toutes avoir le même style et la même couleur, mais des largeurs différentes. Le moyen le plus efficace de le faire est d'utiliser la propriété raccourcie basique border pour définir, comme d'habitude, la border-width, la border-style et la border-color, puis d'utiliser séparément la propriété border-width pour réécrire les différentes largeurs des bordures de la manière suivante :
border: 10px solid red; border-width: 10px 5px 3px 0;
Si toutes les propriétés border sont différentes pour chacun des côtés, cette méthode ne sera pas d'un grand secours, mais ce n'est pas la situation la plus typique. Si ce sont les propriétés border-style ou border-color qui doivent être variables, alors cette méthode peut être adaptée pour fonctionner avec ces propriétés comme avec border-width.
Jetons maintenant un coup d'oeil à une situation où l'écriture d'une CSS efficace peut vraiment faire la différence.
Les déclarations multiples
Disons que nous avons six div (six calques dans Dreamweaver) positionnés de manière absolue qui sont tous identiques, si ce n'est qu'ils sont placés l'un à côté de l'autre au sommet de la page. Parce que leur positionnement est différent, ils doivent avoir un attribut class ou un ID individuel, et pour le reste des propriétés identiques.
Un éditeur graphique écrira certainement une règle CSS séparée pour chaque ID comprenant toutes les règles de police, de texte, de positionnement, etc... Mais n'est-il pas idiot de répéter les mêmes règles pour toutes ces div ? Ça l'est. Aussi, voici comment les condenser au maximum :
#premier {left: 0;}
#deuxieme {left: 100px;}
#troisieme {left: 200px;}
#quatrieme {left: 300px;}
#cinquieme {left: 400px;}
#sixieme {left: 500px;}
#premier, #deuxieme, #troisieme, #quatrieme, #cinquieme, #sixieme {
position: absolute;
top: 0;
width: 75 px;
font-size: .9em;
font-weight: bold;
text-align: center;
line-height: 1.4em;
background-color: silver;
color: navy;
padding: 5px;
border: 1px solid navy;
}
En listant tous les ID des div identiques, séparés par une virgule et un espace, le bloc de règles s'applique à tous les div en même temps. Il est évident que si toutes ces propriétés avaient dû être répétées pour chaque ID, la feuille de style en aurait été gonflée d'autant. Voilà peut-être la méthode la plus efficace pour réduire la taille d'une feuille de style.
Remarque : Assurez-vous que le sélecteur du dernier ID ne comporte pas de virgule et apparaisse exactement comme dans l'exemple ci-dessus. Bien que certains navigateurs pourraient continuer à afficher les div, d'autres considéreront qu'il s'agit d'une erreur et n'afficheront aucun div.
Les valeurs par défaut
De nombreuses propriétés CSS ont une valeur initiale qui sera utilisée pour un élément si aucune déclaration ne vient réécrire cette valeur. Par exemple, chaque propriété de padding, c'est-à-dire padding-top, padding-right, padding-bottom, et padding-left possède une valeur initiale de 0. Si aucun remplissage n'est souhaité pour un élément donné, la propriété padding peut donc être omise.
Remarque : Les propriétés raccourcies comme celles dont nous venons de parler n'ont pas en elles-mêmes de valeur par défaut, et leurs différentes valeurs initiales sont généralement issues de la propriété individuelle que la version raccourcie représente. Alors qu'un certain nombre de valeur par défauts, listées dans l'index des propriétés de la spécification CSS2, sont égales à none ou 0, certains navigateurs établissent d'eux même des valeurs par défaut différentes pour certaines propriétés en fonction des éléments.
Exemple : le navigateur Opéra établit le positionnement de l'élément body à 8px. Les éléments h1 à h6 ainsi que les paragraphes ont généralement une valeur non nulle par défaut. L'utilisation d'une marge ou d'un espacement nul pour les listes ou les items d'une liste varie selon les navigateurs.
L'héritage des règles
Une autre façon d'éviter le code redondant est de prendre conscience du fait que les propriétés peuvent se transmettre d'un élément parent vers un élément enfant. Ces propriétés héritables sont peu nombreuses et la plupart servent très rarement, comme voice-family. La liste des propriétés couramment utilisées qui peuvent se transmettre est plutôt courte, alors la voici par ordre alphabétique :
colorfont(et ses propriétés reliées)letter-spacingline-heightlist-style(et ses propriétés reliées)text-aligntext-transformwhite-spaceword-spacing
Dans certains vieux navigateurs, les caractéristiques de l'héritage peuvent être défaillantes, mais les navigateurs modernes ne posent généralement aucune difficulté. En connaissant les propriétés héritables, on peut éviter d'écrire un code excessif. Alors n'hésitez pas à regarder encore le listing complet de l'index des propriétés CSS2.
Les espaces blancs
Il ne s'agit pas ici de la propriété white-space qui possède certaines valeurs spécifiques, mais plutôt de l'espace vide qui fait partie de la feuille de style elle-même. Cet espace se manifeste sous la forme des retours-chariot créant une nouvelle ligne et des espaces insérés à l'intérieur d'une ligne pour en faciliter la lecture. Bien que la suppression de tels espaces permette d'économiser quelques octets, les gains de poids restent en général très réduits.
Si les espaces vides sont supprimés, la feuille de style deviendra très difficile à lire, rendant les modifications ultérieures fastidieuses. Toutefois, si le travail impose que le moindre excès de poids soit supprimé, vous pouvez créer un fichier CSS «maître » facilement lisible. Puis, faites-en une copie et enlevez tous les espaces blancs du fichier qui sera utilisé en ligne. Si des changements doivent intervenir par la suite, ils seront effectués sur le fichier maître. On en refera une nouvelle copie qui sera à nouveau nettoyée de tous ses espaces blancs, et utilisée pour la version en ligne.
Attention ! Certains espaces du code CSS sont obligatoires et leur suppression altérera le fonctionnement des règles en conduisant à des effets plus qu'indésirables. Les spécifications du W3C utilisent la formulation "space separated" quand les espaces sont obligatoires. On les trouvera typiquement entre les valeurs des propriétés raccourcies. Le combinateur descendant, auquel on se réfère parfois comme le sélecteur descendant, est un caractère d'espacement, ce qui fait que la suppression de tous les espaces dans les sélecteurs n'est pas non plus une bonne idée. Alors peut-être vaut-il mieux laisser la suppression des espaces blancs aux véritables fanatiques ?
Conclusion
Vous venez d'apprendre un certain nombre de méthodes pour rendre vos feuilles de styles plus efficaces. Les avantages de l'utilisation régulière de ces techniques sont non seulement une économie d'octets quand la feuille de style sera téléchargée, mais aussi un code plus clair qui sera généralement plus facile à modifier. Même si vous construisez votre feuille de style avec un éditeur graphique, rien ne vous empêche d'éditer le résultat final pour le rendre plus efficace grâce aux méthodes esquissées dans cet article.
http://www.communitymx.com/content/article.cfm?cid=90F55