Comment les sprites CSS sont-ils implémentés sur une…

Les sprites CSS sont une méthode pour combiner plusieurs images en une seule grande. Elle est réalisée à l'aide de CSS, en contrôlant la visibilité du fragment nécessaire de la grande image via les propriétés background-image, background-position et background-repeat.

Avantages:

Réduction du nombre de requêtes HTTP. Au lieu de charger plusieurs petites images, on charge une grande.
Accélération du chargement de la page. Moins de requêtes au serveur, rendu plus rapide.
Économie de trafic. La taille totale du fichier est souvent inférieure à la somme des images séparées.

Mise en œuvre:

Création du sprite: Fusionner les images en une seule à l'aide d'éditeurs graphiques ou d'outils en ligne/spécifiques (par exemple, Webpack avec le plugin css-spritesmith-plugin).

CSS: Pour les éléments utilisant des images du sprite, appliquer les styles suivants:

.icon {
  background-image: url('path/to/sprite.png'); /* Chemin vers le fichier sprite */
  background-repeat: no-repeat; /* L'image ne se répète pas */
  display: block; /* ou inline-block, selon l'élément */
  width: 32px; /* Largeur de l'icône nécessaire */
  height: 32px; /* Hauteur de l'icône nécessaire */
}

.icon-home {
  background-position: 0 0; /* Position du fragment nécessaire de l'icône "Accueil" */
}

.icon-settings {
  background-position: -32px 0; /* Position du fragment nécessaire de l'icône "Paramètres" */
}

Dans le code CSS fourni, .icon définit les propriétés générales pour tous les éléments utilisant le sprite. Les classes comme .icon-home et .icon-settings déterminent la position spécifique de l'image nécessaire dans le sprite via background-position.

Comment les sprites CSS sont-ils implémentés sur une page ou un site Web?