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

CSS sprite on meetod, kuidas ühendada mitu pilti üheks suureks. Seda rakendatakse CSS abil, kontrollides vajaliku osa nähtavust background-image, background-position ja background-repeat omaduste kaudu.

Eelised:

• Vähendab HTTP-päringute arvu. Selle asemel, et laadida palju väikeseid pilte, laaditakse üks suur pilt.
• Kiirendab lehe laadimist. Vähem päringuid serverile, kiiremat renderdamist.
• Säästab liiklust. Ühine failisuurus on sageli väiksem kui eraldi piltide summa.

Rakendamine:

1. Sprite loomine: Piltide ühendamine üheks kasutades graafikareddaktoreid või spetsiaalseid veebipõhiseid tööriistu/kogureid (näiteks Webpack koos css-spritesmith-plugin).

2. CSS: Elementidele, mis kasutavad sprite'ist pilte, rakendatakse järgmisi stiile:

   .icon {
     background-image: url('path/to/sprite.png'); /* Tee sprite faili teekond */
     background-repeat: no-repeat; /* Pilt ei korduks */
     display: block; /* või inline-block, sõltuvalt elemendist */
     width: 32px; /* Vajalik ikooni laius */
     height: 32px; /* Vajalik ikooni kõrgus */
   }
   
   .icon-home {
     background-position: 0 0; /* Vajalik ikooni "Kodu" osa positsioon */
   }
   
   .icon-settings {
     background-position: -32px 0; /* Vajalik ikooni "Seaded" osa positsioon */
   }
   

CSS-koodis .icon määrab kõigile sprite'i kasutavatele elementidele ühised omadused. Klassid nagu .icon-home ja .icon-settings määravad konkreetse positsiooni sprite'i sees background-position abil.