Hoe worden CSS-sprites geïmplementeerd op een pagina…

CSS-sprites worden gerealiseerd door meerdere kleine afbeeldingen samen te voegen in één groot bestand (sprite), waarna het benodigde deel van deze grote afbeelding wordt weergegeven op pagina-elementen met behulp van CSS.

Belangrijkste stappen:

Creëer de sprite: Alle afbeeldingen die moeten worden samengevoegd (pictogrammen, kleine achtergronden, enz.) worden in één afbeelding geplaatst. Dit kan handmatig in een grafisch bewerkingsprogramma of met automatische tools/generatoren voor sprites.
Pas CSS toe: Voor elk element waarin je een afbeelding uit de sprite wilt plaatsen, stel je de volgende CSS-eigenschappen in:
- background-image: geeft het pad naar het sprite-bestand aan.
- background-repeat: no-repeat;: schakelt herhaling van de achtergrondafbeelding uit.
- background-position: bepaalt de coördinaten van de linkerbovenhoek van het sprite-deel dat moet worden weergegeven. Deze coördinaten geven de horizontale en verticale verschuiving aan vanaf de linkerbovenhoek van het element.
- width en height: bepalen de grootte van het gebied waarin het sprite-deel wordt weergegeven. Deze afmetingen komen meestal overeen met de grootte van het originele pictogram of de afbeelding.

Voorbeeld voor twee pictogrammen in een sprite:

/* Sprite-bestand: icons.png */

.icon {
  background-image: url('icons.png'); // Pad naar sprite-bestand
  background-repeat: no-repeat; // Niet herhalen
  width: 32px; // Breedte van het element
  height: 32px; // Hoogte van het element
  display: inline-block; /* Of een andere methode om het element blok/inline-block te maken */
}

/* Pictogram 1: bevindt zich in de sprite op positie 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Pictogram 2: bevindt zich in de sprite op positie -40px, 0 (bijvoorbeeld, als er 8px tussen de pictogrammen zit) */
.icon-settings {
  background-position: -40px 0;
}

Voordelen:

Vermindering van HTTP-verzoeken: In plaats van meerdere verzoeken hoeft de browser slechts één sprite-bestand te laden, wat de laadtijd van de pagina verkort.
Caching: Eén groot bestand wordt in de cache opgeslagen in plaats van meerdere kleine.

Nadelen:

Onderhoudscomplexiteit: Bij het toevoegen of wijzigen van afbeeldingen moet de sprite worden hermaakt en de CSS-coördinaten worden bijgewerkt.
Niet geschikt voor grote of sterk verschillende afbeeldingen.

Hoe worden CSS-sprites geïmplementeerd op een pagina of website?