Ako sa implementujú CSS sprite na stránke alebo webe…

CSS sprite sa realizujú spojením viacerých malých obrázkov do jedného veľkého súboru (sprite) a následným zobrazením požadovanej časti tohto veľkého obrázka na prvkoch stránky pomocou CSS.

Hlavné kroky:

Vytvorenie sprite: Všetky obrázky, ktoré je potrebné spojiť (ikony, malé pozadia atď.), sa umiestnia do jedného obrázka. To možno urobiť ručne v grafickom editore alebo pomocou automatických nástrojov/generátorov sprite.
Použitie CSS: Pre každý prvok, do ktorého je potrebné "vložiť" obrázok zo sprite, sa nastavujú nasledujúce CSS vlastnosti:
- background-image: Udáva cestu k súboru sprite.
- background-repeat: no-repeat;: Vypne opakovanie pozadia.
- background-position: Určuje súradnice horného ľavého rohu časti sprite, ktorú je potrebné zobraziť pre daný prvok. Tieto súradnice udávajú posun horizontálne a vertikálne od horného ľavého rohu prvku.
- width a height: Určujú rozmery oblasti, v ktorej sa bude zobrazovať časť sprite. Tieto rozmery zvyčajne zodpovedajú veľkostiam pôvodnej ikony alebo obrázka.

Príklad použitia pre dve ikony v sprite:

/* Súbor sprite: icons.png */

.icon {
  background-image: url('icons.png'); // Cesta k sprite súboru
  background-repeat: no-repeat; // Neopakovať obrázok
  width: 32px; // Šírka prvku
  height: 32px; // Výška prvku
  display: inline-block; /* Alebo iný spôsob, ako spraviť prvok blokovým alebo inline-blokovým */
}

/* Ikona 1: nachádza sa v sprite na adrese 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Ikona 2: nachádza sa v sprite na adrese -40px, 0 (napríklad, ak medzi ikonami je 8px medzera) */
.icon-settings {
  background-position: -40px 0;
}

Výhody:

Zníženie HTTP požiadaviek: Namiesto viacerých požiadaviek je potrebné načítať iba jeden sprite súbor, čo skracuje čas načítania stránky.
Cacheovanie: Uloží sa jeden veľký súbor namiesto množstva malých.

Nevýhody:

Komplexnosť údržby: Pri pridávaní/zmenách obrázkov je potrebné sprite pregenerovať a aktualizovať CSS súradnice.
Nevhodné pre veľké alebo veľmi odlišné obrázky.

Ako sa implementujú CSS sprite na stránke alebo webe?