Ako používať CSS Sprites so svetlým a tmavým režimom
CSS sprite je technika používaná pri vývoji webu na zníženie počtu HTTP požiadavky zo strany webovej stránky. Zahŕňajú kombinovanie viacerých malých obrázkov do jedného väčšieho súboru obrázka a následné použitie CSS na zobrazenie konkrétnych častí tohto obrázka ako jednotlivých prvkov na webovej stránke.
Hlavnou výhodou používania CSS sprite je to, že môžu pomôcť zlepšiť čas načítania stránky pre web. Zakaždým, keď sa obrázok načíta na webovú stránku, vyžaduje samostatnú požiadavku HTTP, čo môže spomaliť proces načítania. Kombináciou viacerých obrázkov do jedného sprite obrázku môžeme znížiť počet HTTP požiadaviek potrebných na načítanie stránky. Výsledkom môže byť rýchlejšia a citlivejšia webová stránka, najmä v prípade stránok s množstvom malých obrázkov, ako sú ikony a tlačidlá.
Používanie spritov CSS nám tiež umožňuje využívať ukladanie do vyrovnávacej pamäte prehliadača. Keď používateľ navštívi webovú stránku, jeho prehliadač po prvej požiadavke uloží obrázok sprite do vyrovnávacej pamäte. To znamená, že následné požiadavky na jednotlivé prvky na webovej stránke, ktoré používajú obrázok sprite, budú oveľa rýchlejšie, pretože prehliadač už bude mať obrázok vo svojej vyrovnávacej pamäti.
CSS Sprites už nie sú tak populárne ako kedysi
Sprite CSS sa stále bežne používajú na zlepšenie rýchlosti webu, aj keď už nemusia byť také populárne ako kedysi. Vzhľadom na veľkú šírku pásma, web formáty, kompresia obrazu, siete na doručovanie obsahu (CDN), lenivé zaťaženiea silné ukladanie do vyrovnávacej pamäte technológie, už na webe nevidíme toľko CSS sprite ako kedysi... aj keď je to stále skvelá stratégia. Je to obzvlášť užitočné, ak máte stránku, ktorá odkazuje na množstvo malých obrázkov.
Príklad CSS Sprite
Ak chcete použiť sprite CSS, musíme pomocou CSS definovať pozíciu každého jednotlivého obrázka v súbore obrázka sprite. To sa zvyčajne vykonáva nastavením background-image
a background-position
vlastnosti pre každý prvok na webovej stránke, ktorý používa obrázok sprite. Zadaním súradníc x a y obrázku v rámci sprite môžeme jednotlivé obrázky zobraziť ako samostatné prvky na stránke. Tu je príklad... v jednom súbore obrázka máme dve tlačidlá:
Ak chceme, aby sa zobrazil obrázok vľavo, môžeme poskytnúť div s arrow-left
ako trieda, takže súradnice zobrazujú iba túto stranu:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
A ak chceme zobraziť pravú šípku, nastavili by sme triedu pre náš div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites pre svetlý a tmavý režim
Jedným zaujímavým využitím je režim svetla a tmy. Možno máte logo alebo obrázok s tmavým textom, ktorý nie je viditeľný na tmavom pozadí. Urobil som tento príklad tlačidla, ktoré má biely stred pre svetlý režim a tmavý stred pre tmavý režim.
Pomocou CSS môžem zobraziť príslušné pozadie obrázka podľa toho, či používateľ používa svetlý alebo tmavý režim:
: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);
}
Výnimka: E-mailoví klienti to nemusia podporovať
Niektorí e-mailoví klienti, ako napríklad Gmail, nepodporujú premenné CSS, ktoré sa používajú v príklade, ktorý som uviedol na prepínanie medzi svetlým a tmavým režimom. To znamená, že možno budete musieť použiť alternatívne techniky na prepínanie medzi rôznymi verziami obrázka sprite pre rôzne farebné schémy.
Ďalším obmedzením je, že niektorí e-mailoví klienti nepodporujú určité vlastnosti CSS, ktoré sa bežne používajú v sprite CSS, ako napr background-position
. To môže sťažiť umiestnenie jednotlivých obrázkov v súbore obrázka sprite.