Cum se implementează sprite-urile CSS pe o pagină sau site?

Sprite-urile CSS se realizează prin combinarea mai multor imagini mici într-un fișier mare (sprite), apoi afișând partea necesară a acestei imagini mari pe elementele paginii folosind CSS.

Pașii principali:

1. Crearea sprite-ului: Toate imaginile care trebuie combinate (pictograme, fundaluri mici etc.) sunt plasate într-o singură imagine. Acest lucru poate fi făcut manual într-un editor grafic sau cu ajutorul instrumentelor/generatorilor automați de sprite-uri.

2. Aplicarea CSS: Pentru fiecare element în care trebuie "inserează" o imagine din sprite, se setează următoarele proprietăți CSS:

   • background-image: indică calea către fișierul sprite.
   • background-repeat: no-repeat;: dezactivează repetarea imaginii de fundal.
   • background-position: stabilește coordonatele colțului din stânga sus al părții sprite-ului care trebuie afișată pentru acel element. Aceste coordonate indică deplasarea orizontală și verticală față de colțul din stânga sus al elementului.
   • width și height: stabilesc dimensiunea zonei în care va fi afișată partea sprite-ului. Aceste dimensiuni corespund de obicei dimensiunii iconiței sau imaginii originale.

Exemplu pentru două pictograme în sprite:

/* Fișier sprite: icons.png */

.icon {
  background-image: url('icons.png'); // Calea către fișierul sprite
  background-repeat: no-repeat; // Nu repeta
  width: 32px; // Lățimea elementului
  height: 32px; // Înălțimea elementului
  display: inline-block; /* Sau alt mod de a face elementul bloc/inline-block */
}

/* Pictogramă 1: se află în sprite la adresa 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Pictogramă 2: se află în sprite la adresa -40px, 0 (de exemplu, dacă între pictograme există o margine de 8px) */
.icon-settings {
  background-position: -40px 0;
}

Avantaje:

• Reducerea cererilor HTTP: În loc de mai multe cereri, browserul trebuie să încarce doar un fișier sprite, ceea ce reduce timpul de încărcare al paginii.
• Cache: Se cachează un singur fișier mare în loc de mai multe mici.

Dezavantaje:

• Complexitatea întreținerii: La adăugarea/modificarea imaginilor, trebuie recreat sprite-ul și actualizate coordonatele CSS.
• Nu este potrivit pentru imagini mari sau foarte diferite.