Маркетингии Content

Чӣ тавр истифода бурдани Sprite CSS бо ҳолати равшан ва торик

CSS sprites як техникаест, ки дар таҳияи веб барои кам кардани шумораи HTTP дархостҳое, ки аз ҷониби саҳифаи интернетӣ дода мешаванд. Онҳо якҷоя кардани якчанд тасвирҳои хурдро дар як файли тасвири калонтар ва сипас бо истифода аз CSS барои намоиш додани қисмҳои мушаххаси ин тасвир ҳамчун унсурҳои алоҳида дар саҳифаи интернетӣ дар бар мегиранд.

Бартарии асосии истифодаи спрайтҳои CSS дар он аст, ки онҳо метавонанд ба беҳтар кардани вақти боркунии саҳифа барои вебсайт кӯмак расонанд. Ҳар дафъае, ки тасвир дар саҳифаи интернетӣ бор карда мешавад, он дархости алоҳидаи HTTP талаб мекунад, ки метавонад раванди боркуниро суст кунад. Бо муттаҳид кардани тасвирҳои сершумор дар як тасвири спрайт, мо метавонем шумораи дархостҳои HTTP-ро барои боркунии саҳифа кам кунем. Ин метавонад ба вебсайти тезтар ва ҷавобгӯтар оварда расонад, махсусан барои сайтҳое, ки тасвирҳои хурди зиёде ба монанди нишонаҳо ва тугмаҳо доранд.

Истифодаи спрайтҳои CSS инчунин ба мо имкон медиҳад, ки аз кэшкунии браузер бартарӣ гирем. Вақте ки корбар ба вебсайт ворид мешавад, браузери онҳо пас аз дархости аввал тасвири спрайтро кэш мекунад. Ин маънои онро дорад, ки дархостҳои минбаъда барои унсурҳои инфиродӣ дар саҳифаи веб, ки тасвири спрайтро истифода мебаранд, хеле зудтар хоҳанд буд, зеро браузер аллакай тасвирро дар кэши худ дорад.

Спрайтҳои CSS он қадар маъмул нестанд, ки қаблан буданд

Спрайтҳои CSS то ҳол маъмулан барои беҳтар кардани суръати сайт истифода мешаванд, гарчанде ки онҳо шояд он қадар маъмул набошанд. Аз сабаби фарохмаҷрои баланд, вебс форматҳо, фишурдани тасвир, шабакаҳои интиқоли мундариҷа (CDN), боркунии танбалва кэшкунии қавӣ технологияҳо, мо он қадар спрайтҳои CSS-ро намебинем, ки мо дар веб истифода мебурдем… гарчанде ки ин як стратегияи олӣ аст. Ин махсусан муфид аст, агар шумо саҳифае дошта бошед, ки ба шумораи зиёди тасвирҳои хурд ишора мекунад.

Намунаи CSS Sprite

Барои истифодаи спрайтҳои CSS, мо бояд мавқеи ҳар як тасвири инфиродӣ дар файли тасвири спрайтро бо истифода аз CSS муайян кунем. Ин одатан бо роҳи танзим кардани background-image ва background-position хосиятҳои ҳар як унсури саҳифаи веб, ки тасвири спрайтро истифода мебарад. Бо муайян кардани координатаҳои x ва y тасвир дар дохили спрайт, мо метавонем тасвирҳои алоҳидаро ҳамчун унсурҳои алоҳида дар саҳифа намоиш диҳем. Ин як мисол аст… мо дар як файли тасвир ду тугма дорем:

Намунаи CSS Sprite

Агар мо хоҳем, ки тасвири чап нишон дода шавад, мо метавонем 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 sprite равшании торик

Бо истифода аз 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. Ин метавонад ҷойгиркунии тасвирҳои инфиродӣ дар файли тасвири спрайтро душвор созад.

Douglas Karr

Douglas Karr CMO аз OpenINSIGHTS ва асосгузори Martech Zone. Дуглас ба даҳҳо стартапҳои бомуваффақияти MarTech кӯмак кардааст, дар тафтиши зарурӣ ба маблағи беш аз 5 миллиард доллар дар харид ва сармоягузории Martech кӯмак кардааст ва ба ширкатҳо дар татбиқ ва автоматикунонии стратегияҳои фурӯш ва маркетинги онҳо кӯмак мерасонад. Дуглас трансформатсияи рақамии дар сатҳи байналмилалӣ эътирофшуда ва коршинос ва сухангӯи MarTech мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

Мақолаҳо марбут

Бозгашт ба боло
наздик

Блоки рекламавӣ ошкор карда шуд

Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.