Бетте же веб-сайтта CSS sprite'лерин кантип ишке ашырылат?

CSS-спрайттарды бир нече кичинекей сүрөттөрдү бир чоң файлга (спрайт) бириктирүү жолу менен ишке ашырылат жана андан соң бул чоң сүрөттүн керектүү бөлүгүн баракчадагы элементтерде CSS аркылуу көрсөтүү.

Негизги кадамдар:

1. Спрайт түзүү: Бардык бириктирүү керек болгон сүрөттөр (иконкалар, кичинекей фондар ж.б.) бир сүрөткө жайгаштырылат. Бул ишти кол менен графикалык редактордо жасоого болот же автоматтык инструменттер/спрайт генераторлору аркылуу.

2. CSS колдонуу: Спрайттан сүрөттү "коёрун" керек болгон ар бир элемент үчүн төмөнкү CSS касиеттерин белгилөө:

   • background-image: Спрайт файлына жолду көрсөтөт.
   • background-repeat: no-repeat;: Фон сүрөтүн кайталоону өчүрөт.
   • background-position: Спрайттын керектүү бөлүгүнүн үстүңкү сол бурчуна координаттарды белгилейт. Бул координаттар горизонтал жана вертикал багыттарда жылдырууну көрсөтөт.
   • width жана height: Спрайттын бөлүгүн көрсөтүү үчүн өлчөмдөрдү белгилейт. Бул өлчөмдөр адатта түпкү иконанын же сүрөттүн өлчөмдөрүнө туура келет.

Ике иконка үчүн мисал:

/* Спрайт-файл: icons.png */

.icon {
  background-image: url('icons.png'); // Спрайт файлына жол
  background-repeat: no-repeat; // Кайталоону өчүрүү
  width: 32px; // Элементтин кеңдиги
  height: 32px; // Элементтин бийиктиги
  display: inline-block; /* же башка ыкма элементти блоктук/inline-блоктук кылуу үчүн */
}

/* Иконка 1: спрайтта 0, 0 дарегинде */
.icon-home {
  background-position: 0 0;
}

/* Иконка 2: спрайтта -40px, 0 дарегинде (мисалы, аралыктар 8px болсо) */
.icon-settings {
  background-position: -40px 0;
}

Артыкчылыктары:

• HTTP суроолорду азайтуу: Бир нече суроо-талаптын ордуна браузер бир файлды жүктөйт, бул баракчаны жүктөө убактысын кыскартат.
• Кэшке сактоо: Бир чоң файл сакталат, ал эми көптөгөн кичинекей файлдар эмес.

Кемчиликтери:

• Колдоо татаалдыгы: Сүрөттөрдү кошуу/өзгөртүү учурунда спрайтты кайра түзүү жана CSS координаттарын жаңыртуу керек.
• Ири же айырмаланган сүрөттөр үчүн ылайыктуу эмес.