Kaip įgyvendinami CSS sprite'ai puslapyje ar…

CSS sprite yra realizuojami sujungus kelis mažus vaizdus į vieną didelį failą (sprite), o tada rodyti reikiamą šio didelio vaizdo dalį puslapio elementuose naudodami CSS.

Pagrindiniai žingsniai:

Sukurkite sprite: Visus vaizdus, kuriuos reikia sujungti (piktogramas, mažus fonus ir t.t.), įkelkite į vieną vaizdą. Tai galima padaryti rankiniu būdu grafinio redaktoriaus arba automatiniais įrankiais/sprite generatoriais.
Naudokite CSS: Kiekvienam elementui, kuriame reikia "įterpti" sprite iš vaizdo, nustatykite šias CSS savybes:
- background-image: Nurodykite sprite failo kelią.
- background-repeat: no-repeat;: Išjunkite pasikartojimą foniniam vaizdui.
- background-position: Nustato sprite dalies viršutinio kairiojo kampo koordinates. Šios koordinatės nurodo poslinkį horizontaliai ir vertikaliai nuo elemento viršutinio kairiojo kampo.
- width ir height: Nustato srities matmenis, kuriame bus rodomas sprite dalis. Šie matmenys dažniausiai atitinka originalios piktogramos ar vaizdo dydį.

Pavyzdys naudoti dviem piktogramoms sprite:

/* Sprite failas: icons.png */

.icon {
  background-image: url('icons.png'); // Kelias iki sprite failo
  background-repeat: no-repeat; // Nenaudoti pasikartojimo
  width: 32px; // elemento plotis
  height: 32px; // elemento aukštis
  display: inline-block; /* arba kitas būdas padaryti elementą blokiniu arba inline-blokiniu */
}

/* Pirmoji piktograma: sprite 0, 0 adresu */
.icon-home {
  background-position: 0 0;
}

/* Antroji piktograma: sprite -40px, 0 adresu (pavyzdžiui, jei tarp piktogramų 8px tarpas) */
.icon-settings {
  background-position: -40px 0;
}

Privalumai:

HTTP užklausų sumažinimas: Vietoj kelių užklausų naršyklė turi įkelti tik vieną sprite failą, tai sumažina puslapio įkėlimo laiką.
Klaidų išsaugojimas: Saugo vieną didelį failą vietoj daugelio mažų.

Trūkumai:

Priežiūros sudėtingumas: Pridėjus/pakeitus vaizdus, reikia perkurti sprite ir atnaujinti CSS koordinates.
Netinka dideliems arba labai skirtingiems vaizdams.

Kaip įgyvendinami CSS sprite'ai puslapyje ar svetainėje?