Садржај маркетинг

Како користити ЦСС спријтове са светлим и тамним режимом

ЦСС спрајтови су техника која се користи у веб развоју за смањење броја ХТТП захтеви које поставља веб страница. Они укључују комбиновање више малих слика у једну већу сликовну датотеку, а затим коришћење ЦСС-а за приказ одређених делова те слике као појединачних елемената на веб страници.

Примарна предност коришћења ЦСС спријтова је та што они могу помоћи да се побољша време учитавања странице за веб локацију. Сваки пут када се слика учита на веб страницу, она захтева посебан ХТТП захтев, што може успорити процес учитавања. Комбиновањем више слика у једну сприте слику, можемо смањити број ХТТП захтева потребних за учитавање странице. Ово може резултирати бржим и прилагодљивијим веб сајтом, посебно за сајтове са много малих слика као што су иконе и дугмад.

Коришћење ЦСС спријтова нам такође омогућава да искористимо предности кеширања претраживача. Када корисник посети веб локацију, његов претраживач ће кеширати слику сприте-а након првог захтева. То значи да ће накнадни захтеви за појединачне елементе на веб страници који користе слику спритеа бити много бржи јер ће претраживач већ имати слику у својој кеш меморији.

ЦСС спријтови нису толико популарни као што су некада били

ЦСС спријтови се и даље често користе за побољшање брзине сајта, иако можда нису толико популарни као што су некада били. Због великог пропусног опсега, вебп формати, компресија слике, мреже за испоруку садржаја (ЦДН), лењи утовар, и снажно кеширање технологије, не видимо толико ЦСС спријтова као некада на вебу... иако је то и даље одлична стратегија. Посебно је корисно ако имате страницу која се позива на мноштво малих слика.

Пример ЦСС Сприте

Да бисмо користили ЦСС спријтове, морамо да дефинишемо позицију сваке појединачне слике у датотеци сприте слике користећи ЦСС. Ово се обично ради подешавањем background-image background-position својства за сваки елемент на веб страници који користи сприте слику. Одређивањем к и и координата слике унутар сприте-а, можемо приказати појединачне слике као засебне елементе на страници. Ево примера... имамо два дугмета у једној датотеци слике:

Пример ЦСС Сприте

Ако желимо да се прикаже слика са леве стране, можемо да обезбедимо див са arrow-left као класа тако да координате приказују само ту страну:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

А ако желимо да прикажемо десну стрелицу, поставили бисмо класу за наш див на arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

ЦСС спријтови за светли и тамни режим

Једна занимљива употреба овога је са светлим и тамним режимима. Можда имате логотип или слику на којој се налази тамни текст који није видљив на тамној позадини. Урадио сам овај пример дугмета које има бели центар за светлосни режим и тамни центар за тамни режим.

цсс сприте светло тамно

Користећи ЦСС, могу да прикажем одговарајућу позадину слике на основу тога да ли корисник користи светли или тамни режим:

: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);
}

Изузетак: Клијенти е-поште можда ово не подржавају

Неки клијенти е-поште, као што је Гмаил, не подржавају ЦСС променљиве, које се користе у примеру који сам навео за пребацивање између светлих и тамних режима. То значи да ћете можда морати да користите алтернативне технике за пребацивање између различитих верзија сприте слике за различите шеме боја.

Друго ограничење је то што неки клијенти е-поште не подржавају одређена ЦСС својства која се обично користе у ЦСС спријтовима, као нпр. background-position. Ово може отежати позиционирање појединачних слика унутар датотеке сприте слике.

Douglas Karr

Douglas Karr је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

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