Veb səhifədə və ya saytında CSS sprite-ləri necə…

CSS sprite-lər, bir neçə şəkli bir böyük şəkil halına gətirmək metodudur. Bu, CSS vasitəsilə həyata keçirilir və böyük şəkilin lazım olan hissəsinin görünürlüğü background-image, background-position və background-repeat xüsusiyyətləri ilə idarə olunur.

Üstünlüklər:

HTTP sorğularının sayını azaltmaq. Bir neçə kiçik şəkil yerinə, bir böyük şəkil yüklənir.
Səhifənin yüklənmə sürətini artırmaq. Daha az sorğu, daha sürətli render.
Trafikdən qənaət. Ümumi fayl ölçüsü, adətən, ayrı-ayrı şəkillərin cəmindən kiçik olur.

İcra:

Sprite yaradılması: Şəkilləri qrafik redaktorlar və ya xüsusi onlayn alətlər/kompilyatorlar (məsələn, Webpack ilə css-spritesmith-plugin) istifadə edərək birləşdirmək.

CSS: Sprite-dan istifadə edən elementlər üçün aşağıdakı stillər tətbiq olunur:

.icon {
  background-image: url('path/to/sprite.png'); /* Sprite faylının yolu */
  background-repeat: no-repeat; /* Şəkil təkrarlanmayacaq */
  display: block; /* və ya inline-block, elementə görə */
  width: 32px; /* Lazımi ikonanın eni */
  height: 32px; /* Lazımi ikonanın hündürlüyü */
}

.icon-home {
  background-position: 0 0; /* "Ev" ikonunun lazım olan hissəsinin mövqeyi */
}

.icon-settings {
  background-position: -32px 0; /* "Ayarlar" ikonunun lazım olan hissəsinin mövqeyi */
}

Verilən CSS kodunda .icon sprite istifadə edən bütün elementlər üçün ümumi xüsusiyyətləri müəyyən edir. .icon-home və .icon-settings kimi sinflər background-position istifadə edərək sprite içində lazım olan görüntünün dəqiq yerini müəyyən edir.

Veb səhifədə və ya saytında CSS sprite-ləri necə həyata keçirilir?