Hvernig á að nota CSS Sprites með ljósum og dökkum ham

CSS sprites eru tækni sem notuð er í vefþróun til að fækka HTTP beiðnir frá vefsíðu. Þeir fela í sér að sameina margar litlar myndir í eina stærri myndskrá og nota síðan CSS til að sýna tiltekna hluta þeirrar myndar sem einstaka þætti á vefsíðunni.

Helsti ávinningurinn af því að nota CSS sprites er að þeir geta hjálpað til við að bæta hleðslutíma síðu fyrir vefsíðu. Í hvert skipti sem mynd er hlaðin inn á vefsíðu, krefst hún sérstakrar HTTP beiðni, sem getur hægt á hleðsluferlinu. Með því að sameina margar myndir í eina sprite mynd getum við dregið úr fjölda HTTP beiðna sem þarf til að hlaða síðunni. Þetta getur skilað sér í hraðari og móttækilegri vefsíðu, sérstaklega fyrir síður með mörgum litlum myndum eins og táknum og hnöppum.

Notkun CSS sprites gerir okkur einnig kleift að nýta skyndiminni vafra. Þegar notandi heimsækir vefsíðu mun vafrinn hans geyma sprite myndina eftir fyrstu beiðnina. Þetta þýðir að síðari beiðnir um einstaka þætti á vefsíðunni sem nota sprite myndina verða mun hraðari þar sem vafrinn mun þegar hafa myndina í skyndiminni.

CSS Sprites eru ekki eins vinsælir og þeir voru einu sinni

CSS sprites eru enn almennt notaðir til að bæta síðuhraða, þó að þeir séu kannski ekki eins vinsælir og þeir voru einu sinni. Vegna mikillar bandbreiddar, webp snið, myndþjöppun, efnisflutningsnet (CDN), latur hleðslaog sterk skyndiminni tækni, sjáum við ekki eins marga CSS sprites og við gerðum á vefnum ... þó það sé samt frábær stefna. Það er sérstaklega gagnlegt ef þú ert með síðu sem vísar til fjölda lítilla mynda.

CSS Sprite dæmi

Til að nota CSS sprites þurfum við að skilgreina staðsetningu hverrar einstakrar myndar innan sprite myndskráarinnar með CSS. Þetta er venjulega gert með því að stilla background-image og background-position eiginleikar fyrir hvern þátt á vefsíðunni sem notar sprite myndina. Með því að tilgreina x og y hnit myndarinnar innan sprite, getum við birt einstakar myndir sem aðskilda þætti á síðunni. Hér er dæmi ... við höfum tvo hnappa í einni myndskrá:

Ef við viljum að myndin til vinstri sé sýnd getum við útvegað div arrow-left sem flokkur þannig að hnitin sýna aðeins þá hlið:

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

Og ef við viljum sýna hægri örina myndum við stilla flokkinn fyrir divið okkar á arrow-right.

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

CSS Sprites fyrir ljósa og dökka stillingu

Ein áhugaverð notkun þessa er með ljósum og dökkum stillingum. Kannski ertu með lógó eða mynd sem er með dökkum texta sem er ekki sýnilegur á dökkum bakgrunni. Ég gerði þetta dæmi um hnapp sem er með hvíta miðju fyrir ljósa stillingu og dökka miðju fyrir dökka stillingu.

Með því að nota CSS get ég sýnt viðeigandi myndbakgrunn byggt á því hvort notandinn notar ljósa eða dökka stillingu:

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

Undantekning: Tölvupóstviðskiptavinir mega ekki styðja þetta

Sumir tölvupóstforrit, eins og Gmail, styðja ekki CSS breytur, sem eru notaðar í dæminu sem ég gaf upp til að skipta á milli ljóss og dökkrar stillingar. Þetta þýðir að þú gætir þurft að nota aðrar aðferðir til að skipta á milli mismunandi útgáfur af sprite myndinni fyrir mismunandi litasamsetningu.

Önnur takmörkun er sú að sumir tölvupóstforrit styðja ekki ákveðna CSS eiginleika sem eru almennt notaðir í CSS sprites, eins og background-position. Þetta getur gert það erfitt að staðsetja einstakar myndir í sprite myndskránni.