Чӣ тавр истифода бурдани Sprite CSS бо ҳолати равшан ва торик
CSS sprites як техникаест, ки дар таҳияи веб барои кам кардани шумораи HTTP дархостҳое, ки аз ҷониби саҳифаи интернетӣ дода мешаванд. Онҳо якҷоя кардани якчанд тасвирҳои хурдро дар як файли тасвири калонтар ва сипас бо истифода аз CSS барои намоиш додани қисмҳои мушаххаси ин тасвир ҳамчун унсурҳои алоҳида дар саҳифаи интернетӣ дар бар мегиранд.
Бартарии асосии истифодаи спрайтҳои CSS дар он аст, ки онҳо метавонанд ба беҳтар кардани вақти боркунии саҳифа барои вебсайт кӯмак расонанд. Ҳар дафъае, ки тасвир дар саҳифаи интернетӣ бор карда мешавад, он дархости алоҳидаи HTTP талаб мекунад, ки метавонад раванди боркуниро суст кунад. Бо муттаҳид кардани тасвирҳои сершумор дар як тасвири спрайт, мо метавонем шумораи дархостҳои HTTP-ро барои боркунии саҳифа кам кунем. Ин метавонад ба вебсайти тезтар ва ҷавобгӯтар оварда расонад, махсусан барои сайтҳое, ки тасвирҳои хурди зиёде ба монанди нишонаҳо ва тугмаҳо доранд.
Истифодаи спрайтҳои CSS инчунин ба мо имкон медиҳад, ки аз кэшкунии браузер бартарӣ гирем. Вақте ки корбар ба вебсайт ворид мешавад, браузери онҳо пас аз дархости аввал тасвири спрайтро кэш мекунад. Ин маънои онро дорад, ки дархостҳои минбаъда барои унсурҳои инфиродӣ дар саҳифаи веб, ки тасвири спрайтро истифода мебаранд, хеле зудтар хоҳанд буд, зеро браузер аллакай тасвирро дар кэши худ дорад.
Спрайтҳои CSS он қадар маъмул нестанд, ки қаблан буданд
Спрайтҳои CSS то ҳол маъмулан барои беҳтар кардани суръати сайт истифода мешаванд, гарчанде ки онҳо шояд он қадар маъмул набошанд. Аз сабаби фарохмаҷрои баланд, вебс форматҳо, фишурдани тасвир, шабакаҳои интиқоли мундариҷа (CDN), боркунии танбалва кэшкунии қавӣ технологияҳо, мо он қадар спрайтҳои CSS-ро намебинем, ки мо дар веб истифода мебурдем… гарчанде ки ин як стратегияи олӣ аст. Ин махсусан муфид аст, агар шумо саҳифае дошта бошед, ки ба шумораи зиёди тасвирҳои хурд ишора мекунад.
Намунаи CSS Sprite
Барои истифодаи спрайтҳои CSS, мо бояд мавқеи ҳар як тасвири инфиродӣ дар файли тасвири спрайтро бо истифода аз CSS муайян кунем. Ин одатан бо роҳи танзим кардани background-image
ва background-position
хосиятҳои ҳар як унсури саҳифаи веб, ки тасвири спрайтро истифода мебарад. Бо муайян кардани координатаҳои x ва y тасвир дар дохили спрайт, мо метавонем тасвирҳои алоҳидаро ҳамчун унсурҳои алоҳида дар саҳифа намоиш диҳем. Ин як мисол аст… мо дар як файли тасвир ду тугма дорем:
Агар мо хоҳем, ки тасвири чап нишон дода шавад, мо метавонем div-ро бо он таъмин кунем arrow-left
ҳамчун синф, координатҳо танҳо он тарафро нишон медиҳанд:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ва агар мо хоҳем, ки тирчаи ростро нишон диҳем, мо синфро барои div-и худ муқаррар мекунем arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites барои ҳолати равшан ва торик
Як истифодаи ҷолиби ин бо режимҳои равшан ва торик аст. Шояд шумо логотип ё тасвире дошта бошед, ки дар он матни торик мавҷуд аст, ки дар заминаи торик намоён нест. Ман ин мисоли тугмаеро кардам, ки дорои маркази сафед барои ҳолати рӯшноӣ ва маркази торикӣ барои ҳолати торик аст.
Бо истифода аз CSS, ман метавонам заминаи тасвири мувофиқро дар асоси он, ки корбар режими рӯшноӣ ё торикиро истифода мебарад, нишон диҳам:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
Истисно: Муштариёни почтаи электронӣ метавонанд инро дастгирӣ накунанд
Баъзе муштариёни почтаи электронӣ, ба монанди Gmail, тағирёбандаҳои CSS-ро дастгирӣ намекунанд, ки дар мисоли ман барои гузаштан байни режимҳои равшан ва торик истифода мешаванд. Ин маънои онро дорад, ки ба шумо лозим меояд, ки усулҳои алтернативӣ истифода баред, то байни версияҳои гуногуни тасвири спрайт барои схемаҳои рангҳои гуногун гузаред.
Маҳдудияти дигар ин аст, ки баъзе муштариёни почтаи электронӣ хосиятҳои муайяни CSS-ро, ки одатан дар спрайтҳои CSS истифода мешаванд, дастгирӣ намекунанд, масалан background-position
. Ин метавонад ҷойгиркунии тасвирҳои инфиродӣ дар файли тасвири спрайтро душвор созад.