CSS sprite nima?

CSS sprite'lar — bu bir nechta rasmni bir katta rasmga birlashtirish imkonini beradigan optimallashtirish usulidir. Har bir rasmni alohida yuklash o'rniga, brauzer bitta katta faylni yuklaydi va keyin CSS xususiyatlari background-image, background-position va width/height yordamida bu rasmning kerakli qismini ko'rsatadi.

CSS sprite'larni ishlatishning afzalliklari:

• HTTP so'rovlar sonini kamaytirish: Bir faylni yuklash, ko'p faylni yuklashga qaraganda, serverga yukni kamaytiradi va sahifa rendering vaqtini tezlashtiradi.
• Kesh: Katta rasm brauzer tomonidan keshga olinadi, bu takroriy tashriflarda ishlashni yaxshilaydi.
• Fayl hajmini kamaytirish: Ba'zi hollarda, rasmni birlashtirish umumiy fayl hajmini biroz kamaytirishi mumkin, siqishni optimallashtirish orqali.

Misol uchun (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Misol uchun (CSS):

.icon {
  width: 32px; /* Ikona kengligi */
  height: 32px; /* Ikona balandligi */
  background-image: url('sprites.png'); /* Sprite fayli yo'li */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" ikonasi sprite ichidagi pozitsiyasi */
}

.icon.settings {
  background-position: -32px 0; /* "settings" ikonasi sprite ichidagi pozitsiyasi */
}

Ushbu misolda, sprites.png — "home" va "settings" ikonlarini o'z ichiga olgan sprite fayli. background-position xususiyati kerakli ikonani ko'rsatish uchun siljishni belgilaydi.