Un article écrit par Big John et Holly Bergevin pour le CommunityMX website, une ressource complète sur le sujet (abonnement requis) - lien original de référence
L'un des bénéfices racoleurs des CSS est la réduction du poids total de la page et par conséquent du temps de téléchargement, à la fois lors du premier chargement de la page et même plus après lors des chargements ultérieurs grâce à la mise en cache de la feuille de style. Ceci est avéré, mais souvent une fraction de la taille du premier chargement est perdue à cause d'un code CSS trop redondant.
Bon c'est tout pour le moment. A ce stade, vous apprendrez quelques "secrets" d'un codage CSS efficace, vous pemettant de rogner cette feuille de style jusqu'à l'os. Vous ne parviendrez pas à faire des économies énormes en faisant ça mais la méthode exposée peut se montrer intéressante pour des sites hautement compétitifs là où chaque bit compte.
Plusieurs aires se prêtent à la restriction des bits. Nous évoquerons les raccourcis de propriétés, les déclarations multiples, les valeurs par défaut, l'héritage et l'espace blanc.
Quelques raccourcis de propriétés ont été abordés dans les réglages de marges à zéro, mais il y a beaucoup plus à dire à ce sujet :
Les raccourcis les plus connus sont :
Les items de listes ci-dessus sont liés aux sections pertinentes des spécifications CSS2 du W3C
Par exemple, le raccourci de propriété pour régler font-style, font-variant, font-weight, font-size, line-height, et font-family tous en une fois. Vous n'êtes pas obligés cependant de tous les définir en une fois. Quand les valeurs sont omises d'un format de propriété, chaque propriété "manquante" se voit assigner sa valeur initiale par défaut, comme celles trouvées dans les spécifications du W3C pour la propriété font. Si bon nombre des propriétés de font sont contrôlées, l'usage de cette propriété peut éliminer un nombre substantiel de bits d'une feuille de style.
Il en est de même pour les propriétés d'arrière-plan (background) et de style de liste (list-style). Les raccourcis de propriétés restants dans notre liste incluent les quatres côtés d'une boîte CSS et sont quelque part différent des autres.
Les quatre côtés de n'importe quel élément de boîte (divs, tables, lists, paragraphs, etc.) peuvent avoir chacun leurs margins, borders, et padding, dans les largeurs pouvant varier et réglées individuellement pour chaque côté. Dans le cas des border, border-style et border-color peuvent aussi être dimensionnés séparamment pour chaque côté. Si toutes ces propriétés sont épelées, une règle bien énoncée peut devenir très longue. Utiliser les raccourcis de règles peut drastiquement réduire le téléchargement.
Quand l'une de ces propriétés de "boîtes de côté" est requise et que tous les côtés doivent être les mêmes, utilisez simplement le raccourci de propriété comme ceci :
margin: 5px;
border-width: 5px;
padding: 5px;
Note : border-style doit aussi être réglé dans l'ordre pour l'affichage des bordures. Ce peut être réalisé en utilisant la propriété border-style, ou en réglant un style avec la propriété border. Le fait d'utiliser le border-width seul éliminera l'affichage des bordures.
Si cependant, certains côtés ont besoin de différentes valeurs, une fonctionnalité CSS que nous appelons la "pendule" entre ici en jeu. Imaginez simplement une boîte en face d'une pendule. A midi vous indiquez le haut de la boîte. C'est le premier raccourci de valeur donné. Puis vient la position de 3 heures sur la pendule qui est le côté droit de la boîte. Puis vient 6 heures pour le bas de la boîte et pour finir 9 heures qui indique le côté gauche de la boîte.
Regardons un exemple. Sur notre page nous voulons une boîte avec une marge de 10px en haut, une marge de 5px à droite, une de 3px en bas et pas de marge gauche. Voilà comment le raccourci de propriété devrait s'écrire :
margin: 10px 5px 3px 0;
Dans la déclaration de
propriété, ces valeurs doivent être
séparées par des espaces et seulement des espaces.
Aussi, toute unité de mesure doit être donnée
pour chaque valeur à moins que sa valeur ne soit
égale à zéro.
Notez que la marge à zéro est définie comme
0 parce quelle que soit la valeur
de zéro, l'unité que vous utilisez n'importe pas.
Une valeur de zéro quelle que soit l'unité (px, em,
%, etc.) est égale à un montant de zéro de
n'importe quelle unité.
Les différents raccourcis de propriétés des côtés de boîtes permettent même plus de compression si quelques côtés sont identiques. Comme nous le mentionnions plus haut, si tous les côtés sont les mêmes, une simple valeur s'appliquera à tous. Cependant, si le haut et le bas de la boîte ont une valeur, et que les bords droits et gauche doivent être différents, le code pour la marge pourrait s'écrire comme suit :
margin: 10px 5px;
Ce code fixe les marges du haut et du bas à 10px, et les marges des côtés à 5px. Un dernier truc possible si le haut et le bas sont différents mais les côtés identiques. Avec une marge de 10px en haut, 5px à gauche et à droite et une marge de 20px en bas, nous pouvons écire :
margin: 10px 5px 20px;
Tout dépend du nombre de valeurs qui s'applique au raccourci de propriété et de leur ordre. Souvenez-vous, une valeur = tous les bords ; deux valeurs = haut et bas, côtés ; trois valeurs = haut, côtés, bas. Et 4 valeurs = suivez le modèle de la pendule. Pas si complexe que ça, n'est-ce pas ?
Cette même méthode de pendule pour le raccourci de propriété peut être utilisée avec les raccourcis de propriétés border tout comme les padding. border-width , border-color , border-style , et padding fonctionnent simplement comme les marges. Il y a cependant une différence avec la propriété border. La propriété border fixe les border-width, border-style, et border-color pour les quatres côtés d'une boîte.
Ceci fonctionne très bien si toutes les quatres bordures doivent être les mêmes. Mais que se passe t'il si elles doivent être différentes ? Revenons-nous en arrière en utilisant les bonnes vieilles border-top, border-right et ainsi de suite ? Bien sûr, nous pourrions. Heureusement, il y a un moyen plus efficace de faire.
Mettons que les bordures de nos boîtes aient toutes le même style et la même couleur mais avec des largeurs différentes. Le moyen le plus efficace est d'utiliser le raccourci basique de propriété pour définir les border-width, border-style, et border-color ; comme d'habitude, utilisez ensuite la propriété border-width séparément pour outrepasser les différentes largeurs de bordures comme suit :
border: 10px solid red;
border-width: 10px 5px 3px 0;
Si toutes les propriétés des bordures sont différentes pour les quatre côtés cette méthode ne sera pas d'une grande aide, mais avouez que cette situation est peu typique. Si border-style ou border-color est la variable propriété, alors cette méthode peut être modifiée pour fonctionner avec ces propriétés simplement comme border-width .
Maintenant nous jetterons un oeil à une autre situation où l'écriture CSS peut faire la différence.
Disons que nous avons six divs positionnées (dans Dreamweaver on parle de layout) et qu'elles sont toutes les mêmes si ce n'est être alignées sur tout le travers et en haut de la page. Parce que différents placements de pages leur sont assignés, elles doivent chacune avoir une classe individuelle ou un ID, mais tout le reste des propriétés reste le même.
and they are all the same other than being spaced out across the top of the page. Because they are given different page placements, they must each be given an individual class or ID, but all the rest of their properties are the same.
Un éditeur de layout fonctionnera vraiment pour écrire la CSS séparément pour chaque ID, incluant toutes les règles de fonte, les règles de texte, la déclaration de position et ainsi de suite. Il semble aussi stupide de conserver une répétition de ces règles identiques pour toutes ces divs n'est-ce pas ? Voilà comment condenser ces règles pour ces divs afin de tendre vers le strict minimum.
#first {left: 0;}
#second {left: 100px;}
#third {left: 200px;}
#fourth {left: 300px;}
#fifth {left: 400px;}
#sixth {left: 500px;}
#first, #second, #third, #fourth, #fifth, #sixth {
position: absolute;
top: 0;
width: 75px;
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 toutes les ID des divs similaires, séparées par une virgule et un espace, la règle de bloc s'applique à toutes les ID en une fois. Il est clair que si ces propriétés étaient répétées pour chacune des ID, la CSS deviendrait plutôt bouffie. C'est peut-être la manière unique et la plus efficace de réduire la taille d'une feuille de style.
Note : Assurez-vous que le dernier sélecteur d'ID n'ait pas de virgule le suivant, mais apparaisse bien à la place exactement comme dans l'échantillon de code ci-dessus s'appliquant au aux règles pour plusieurs ID. Parce que certains navigateurs peuvent encore afficher les divs, d'autres considéreront cela comme une erreur et n'afficheront pas les divs.
Beaucoup de propriétés CSS ont des valeurs par défaut qui seront utilisées pour un élément si aucune déclaration n'est faite qui n'outrepasserait les valeurs par défaut. Par exemple, chaque propriété de padding, padding-top , padding-right, padding-bottom, et padding-left ont une valeur initiale de 0 . Si aucun padding (zone de remplissage) n'est désiré sur un élément donné, la propriété padding peut être omise.
Note : Les raccourcis de
propriétés, tels que ceux dont nous avons
discuté, n'ont pas de valeurs par défaut. Les
différentes valeurs sont généralement prises
des propriétés individuelles que la version
raccourci représente. Parce que beaucoup de valeurs par
défaut listées dans la spécification CSS2 Property Index sont none ou 0 , les navigateurs eux-mêmes
règlent différentes valeurs par défaut pour
quelques propriétés selon
l'élément.
Exemples : Le navigateur Opéra règle un padding de
8px sur l'élément body. Les en-têtes
h1-h6 , tout comme les paragraphes, ont
généralement des marges réglées par
défaut à non-zero. L'utilisation de marges par
défaut à non-zero ou des padding pour
les listes et list-items varie selon les
navigateurs.
Un autre moyen d'éviter du code redondant est d'être conscient des propriétés qui héritent d'un élément parent vers un élément enfant ou d'éléments. Il y a peu de propriétés d'héritage, mais bon nombre d'entre elles sont des propriétés peu utilisées comme voice-family . La liste des propriétés communément utilisées qui héritent est vraiment courte, aussi là voilà : (par ordre alphabétique) :
Dans certains vieux navigateurs, la fonctionnalité d'héritage peut provoquer des bugs, mais les navigateurs modernes n'ont généralement pas de problème pour gérer correctement l'héritage. En connaissant ce qui hérite, on peut vraiment se dispenser d'écrire du code en trop. A nouveau, pour la liste complète voir l'index CSS 2 Property.
Ce n'est pas la propriété white-space , qui a certaines valeurs spécifiques, mais plutôt un espace blanc à l'intérieur de la feuille de style elle-même. Cet espace vient généralement dans le formulaire des lignes de caractères qui provoquent une nouvelle ligne et des espaces utilisés à l'intérieur d'une ligne pour faciliter la lisibilité. Même si le fait de supprimer de tels espaces, les économies sont généralement très petites.
Si ces espaces sont retirés, la CSS deviendra très difficile à lire, rendant difficiles de futures modifications. Si la tâche exige que chaque bit excessif soit retiré, vous devriez créer un fichier CSS "maître" facile à lire. Puis, faire une copie et retirer tout l'espace blanc pour le fichier qui est utilisé "live. Si des modifications doivent être faites plus tard, le fichier maître facile à lire peut être modifié et une nouvelle copie propre et nettoyée des espaces blancs pour la version "live".
Attention ! Quelques espaces sont requis dans le code CSS et le fait de les retirer altèrera les règles CSS, vous menant droit à des résultats non désirés. Quand les spécifications du W3C utilisent le mot "space separated", alors les espaces sont requis. L'endroit le plus courant est entre les valeurs dans les raccourcis de propriétés. Le "descendant combinator", se référant parfois comme un sélecteur descendant, est un caractère espace, de telle manière que retirer tous les espaces dans les sélecteurs n'est pas toujours une bonne idée. Peut-être que retirer de l'espace blanc doit être mieux laissé aux fanatiques, non ?
Vous avez appris un certain nombre de moyens pour rendre vos feuilles de style plus efficaces. Les bénéfices apportées par l'utilisation de ces techniques sont non seulement l'économie de bits quand les feuilles de style sont téléchargées, mais aussi le fait de produire un code propre, facile à suivre et à modifier si le besoin s'en fait sentir par la suite. Même si vous construisez vos feuilles de style dans un éditeur spécialisé, vous pouvez éditer le "produit final" pour le rendre plus efficace en utilisant les méthodes exposées dans cet article.
Holly
'n John e-mail
positioniseverything
Traduction Christophe Ducamp - Elanceur pour FractalCity
Mise à jour : juillet 2004.