 |
 |
Effectuez une recherche sur la totalité du site :
Si vous souhaitez vous aussi écrire sur Game On Net et partager ainsi votre propre expérience, n'hésitez pas à nous contacter.
Optimiser le poids de sa feuille de style
vendredi 21 octobre 2005 par Nissone
La feuille de style externe
Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.
<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />
plutôt que
* {font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #ABC}
body {background: url(images/fond.jpg)}
h1 {border: solid #DEF; border-width: 0 2px 2px 0; background: #FFFFF0}
#footer, #footer a, #footer span {font-size: smaller}
#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}
</style>
Le séparteur
A la fin d’une déclaration, on met un " ;".
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.
h3 {text-indent:10%}
p {text-align: justify}
plutôt que
h3 {text-indent:10%;}
p {text-align: justify;}
Les couleurs
La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.
color:#ABC
plutôt que
color:#AABBCC
Les unités
Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.
margin:0 5em
plutôt que
margin:0px 5em
Les valeurs par défaut
Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.
div {border:1px solid #A1F5C3}
plutôt que
div {position:static; border:1px solid #A1F5C3}
Les propriétés raccourcies
(Voir Les propriétés raccourcies)
Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]
border: solid #DEF; border-width: 0 2px 2px 0;
plutôt que
border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;
Les déclarations communes
Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages. Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]
#footer, #footer a, #footer span {font-size: smaller}
plutôt que
#footer a {font-size: smaller}
#footer span {font-size: smaller}
Les propriétés qui héritent
Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]
* {font-family: Arial, Helvetica, sans-serif}
plutôt que
p {font-family: Arial, Helvetica, sans-serif}
a {font-family: Arial, Helvetica, sans-serif}
Les selecteurs qui appartiennent déjà à une classe
Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.
#footer a {color: #562}
#footer span {margin: 0 5px}
plutôt que
.footerLiens {color: #562}
.footerTexte {margin: 0 5px}
[1] Pour en savoir plus : CSS Cheat Sheet (pdf - 379k) de Dave Child ou sa traduction française par goetzilla : Aide-mémoire CSS (pdf - 43k)
Réagissez à cet article