Sprites CSS - appels multiples

Question

Est-ce une erreur d'appeler l'image-objet pour chaque instance dans css? Comment le navigateur gère-t-il cela, est-il seulement chargé une fois?

Exemple:

.box1{ background: url('../img/sprite.png') 0 0 no-repeat; } 
.box2{ background: url('../img/sprite.png') 0 -20px no-repeat; } 
.btn{ background: url('../img/sprite.png') -100px -60px no-repeat; } 

J'ai vu quelques exemples où vous appelez l'image-objet une fois et de modifier simplement la position d'arrière-plan.

Exemple:

#myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; } 
#myDiv .box2{ background-position: 0 -20px; } 

Answer 1

La seule chose qui cloche cette technique est que votre CSS aura du code redondant, ce qui le rend plus (en termes d'octets) qu'il doit être.

Il ne charge pas l'image d'arrière-plan plusieurs fois. Vous pouvez le confirmer en ouvrant vos outils de développement et en regardant l'onglet réseau.

Answer 2

L'image d'arrière-plan ne sera téléchargée qu'une seule fois.

Pour tester cela, vous pouvez vérifier quelles ressources sont en cours de téléchargement dans Chrome en procédant comme suit:

1. Accédez à la page Web
2. clic droit quelque part sur la page
3. cliquez sur Inspecter l'élément
4. cliquez sur l'onglet réseau
5. rafraîchir la page

Toutes les ressources qui sont chargées apparaîtront dans cette liste.

En outre, vous pouvez sécher votre CSS comme ceci:

.box1, .box2, .btn{ background-image: url('../img/sprite.png') } 
.box1{ background-position: 0 0 no-repeat; } 
.box2{ background-position: 0 -20px no-repeat; } 
.btn{ background-position: -100px -60px no-repeat; }