Hogyan valósulnak meg a CSS sprite-ok egy oldalon…

A CSS sprite-ok megvalósítása több kis kép egyesítésével történik egy nagy fájlba (sprite), majd ennek a nagy képnek a szükséges részét CSS segítségével jelenítjük meg az oldal elemein.

Fő lépések:

Sprite létrehozása: Minden olyan kép, amit össze kell kapcsolni (ikonok, kis háttérképek stb.), egy képen helyezkedik el. Ezt kézzel grafikus szerkesztőben vagy automatikus eszközök/sprite generátorok segítségével lehet megtenni.
CSS alkalmazása: Minden olyan elemhez, amelybe "be kell szúrni" egy sprite-ból származó képet, a következő CSS tulajdonságokat kell beállítani:
- background-image: a sprite fájl elérési útját adja meg.
- background-repeat: no-repeat;: kikapcsolja a háttérkép ismétlődését.
- background-position: meghatározza a sprite azon részének bal felső sarkának koordinátáit, amit meg akarunk jeleníteni. Ezek a koordináták a vízszintes és függőleges eltolást mutatják a bal felső saroktól.
- width és height: a megjelenítendő sprite rész méretét határozzák meg. Ezek általában az eredeti ikon vagy kép méretével egyeznek meg.

Példa két ikon sprite-on belüli használatára:

/* Sprite fájl: icons.png */

.icon {
  background-image: url('icons.png'); // A sprite fájl elérési útja
  background-repeat: no-repeat; // Ismétlés kikapcsolva
  width: 32px; // Az elem szélessége
  height: 32px; // Az elem magassága
  display: inline-block; /* Vagy más módszer az elem blokk/inline-block státuszának beállítására */
}

/* Ikon 1: a sprite 0, 0 pozíciójában */
.icon-home {
  background-position: 0 0;
}

/* Ikon 2: a sprite -40px, 0 pozíciójában (például, ha 8px távolság van az ikonok között) */
.icon-settings {
  background-position: -40px 0;
}

Előnyök:

HTTP kérés csökkentése: Ahelyett, hogy több kérés lenne, a böngésző csak egy sprite fájlt tölt be, így csökken a betöltési idő.
Gyorsítótárazás: Egy nagy fájl kerül gyorsítótárba, ahelyett, hogy sok kis fájl lenne.

Hátrányok:

Karbantartási nehézségek: Új képek hozzáadásakor vagy módosításakor újra kell készíteni a sprite-ot és frissíteni a CSS koordinátákat.
Nem alkalmas nagy vagy nagyon eltérő képekhez.

Hogyan valósulnak meg a CSS sprite-ok egy oldalon vagy webhelyen?