Содржина Маркетинг

Како да користите CSS Sprites со светли и темни режими

CSS sprites се техника која се користи во развојот на веб за да се намали бројот на HTTP барања направени од веб-страница. Тие вклучуваат комбинирање на повеќе мали слики во една поголема датотека со слики и потоа користење CSS за прикажување на одредени делови од таа слика како поединечни елементи на веб-страницата.

Примарната придобивка од користењето на CSS sprites е тоа што тие можат да помогнат да се подобри времето на вчитување на страницата за веб-локација. Секој пат кога сликата се вчитува на веб-страница, бара посебно барање за HTTP, што може да го забави процесот на вчитување. Со комбинирање на повеќе слики во една sprite слика, можеме да го намалиме бројот на HTTP барања потребни за вчитување на страницата. Ова може да резултира со побрза и поодговорна веб-локација, особено за сајтови со многу мали слики како икони и копчиња.

Користењето на CSS sprites, исто така, ни овозможува да ги искористиме предностите на кеширањето на прелистувачот. Кога корисникот посетува веб-локација, неговиот прелистувач ќе ја кешира сликата на sprite по првото барање. Ова значи дека последователните барања за поединечни елементи на веб-страницата што ја користат сликата на sprite ќе бидат многу побрзи бидејќи прелистувачот веќе ќе ја има сликата во својата кеш меморија.

CSS Sprites не се толку популарни како што беа некогаш

CSS sprites сè уште вообичаено се користат за подобрување на брзината на страницата, иако можеби не се толку популарни како некогаш. Поради високиот пропусен опсег, веб-страница формати, компресија на слика, мрежи за испорака на содржина (CDN), мрзливо вчитување, и силно кеширање технологии, не гледаме толку CSS sprites како порано на интернет... иако тоа е сепак одлична стратегија. Тоа е особено корисно ако имате страница која упатува на мноштво мали слики.

CSS Sprite Пример

За да користиме CSS sprites, треба да ја дефинираме позицијата на секоја поединечна слика во датотеката со слики со sprite користејќи CSS. Ова обично се прави со поставување на background-image background-position својства за секој елемент на веб-страницата што ја користи sprite сликата. Со одредување на x и y координатите на сликата во рамките на sprite, можеме да прикажеме поединечни слики како посебни елементи на страницата. Еве еден пример... имаме две копчиња во една датотека со слика:

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 променливи, кои се користат во примерот што го дадов за префрлање помеѓу светли и темни режими. Ова значи дека можеби ќе треба да користите алтернативни техники за да се префрлате помеѓу различни верзии на sprite сликата за различни шеми на бои.

Друго ограничување е тоа што некои клиенти за е-пошта не поддржуваат одредени CSS својства кои вообичаено се користат во CSS sprites, како на пр. background-position. Ова може да го отежне поставувањето на поединечни слики во датотеката со слики sprite.

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основачот на Martech Zone. Даглас им помогна на десетици успешни стартапи на MarTech, помогна во длабинската анализа од над 5 милијарди американски долари за аквизиции и инвестиции на Martech и продолжува да им помага на компаниите во имплементацијата и автоматизирањето на нивните стратегии за продажба и маркетинг. Даглас е меѓународно признат експерт и говорник за дигитална трансформација и MarTech. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

поврзани написи

Вратете се на почетокот копче
Затвори

Откриен е блок за рекламирање

Martech Zone може да ви ја обезбеди оваа содржина без трошоци бидејќи ја монетизираме нашата страница преку приходи од реклами, врски со партнери и спонзорства. Ќе ни биде благодарно ако го отстраните вашиот блокатор на реклами додека ја гледате нашата страница.