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:
Č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.
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.