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

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

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

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

Иштөө:

Sprite түзүү: Сүрөттөрдү графикалык редакторлор же атайын онлайн инструменттер/жыймоктор (мисалы, Webpack менен css-spritesmith-plugin) колдонуп бириктирүү.

CSS: Sprite'тан сүрөт колдонгон элементтер үчүн төмөнкү стильдер колдонулат:

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

.icon-home {
  background-position: 0 0; /* "Башкы" иконанын керектүү бөлүгүнүн жайгашуусу */
}

.icon-settings {
  background-position: -32px 0; /* "Настройкалар" иконанын керектүү бөлүгүнүн жайгашуусу */
}

Берилген CSS кодунда .icon бардык sprite колдонгон элементтер үчүн жалпы касиеттерди аныктайт. .icon-home жана .icon-settings сыяктуу класстар background-position аркылуу sprite ичиндеги керектүү сүрөттүн так ордун аныктайт.

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