Jak jsou na stránce nebo webu implementovány CSS sprite?

CSS sprite se realizují sloučením několika malých obrázků do jednoho velkého souboru (sprite), přičemž pak je potřeba zobrazit požadovanou část tohoto velkého obrázku na prvcích stránky pomocí CSS.

Hlavní kroky:

1. Vytvoření sprite: Všechny obrázky, které je třeba spojit (ikony, malé pozadí apod.), se umístí do jednoho obrázku. To lze udělat ručně v grafickém editoru nebo pomocí automatických nástrojů/generátorů sprite.

2. Použití CSS: Pro každý prvek, do kterého je třeba "vložit" obrázek ze sprite, se nastaví následující vlastnosti CSS:

   • background-image: určuje cestu k souboru sprite.
   • background-repeat: no-repeat;: zakáže opakování obrázku na pozadí.
   • background-position: určuje souřadnice levého horního rohu části sprite, kterou je třeba zobrazit. Tyto souřadnice udávají posun horizontální a vertikální od levého horního rohu prvku.
   • width a height: určují rozměry oblasti, ve které bude část sprite zobrazena. Tyto rozměry obvykle odpovídají velikosti původní ikony nebo obrázku.

Příklad použití pro dvě ikony ve sprite:

/* Soubor sprite: icons.png */

.icon {
  background-image: url('icons.png'); // Cesta k souboru sprite
  background-repeat: no-repeat; // Neopakovat
  width: 32px; // Šířka prvku
  height: 32px; // Výška prvku
  display: inline-block; /* Nebo jiný způsob, jak udělat prvek blokovým/inline-blockem */
}

/* Ikona 1: nachází se ve sprite na pozici 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Ikona 2: nachází se ve sprite na pozici -40px, 0 (například pokud je mezi ikonami 8px mezera) */
.icon-settings {
  background-position: -40px 0;
}

Výhody:

• Snížení HTTP požadavků: Místo několika požadavků načte prohlížeč pouze jeden sprite soubor, což zkracuje dobu načítání stránky.
• Cache: Uloží se do cache jeden velký soubor místo mnoha malých.

Nevýhody:

• Složitost údržby: Při přidávání nebo změně obrázků je nutné sprite znovu vytvořit a aktualizovat CSS souřadnice.
• Není vhodné pro velké nebo velmi odlišné obrázky.