Sobes.tech
Müsahibə Köməyi
Resurslar
Müsahibəyə Hazırlıq
Resurslar
İş Axtarışı
Resurslar
Hüquqi
Suallara qayıdaq
Junior

Səhifədə və ya vebsaytda CSS sprite-ləri necə həyata keçirilir?

sobes.tech Süni İntellekt

AI-dan cavab

CSS sprite-ləri bir neçə şəkli bir böyük şəkil halına gətirməklə həyata keçirilir. Əldə olunan şəkil daha sonra səhifədə müxtəlif elementlərin fonu kimi istifadə olunur və bu şəkil içində görünən sahənin (sprite) mövqeyi background-image və background-position xüsusiyyətləri ilə idarə olunur.

İcra prosesi aşağıdakı addımları əhatə edir:

  1. Şəkillərin birləşdirilməsi: Bir neçə kiçik şəkil (ikonlar, düymələr, interfeys hissələri) qrafik redaktor və ya sprite yaratmaq üçün xüsusi alət istifadə edilərək bir fayla (məsələn, PNG və ya JPG) birləşdirilir.

  2. Ölçülərin və mövqelərin müəyyənləşdirilməsi: Hər bir şəkil üçün onun ölçüləri (eni və hündürlüyü) və mövqeyi (yuxarı sol küncün koordinatları) ümumi sprite daxilində müəyyən edilir.

  3. CSS stillərinin tətbiqi: CSS-də sprite istifadə edən elementlər üçün stillər təyin edilir.

    • background-image: Sprite faylının yolunu göstərir.
    • background-repeat: no-repeat olaraq təyin edilir ki, sprite təkrarlanmasın.
    • width və height: Konkret sprite-in göstəriləcəyi sahənin ölçülərini müəyyən edir (orijinal kiçik şəkilin ölçüləri).
    • background-position: Hansı hissənin görünəcək olduğunu müəyyən edir. Dəyər (məsələn, 0 0, -50px 0, center top) görünən sahənin yuxarı sol küncünün sprite daxilindəki köçürməsini göstərir.

İstifadə nümunəsi:

/* Ümumi sprite üçün stillər */
.sprite {
  background-image: url('path/to/your/sprite.png'); /* Sprite faylının yolu */
  background-repeat: no-repeat; /* Təkrarlanmanı ləğv et */
  display: inline-block; /* və ya başqa uyğun display */
}

/* Xüsusi ikonlar üçün stillər */
.icon-home {
  width: 32px; /* "ev" ikonunun eni */
  height: 32px; /* "ev" ikonunun hündürlüyü */
  background-position: 0 0; /* "ev" ikonunun sprite daxilindəki mövqeyi */
}

.icon-settings {
  width: 24px; /* "tənzimləmələr" ikonunun eni */
  height: 24px; /* "tənzimləmələr" ikonunun hündürlüyü */
  background-position: -40px 0; /* "tənzimləmələr" ikonunun sprite daxilindəki mövqeyi (X oxu üzrə köçürmə) */
}

HTML-də müvafiq elementlər .sprite sinfi və istənilən ikona xüsusi sinfi ilə olacaq:

<span class="sprite icon-home"></span>
<span class="sprite icon-settings"></span>

CSS sprite-lərinin üstünlükləri:

  • HTTP sorğularının sayını azaltmaq: Bir böyük şəkil yüklənir, çox kiçik şəkillər yerinə.
  • Səhifənin yüklənmə sürətini artırmaq: Daha az sorğu = daha sürətli yükləmə.
  • Keşləmə: Sprite şəkili brauzer tərəfindən keşlənə bilər, bu da təkrar ziyarətləri sürətləndirir.

Əksiklikləri:

  • Dəstək və baxım çətinliyi: Bir şəkli dəyişdirmək və ya əlavə etmək bütün sprite-in yenidən yaradılmasını və CSS-in yenilənməsini tələb edir.
  • Dizaynın cavabdehliyi ilə bağlı çətinliklər: Sprite-lərin ölçüsünü dəyişmək çətin ola bilər.
  • Fayl ölçüsü: Əgər sprite çox şəkil və ya çox böyük şəkil ehtiva edirsə, onun ölçüsü əhəmiyyətli dərəcədə arta bilər.

Müasir frontend inkişafında sprite-lərin avtomatlaşdırılması üçün alətlər və ya SVG sprite-lər və ya font ikonların istifadəsi kimi digər texnikalar geniş istifadə olunur və öz üstünlüklərinə malikdir.

ƏvvəlkiNövbəti