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 барои нишон додани нишони лозим кӯчишро муайян мекунад.