Jak používat skřítky CSS se světlým a tmavým režimem
CSS skřítci jsou technika používaná při vývoji webu ke snížení počtu HTTP požadavky ze strany webové stránky. Zahrnují zkombinování více malých obrázků do jednoho většího obrázkového souboru a následné použití CSS k zobrazení konkrétních částí tohoto obrázku jako jednotlivých prvků na webové stránce.
Primární výhodou použití skřítků CSS je, že mohou pomoci zlepšit dobu načítání stránky webu. Pokaždé, když se obrázek načte na webovou stránku, vyžaduje samostatný požadavek HTTP, což může zpomalit proces načítání. Kombinací více obrázků do jednoho obrázku sprite můžeme snížit počet HTTP požadavků potřebných k načtení stránky. Výsledkem může být rychlejší a citlivější web, zejména u webů s mnoha malými obrázky, jako jsou ikony a tlačítka.
Použití skřítků CSS nám také umožňuje využít mezipaměť prohlížeče. Když uživatel navštíví webovou stránku, jeho prohlížeč uloží obrázek sprite do mezipaměti po prvním požadavku. To znamená, že následné požadavky na jednotlivé prvky na webové stránce, které používají obrázek sprite, budou mnohem rychlejší, protože prohlížeč již bude mít obrázek ve své mezipaměti.
CSS Sprites nejsou tak populární jako kdysi
Sprite CSS se stále běžně používají ke zlepšení rychlosti webu, i když nemusí být tak populární jako kdysi. Kvůli velké šířce pásma, webp formáty, komprese obrazu, sítě pro doručování obsahu (CDN), líné načítání, a silné ukládání do mezipaměti technologií, nevidíme na webu tolik CSS spritů jako dříve... i když je to stále skvělá strategie. Je to zvláště užitečné, pokud máte stránku, která odkazuje na velké množství malých obrázků.
Příklad CSS Sprite
Chcete-li použít sprite CSS, musíme pomocí CSS definovat pozici každého jednotlivého obrázku v souboru obrázku sprite. To se obvykle provádí nastavením background-image
a background-position
vlastnosti pro každý prvek na webové stránce, který používá obrázek sprite. Zadáním souřadnic x a y obrázku v rámci spritu můžeme jednotlivé obrázky zobrazit jako samostatné prvky na stránce. Zde je příklad... v jednom souboru obrázku máme dvě tlačítka:
Pokud chceme, aby se zobrazil obrázek vlevo, můžeme poskytnout div s arrow-left
jako třída, takže souřadnice zobrazují pouze tuto stranu:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
A pokud chceme zobrazit pravou šipku, nastavili bychom třídu pro náš div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites pro světlý a tmavý režim
Zajímavé použití je se světlými a tmavými režimy. Možná máte logo nebo obrázek s tmavým textem, který není vidět na tmavém pozadí. Udělal jsem tento příklad tlačítka, které má bílý střed pro světlý režim a tmavý střed pro tmavý režim.
Pomocí CSS mohu zobrazit vhodné pozadí obrázku podle toho, zda uživatel používá světlý nebo 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ýjimka: E-mailoví klienti toto nemusí podporovat
Někteří e-mailoví klienti, jako je Gmail, nepodporují proměnné CSS, které se v příkladu, který jsem uvedl, používají k přepínání mezi světlým a tmavým režimem. To znamená, že možná budete muset použít alternativní techniky k přepínání mezi různými verzemi obrázku sprite pro různá barevná schémata.
Dalším omezením je, že někteří e-mailoví klienti nepodporují určité vlastnosti CSS, které se běžně používají v CSS spritech, jako např background-position
. To může ztížit umístění jednotlivých obrázků v souboru obrázku sprite.