Content Marketing

Kako uporabljati sprite CSS s svetlim in temnim načinom

CSS sprite so tehnika, ki se uporablja pri spletnem razvoju za zmanjšanje števila HTTP zahteve spletne strani. Vključujejo združevanje več majhnih slik v eno samo večjo slikovno datoteko in nato uporabo CSS za prikaz določenih delov te slike kot posameznih elementov na spletni strani.

Glavna prednost uporabe spritov CSS je, da lahko pomagajo izboljšati čas nalaganja strani za spletno mesto. Vsakič, ko se slika naloži na spletno stran, zahteva ločeno zahtevo HTTP, kar lahko upočasni postopek nalaganja. Če združimo več slik v eno sliko sprite, lahko zmanjšamo število zahtev HTTP, potrebnih za nalaganje strani. Posledica tega je lahko hitrejše in bolj odzivno spletno mesto, zlasti za spletna mesta z veliko majhnimi slikami, kot so ikone in gumbi.

Uporaba spritov CSS nam omogoča tudi, da izkoristimo predpomnjenje brskalnika. Ko uporabnik obišče spletno mesto, bo njegov brskalnik predpomnil sliko sprite po prvi zahtevi. To pomeni, da bodo nadaljnje zahteve po posameznih elementih na spletni strani, ki uporabljajo sliko sprite, veliko hitrejše, saj bo brskalnik sliko že imel v predpomnilniku.

Sprite CSS niso več tako priljubljeni, kot so bili nekoč

Sprite CSS se še vedno pogosto uporabljajo za izboljšanje hitrosti spletnega mesta, čeprav morda niso tako priljubljeni, kot so bili nekoč. Zaradi visoke pasovne širine, webp formati, stiskanje slik, omrežja za dostavo vsebin (CDN), leno nalaganjein močno predpomnjenje tehnologije, na spletu ne vidimo več toliko spritejev CSS, kot smo jih včasih ... čeprav je to še vedno odlična strategija. To je še posebej uporabno, če imate stran, ki se sklicuje na množico majhnih slik.

Primer CSS Sprite

Za uporabo spritejev CSS moramo določiti položaj vsake posamezne slike v slikovni datoteki sprite z uporabo CSS. To se običajno izvede z nastavitvijo background-image in background-position lastnosti za vsak element na spletni strani, ki uporablja sliko sprite. Z določitvijo koordinat x in y slike znotraj spritea lahko posamezne slike prikažemo kot ločene elemente na strani. Tukaj je primer ... v eni slikovni datoteki imamo dva gumba:

Primer CSS Sprite

Če želimo, da se prikaže slika na levi, lahko divu zagotovimo arrow-left kot razred, tako da koordinate prikazujejo samo to stran:

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

In če želimo prikazati desno puščico, bi nastavili razred za naš div arrow-right.

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

Sprite CSS za svetel in temen način

Ena zanimiva uporaba tega je s svetlimi in temnimi načini. Morda imate logotip ali sliko s temnim besedilom, ki ni vidno na temnem ozadju. Naredil sem ta primer gumba, ki ima belo sredino za svetel način in temno sredino za temni način.

css sprite svetlo temno

Z uporabo CSS lahko prikažem ustrezno ozadje slike glede na to, ali uporabnik uporablja svetel ali temen način:

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

Izjema: e-poštni odjemalci tega morda ne podpirajo

Nekateri e-poštni odjemalci, kot je Gmail, ne podpirajo spremenljivk CSS, ki se v primeru, ki sem ga navedel, uporabljajo za preklapljanje med svetlim in temnim načinom. To pomeni, da boste morda morali uporabiti alternativne tehnike za preklapljanje med različnimi različicami slike sprite za različne barvne sheme.

Druga omejitev je, da nekateri e-poštni odjemalci ne podpirajo določenih lastnosti CSS, ki se običajno uporabljajo v spriteih CSS, kot npr. background-position. To lahko oteži pozicioniranje posameznih slik znotraj slikovne datoteke sprite.

Douglas Karr

Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

Povezani članki

Nazaj na vrh
Zapri

Zaznan Adblock

Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.