Змест маркетынгу

Як выкарыстоўваць спрайты CSS са светлым і цёмным рэжымам

CSS спрайты - гэта метад, які выкарыстоўваецца ў вэб-распрацоўцы для скарачэння колькасці HTTP запыты, зробленыя вэб-старонкай. Яны ўключаюць у сябе аб'яднанне некалькіх невялікіх малюнкаў у адзін большы файл выявы, а затым выкарыстанне CSS для адлюстравання пэўных раздзелаў гэтага малюнка ў выглядзе асобных элементаў на вэб-старонцы.

Асноўная перавага выкарыстання спрайтаў CSS заключаецца ў тым, што яны могуць дапамагчы палепшыць час загрузкі старонкі вэб-сайта. Кожны раз, калі малюнак загружаецца на вэб-старонку, патрабуецца асобны запыт HTTP, што можа запаволіць працэс загрузкі. Аб'яднаўшы некалькі малюнкаў у адзін спрайт, мы можам паменшыць колькасць HTTP-запытаў, неабходных для загрузкі старонкі. Гэта можа прывесці да больш хуткага і спагаднага вэб-сайта, асабліва для сайтаў з вялікай колькасцю маленькіх малюнкаў, такіх як значкі і кнопкі.

Выкарыстанне спрайтаў CSS таксама дазваляе нам скарыстацца перавагамі кэшавання браўзера. Калі карыстальнік наведвае вэб-сайт, яго браўзер кэшуе выяву спрайта пасля першага запыту. Гэта азначае, што наступныя запыты для асобных элементаў на вэб-старонцы, якія выкарыстоўваюць відарыс спрайта, будуць значна хутчэйшымі, паколькі браўзер ужо будзе мець малюнак у кэшы.

Спрайты CSS ужо не такія папулярныя, як калісьці

Спрайты CSS па-ранейшаму часта выкарыстоўваюцца для павышэння хуткасці сайта, хоць яны могуць быць не такімі папулярнымі, як калісьці. З-за высокай прапускной здольнасці, webp фарматы, Сціск выявы, сеткі дастаўкі кантэнту (CDN), лянівая нагрузка, і моцнае кэшаванне тэхналогій, мы не бачым у Інтэрнэце столькі спрайтаў CSS, колькі раней... хоць гэта ўсё яшчэ выдатная стратэгія. Гэта асабліва карысна, калі ў вас ёсць старонка, якая спасылаецца на мноства маленькіх малюнкаў.

Прыклад спрайта CSS

Каб выкарыстоўваць спрайты CSS, нам трэба вызначыць пазіцыю кожнай асобнай выявы ў файле выявы спрайтаў з дапамогай CSS. Звычайна гэта робіцца шляхам усталявання background-image і background-position уласцівасці для кожнага элемента на вэб-старонцы, які выкарыстоўвае выяву спрайта. Задаўшы каардынаты x і y выявы ў спрайце, мы можам адлюстроўваць асобныя выявы як асобныя элементы на старонцы. Вось прыклад... у адным файле выявы ёсць дзве кнопкі:

Прыклад спрайта CSS

Калі мы хочам, каб адлюстроўвалася выява злева, мы можам даць 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 для светлага і цёмнага рэжымаў

Адно цікавае выкарыстанне гэтага - са светлым і цёмным рэжымамі. Магчыма, у вас ёсць лагатып або малюнак з цёмным тэкстам, які не бачны на цёмным фоне. Я зрабіў гэты прыклад кнопкі, якая мае белы цэнтр для светлага рэжыму і цёмны цэнтр для цёмнага рэжыму.

css спрайт светлы цёмны

Выкарыстоўваючы 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. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.