Junior
Mis on CSS sprite?
sobes.tech AI
Vastus AI-lt
CSS-prite — see on veebilehtede optimeerimise tehnika, kus mitu väikest pilti ühendatakse ühe suure pildiga. Seejärel kuvatakse CSS background-image ja background-position omaduste abil ainult selle suure pildi vajalik osa.
CSS-prite kasutamise eelised:
- HTTP-päringute arvu vähendamine: Selle asemel, et iga pilti eraldi laadida, teeb brauser ainult ühe päringu sprite'i laadimiseks. See kiirendab oluliselt lehe laadimisaega.
- Puhverdamine: Brauser salvestab sprite'i ja järgmistel päringutel ei ole vaja seda uuesti laadida.
- Renderdamise kiirendamine: Kuna kõik pildid on juba ühes failis, on brauseril lihtsam neid kuvada.
Näide kasutamiseks:
/* CSS element, mis kasutab sprite'i */
.icon {
background-image: url('sprites.png'); /* Teie sprite'i tee */
width: 32px; /* Kuvatava osa laius */
height: 32px; /* Kuvatava osa kõrgus */
}
/* Spraiti konkreetse pildi positsioneerimine */
.icon-home {
background-position: 0 0; /* "home" pildi ülemise vasaku nurga koordinaadid */
}
.icon-settings {
background-position: -32px 0; /* "settings" pildi ülemise vasaku nurga koordinaadid */
}
Spraiti struktuuri näide (pilt sprites.png):
| Pilt | Positsioon |
|---|---|
| icon-home | 0 0 |
| icon-settings | -32px 0 |
Puudused:
- Hoolduse keerukus: Ühe pildi muutmine nõuab kogu sprite'i uuesti loomist ja CSS-i uuendamist.
- Juurdepääsetavus: Vale kasutamine võib negatiivselt mõjutada kasutajate juurdepääsetavust piirangutega (näiteks, kui ikoonid on ainus teabe edastamise viis).
- Faili suurus: Kui sprite sisaldab palju pilte, võib kogu faili suurus suureneda.
Vaatamata mõningatele puudustele on CSS-prite endiselt tõhus optimeerimismeetod teatud olukordades, eriti ikoonide ja väikeste graafiliste elementide puhul. Viimastel aastatel on alternatiividena kasutusele võetud SVG-prite ja ikoonifontid.