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

CSS sprite-ləri bir neçə kiçik şəkli birləşdirərək böyük bir fayl (sprite) yaratmaq və sonra bu böyük şəkilin lazım olan hissəsini CSS vasitəsilə səhifə elementlərində göstərmək yolu ilə həyata keçirilir.

Əsas addımlar:

Sprite yaradılması: Birləşdirilməli olan bütün şəkillər (ikonkalar, kiçik fonlar və s.) bir şəkil daxilində yerləşdirilir. Bu, əl ilə qrafik redaktorunda və ya avtomatik vasitələr/generatorlar istifadə edilərək edilə bilər.
CSS tətbiqi: Hər bir element üçün, oradan sprite-dən şəkil "daxil ediləcək" şəkildə aşağıdakı CSS xüsusiyyətləri təyin edilir:
- background-image: sprite faylının yolunu göstərir.
- background-repeat: no-repeat;: fon şəkilinin təkrarlanmasını deaktiv edir.
- background-position: sprite-in göstəriləcək hissəsinin sol yuxarı künc koordinatlarını müəyyən edir. Bu koordinatlar elementin sol yuxarı küncündən üfüqi və şaquli hərəkəti göstərir.
- width və height: sprite-in hissəsinin göstəriləcəyi sahənin ölçüsünü təyin edir. Bu ölçülər adətən orijinal ikon və ya şəkil ölçülərinə uyğundur.

İki ikon üçün sprite istifadə nümunəsi:

/* Sprite faylı: icons.png */

.icon {
  background-image: url('icons.png'); // Fayl yolu
  background-repeat: no-repeat; // Təkrarlamamaq
  width: 32px; // Elementin eni
  height: 32px; // Elementin hündürlüyü
  display: inline-block; /* və ya başqa üsul ilə element blok/inline-block etmək */
}

/* İkon 1: sprite-də 0, 0 ünvanında */
.icon-home {
  background-position: 0 0;
}

/* İkon 2: sprite-də -40px, 0 ünvanında (məsələn, ikonlar arasında 8px boşluq varsa) */
.icon-settings {
  background-position: -40px 0;
}

Üstünlüklər:

HTTP sorğularının sayını azaltmaq: Bir neçə sorğu yerinə, brauzer yalnız bir sprite faylını yükləməlidir ki, bu da səhifənin yüklənmə vaxtını azaldır.
Keşləmə: Bir böyük fayl keşdə saxlanılır, çox kiçik fayllar yerinə.

Çatışmazlıqlar:

Dəstək və baxım çətinliyi: Şəkillər əlavə ediləndə və ya dəyişdiriləndə, sprite yenidən yaradılmalı və CSS koordinatları yenilənməlidir.
Böyük və ya çox fərqli şəkillər üçün uyğun deyil.

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