Ինչպես իրականացնում են CSS sprite-ները էջում կամ կայքում:

CSS sprite-ները իրականացնում են մի քանի փոքր պատկերների միավորումը մեկ մեծ ֆայլի (sprite), ապա այդ մեծ պատկերից անհրաժեշտ մասի ցուցադրումը էջի տարրերում 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-block */
}

/* 1-ին պատկեր՝ սպրայթում 0, 0 հասցեում */
.icon-home {
  background-position: 0 0;
}

/* 2-րդ պատկեր՝ սպրայթում -40px, 0 հասցեում (օրինակ՝ եթե պատկերների միջև 8px տարածություն է) */
.icon-settings {
  background-position: -40px 0;
}

Առավելություններ՝

• HTTP հարցումների նվազեցում: Փոխարենը մի քանի հարցումների, բրաուզերը պետք է բեռնի միայն մեկ ֆայլ՝ սպրայթը, ինչը կրճատում է էջի բեռնման ժամանակը:
• Քեշավորում: Բեռնվում է մեկ մեծ ֆայլ՝ փոխարենը բազմաթիվ փոքր ֆայլերի:

Անբարենպաստություններ՝

• Ամենօրյա պահպանման բարդություն: Երբ ավելացվում կամ փոխվում են պատկերները, անհրաժեշտ է վերականգնել սպրայթը և թարմացնել CSS կոորդինատները:
• Չի հարմար մեծ կամ շատ տարբեր պատկերների համար: