Une mesure clé de la convivialité d'un site Web est la vitesse, ou plus précisément, la rapidité avec laquelle une page apparaît dans la fenêtre du navigateur d'un visiteur. De nombreux facteurs affectent la vitesse, notamment la vitesse de votre serveur Web, la connexion Internet de votre visiteur et la taille du fichier que le navigateur doit télécharger. Bien que vous ne puissiez pas contrôler la vitesse de votre serveur et de votre connexion, vous pouvez contrôler la taille des fichiers qui composent les pages Web de votre site Web.
Afin de rendre les sites Web plus rapides, les créateurs de sites Web compressent et optimisent régulièrement chaque fichier image de leur site Web, sacrifiant souvent la qualité de l'image afin de réduire la taille du fichier de quelques points de pourcentage. Étant donné que les feuilles de style CSS sont des fichiers de texte brut et sont relativement petites par rapport aux images, les créateurs de sites Web envisagent rarement de prendre des mesures pour réduire la taille de leurs fichiers de feuilles de style CSS. Cependant, en utilisant des abréviations CSS et d’autres astuces simples, vous pouvez réduire considérablement la taille de votre feuille de style. Lors d'un test informel ad hoc de mes propres feuilles de style, j'ai réduit la taille du fichier d'environ 25 à 50 %.
Utilisez les propriétés d'abréviation de CSS :
Les propriétés abrégées CSS sont des noms de propriétés spécialisés utilisés pour remplacer plusieurs ensembles de propriétés associées. Par exemple, la propriété padding est l'abréviation de padding-top, padding-right, padding-bottom et padding-left.
L'utilisation de propriétés abrégées vous permet de compresser plusieurs paires propriété/attribut en une seule ligne de code dans une feuille de style CSS. Par exemple, considérons le code suivant :
.échantillon1 {
marge supérieure : 15 px ;
marge droite : 20 px ;
marge inférieure : 12 px ;
marge gauche : 24 px ;
rembourrage supérieur : 5 px ;
remplissage à droite : 10 px ;
rembourrage en bas : 4 px ;
remplissage à gauche : 8 px ;
largeur supérieure de la bordure : fine ;
style de bordure : solide ;
couleur de la bordure supérieure : #000000 ;
}
Le remplacer par certaines propriétés d'abréviation peut réduire le code à ce qui suit, l'effet réel des deux est exactement le même :
.échantillon1 {
marge : 15px 20px 12px 24px ;
remplissage : 5 px, 10 px, 4 px, 8 px ;
bordure supérieure : mince solide #000000 ;
}
Notez que les propriétés abrégées ont également plusieurs propriétés, chacune correspondant à une propriété standard combinée dans la propriété abrégée. Les propriétés sont séparées par des espaces blancs.
Lorsque les propriétés ont des valeurs similaires, comme pour les mesures linéaires des propriétés de marge, l'ordre des propriétés qui suivent la propriété abrégée est important. L'ordre des attributs commence en haut (la bordure supérieure est vide) et continue dans le sens des aiguilles d'une montre autour de la boîte.
Si toutes les propriétés d’une propriété d’abréviation sont identiques, vous pouvez simplement lister la propriété unique et la copier quatre fois devant. Les deux propriétés suivantes sont donc égales :
marge : 5px 5px 5px 5px ;
marge : 5px ;
De même, vous pouvez représenter des paires de propriétés haut/bas et droite/gauche en utilisant deux propriétés suivant les propriétés de marge de bordure ou d'espacement.
marge : 5px 10px 5px 10px ;
marge : 5px 10px ;
L'ordre des attributs n'a pas d'importance lorsqu'il s'agit de valeurs différentes. Par conséquent, les propriétés telles que la couleur de la bordure, le style de la bordure et la largeur de la bordure peuvent suivre la propriété outline dans n'importe quel ordre. Ignorer un attribut équivaut à omettre la propriété générale correspondante des règles de style.
Liste des propriétés des abréviations CSS
Vous trouverez ci-dessous une liste de propriétés abrégées CSS et les propriétés générales qu'elles représentent.
Arrière-plan : pièce jointe d'arrière-plan, couleur d'arrière-plan, image d'arrière-plan, position d'arrière-plan, répétition d'arrière-plan
Bordure : couleur de bordure, style de bordure, largeur de bordure
border-bottom (bordure inférieure) : couleur de la bordure inférieure, style de la bordure inférieure, largeur de la bordure inférieure
border-left (bordure gauche) : couleur de la bordure gauche, style de la bordure gauche, largeur de la bordure gauche
border-right (bordure droite) : couleur de la bordure droite, style de la bordure droite, largeur de la bordure droite
border-top (bordure supérieure) : couleur de la bordure supérieure, style de la bordure supérieure, largeur de la bordure supérieure
signal (signal sonore) : pré-repère, post-repère
police : police, taille de police, style de police, épaisseur de police, variante de police, hauteur de ligne, ajustement de la taille de police, étirement de la police
list-style : image de style de liste, position du style de liste, type de style de liste
marge (vierge) : marge supérieure, marge droite, marge inférieure, marge gauche
contour : couleur du contour, style du contour, largeur du contour
rembourrage : espace supérieur, espace droit, espace inférieur, espace gauche
pause (pause) : pause après, pause avant, réduire l'espace blanc
Une autre façon de réduire la taille d’une feuille de style CSS consiste à supprimer la plupart des espaces inutiles du document. En d'autres termes, placez chaque saut de règle dans une seule ligne de code, c'est-à-dire supprimez les nouvelles lignes et les retraits qui ont été initialement insérés dans le code pour séparer chaque propriété/attribut sur des lignes distinctes.
Par exemple, les exemples de code suivants ont un contenu identique, mais le second est beaucoup plus raffiné :
h1 {
taille de police : x-large ;
poids de la police : gras ;
couleur : #FF0000 ;
}
h1 {taille de police : x-large ; poids de police : gras ; couleur : #FF0000}
Supprimer les commentaires
Supprimer les commentaires de votre code CSS est un autre moyen de réduire la taille du fichier. Bien que les commentaires soient utiles pour lire le code, ils n'aident pas le navigateur à générer vos pages Web. De nombreux créateurs de sites Web sont habitués à commenter chaque ligne de code, ou au moins chaque instruction de règle. Des commentaires aussi généreux sont rarement nécessaires dans les feuilles de style CSS car la plupart des propriétés et propriétés CSS sont faciles à lire et à comprendre. Si vous utilisez des noms significatifs pour les classes, les identifiants et autres sélecteurs, vous pouvez éliminer la plupart des commentaires tout en gardant votre code lisible et maintenable.
h1 { /* Style de titre 1*/
taille de police : x-large ; /* taille x-large */
poids de la police : gras ; /* Gras */
couleur : #FF0000 ; /* Rouge */
}
L'utilisation de propriétés abrégées, la suppression des espaces inutiles et l'omission de commentaires peuvent réduire considérablement la taille de votre fichier de feuille de style CSS. Cela apportera à son tour une contribution modeste, mais potentiellement notable, à l'objectif global d'accélération de votre site Web.