Kuidas rakendatakse CSS sprite-sid lehel või…

CSS sprite'id realiseeritakse, ühendades mitu väikest pilti üheks suureks failiks (sprite), ning seejärel kuvatakse selle suure pildi vajalik osa lehe elementidel CSS-i abil.

Peamised sammud:

Sprite'i loomine: Kõik pildid, mida on vaja ühendada (ikoonid, väikesed taustad jms), paigutatakse ühte pildifaili. Seda saab teha käsitsi graafilise redaktori või automaatsete tööriistade/sprite generaatorite abil.
CSS-i kasutamine: Iga elemendi jaoks, kuhu on vaja "sisestada" sprite, määratakse järgmised CSS omadused:
- background-image: Näitab sprite faili teed.
- background-repeat: no-repeat;: Keelab taustapildi kordumise.
- background-position: Määrab sprite osa ülemise vasaku nurga koordinaadid. Need koordinaadid näitavad nihkeid horisontaalselt ja vertikaalselt elemendi ülemisest vasakust nurgast.
- width ja height: Määravad ala mõõtmed, kus kuvatakse sprite osa. Need mõõtmed vastavad tavaliselt algse ikooni või pildi suurusele.

Näide kahe ikooni kasutamisest sprite'is:

/* Sprite fail: icons.png */

.icon {
  background-image: url('icons.png'); // Sprite faili tee
  background-repeat: no-repeat; // Ei korduda
  width: 32px; // Elemendi laius
  height: 32px; // Elemendi kõrgus
  display: inline-block; /* Või muu meetod, kuidas teha element blokiks või inline-blokiks */
}

/* Ikon 1: sprite'is asub aadressil 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Ikon 2: sprite'is asub aadressil -40px, 0 (näiteks, kui ikoonide vahel on 8px vahe) */
.icon-settings {
  background-position: -40px 0;
}

Eelised:

HTTP-päringute arvu vähendamine: Selle asemel, et teha mitu päringut, laadib brauser ainult ühe sprite faili, mis kiirendab lehe laadimisaega.
Puhverdamine: Salvestab ühe suure faili, mitte mitmeid väikeseid.

Puudused:

Hoolduse keerukus: Piltide lisamisel/muutmisel on vaja sprite uuesti genereerida ja CSS koordinaadid uuendada.
Ei sobi suurte või väga erinevate piltide jaoks.

Kuidas rakendatakse CSS sprite-sid lehel või veebisaidil?