Kā tiek īstenoti CSS sprite uz lapas vai vietnes…

CSS sprite tiek izpildās, apvienojot vairākus mazus attēlus vienā lielā failā (sprite), pēc tam attēlojot nepieciešamo šī lielā attēla daļu lapas elementos ar CSS.

Galvenie soļi:

Izveidot sprite: Visi attēli, kurus nepieciešams apvienot (ikoni, mazi foni utt.), tiek novietoti vienā attēlā. To var izdarīt manuāli grafiskajā redaktorā vai ar automātiskiem rīkiem/sprite ģeneratoriem.
CSS lietošana: Katram elementam, kurā nepieciešams "ievietot" sprite no attēla, tiek noteiktas šādas CSS īpašības:
- background-image: Norāda ceļu uz sprite failu.
- background-repeat: no-repeat;: Izslēdz fonā atkārtošanos.
- background-position: Nosaka sprite daļas augšējā kreisā stūra koordinātas. Šīs koordinātas norāda pārvietojumu horizontāli un vertikāli no elementa augšējā kreisā stūra.
- width un height: Nosaka apgabala izmērus, kurā tiks attēlots sprite daļa. Šie izmēri parasti atbilst sākotnējās ikonas vai attēla izmēriem.

Piemērs ar divām ikonām sprite:

/* Sprite fails: icons.png */

.icon {
  background-image: url('icons.png'); // Ceļš uz sprite failu
  background-repeat: no-repeat; // Bez atkārtošanās
  width: 32px; // Elementa platums
  height: 32px; // Elementa augstums
  display: inline-block; /* vai cits veids, kā padarīt elementu bloku vai inline-bloku */
}

/* Ikona 1: atrodas sprite 0, 0 adresē */
.icon-home {
  background-position: 0 0;
}

/* Ikona 2: atrodas sprite -40px, 0 adresē (piemēram, ja starp ikonām ir 8px atstarpe) */
.icon-settings {
  background-position: -40px 0;
}

Priekšrocības:

HTTP pieprasījumu samazināšana: Tā vietā, lai būtu vairākas pieprasījumi, pārlūkam ir jāielādē tikai viens sprite fails, kas saīsina lapas ielādes laiku.
Kešatmiņa: Saglabā vienu lielu failu, nevis daudzus mazu failus.

Trūkumi:

Uzturēšanas sarežģītība: Pievienojot vai mainot attēlus, ir nepieciešams pārveidot sprite un atjaunināt CSS koordinātas.
Nepiemērots lieliem vai ļoti atšķirīgiem attēliem.

Kā tiek īstenoti CSS sprite uz lapas vai vietnes?