CSS sprite nədir?

CSS sprite-lər — bir neçə şəkli bir böyük şəkil halına gətirməyə imkan verən optimallaşdırma metodudur. Hər bir şəkli ayrıca yükləmək əvəzinə, brauzer bir böyük fayl yükləyir və sonra CSS xüsusiyyətləri background-image, background-position və width/height istifadə edərək bu şəkilin lazım olan hissəsini göstərir.

CSS sprite-lərdən istifadə etmənin üstünlükləri:

• HTTP sorğularının sayını azaltmaq: Bir fayl yükləmək çox sayda fayl yükləməkdən daha az yük yaradır və səhifənin render vaxtını sürətləndirir.
• Keşləmə: Böyük şəkil brauzer tərəfindən keşlənir, bu da təkrar ziyarətlərdə performansı yaxşılaşdırır.
• Fayl ölçüsünü azaltmaq: Bəzi hallarda şəkillərin birləşdirilməsi ümumi fayl ölçüsünü kiçiltməyə səbəb ola bilər, sıxışdırma optimizasiyası ilə.

İstifadə nümunəsi (HTML):

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

İstifadə nümunəsi (CSS):

.icon {
  width: 32px; /* İkonun eni */
  height: 32px; /* İkonun hündürlüyü */
  background-image: url('sprites.png'); /* Sprite faylının yolu */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" ikonunun sprite içindəki mövqeyi */
}

.icon.settings {
  background-position: -32px 0; /* "settings" ikonunun sprite içindəki mövqeyi */
}

Bu nümunədə, sprites.png — "home" və "settings" ikonlarını ehtiva edən sprite faylıdır. background-position xüsusiyyəti, istənilən ikonu göstərmək üçün köçürməni müəyyən edir.