Kā CSS sprite ir īstenoti lapā vai tīmekļa vietnē…

CSS sprite ir metode, kā apvienot vairākus attēlus vienā lielā. To īsteno ar CSS, kontrolējot nepieciešamās daļas redzamību, izmantojot background-image, background-position un background-repeat īpašības.

Priekšrocības:

Samazina HTTP pieprasījumu skaitu. Tā vietā, lai ielādētu daudzus mazus attēlus, tiek ielādēts viens liels attēls.
Paātrina lapas ielādi. Mazāk pieprasījumu serverim, ātrāka renderēšana.
Taupa trafiku. Kopējais faila lielums bieži ir mazāks nekā atsevišķu attēlu summa.

Realizācija:

Sprite izveide: Attēlu apvienošana vienā ar grafikas redaktoriem vai speciāliem tiešsaistes rīkiem/krātuviem (piemēram, Webpack ar css-spritesmith-plugin).

CSS: Elementiem, kas izmanto attēlus no sprite, tiek piemēroti šādi stili:

.icon {
  background-image: url('path/to/sprite.png'); /* Ceļš uz sprite failu */
  background-repeat: no-repeat; /* Attēls netiek atkārtots */
  display: block; /* vai inline-block, atkarībā no elementa */
  width: 32px; /* Nepieciešamās ikonas platums */
  height: 32px; /* Nepieciešamās ikonas augstums */
}

.icon-home {
  background-position: 0 0; /* Pozīcija nepieciešamajai ikonas daļai "Māja" */
}

.icon-settings {
  background-position: -32px 0; /* Pozīcija nepieciešamajai ikonas daļai "Iestatījumi" */
}

CSS kodā .icon nosaka kopējās īpašības visiem elementiem, kas izmanto sprite. Klases, piemēram, .icon-home un .icon-settings, nosaka konkrētu pozīciju sprite iekšienē ar background-position.

Kā CSS sprite ir īstenoti lapā vai tīmekļa vietnē?