CSS sprite деген эмне?

CSS sprite'лери — бул оптималдаштыруу ыкмасы, ал бир нече сүрөттү бир чоң сүрөткө бириктирүүгө мүмкүндүк берет. Ар бир сүрөттү жеке жүктөө ордуна, браузер бир чоң файлды жүктөйт жана андан кийин CSS мүнөздөмөлөрү background-image, background-position жана width/height аркылуу керектүү бөлүгүн көрсөтөт.

CSS sprite'лерди колдонуунун артыкчылыктары:

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

Колдонуу мисалы (HTML):

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

Колдонуу мисалы (CSS):

.icon {
  width: 32px; /* Белгилүүктүн кеңдиги */
  height: 32px; /* Белгилүүктүн бийиктиги */
  background-image: url('sprites.png'); /* Sprite файлынын жолу */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* "home" белгисинин позициясы sprite ичинде */
}

.icon.settings {
  background-position: -32px 0; /* "settings" белгисинин позициясы sprite ичинде */
}

Бул мисалда, sprites.png — "home" жана "settings" белгилери камтылган файл. background-position мүнөздөмөсү керектүү белгини көрсөтүү үчүн жылдырууну аныктайт.