Hoe CSS Sprites te gebruiken met de lichte en donkere modus
CSS sprites is een techniek die wordt gebruikt bij webontwikkeling om het aantal HTTP verzoeken gedaan door een webpagina. Ze omvatten het combineren van meerdere kleine afbeeldingen in één groter afbeeldingsbestand en vervolgens het gebruik van CSS om specifieke delen van die afbeelding als afzonderlijke elementen op de webpagina weer te geven.
Het belangrijkste voordeel van het gebruik van CSS-sprites is dat ze de laadtijd van een website kunnen helpen verbeteren. Elke keer dat een afbeelding op een webpagina wordt geladen, is een afzonderlijk HTTP-verzoek vereist, wat het laadproces kan vertragen. Door meerdere afbeeldingen te combineren tot een enkele sprite-afbeelding, kunnen we het aantal HTTP-verzoeken verminderen dat nodig is om de pagina te laden. Dit kan resulteren in een snellere en responsievere website, vooral voor sites met veel kleine afbeeldingen zoals pictogrammen en knoppen.
Door CSS-sprites te gebruiken, kunnen we ook profiteren van browsercaching. Wanneer een gebruiker een website bezoekt, zal zijn browser de sprite-afbeelding na het eerste verzoek in de cache opslaan. Dit betekent dat volgende verzoeken voor individuele elementen op de webpagina die de sprite-afbeelding gebruiken veel sneller zullen zijn, aangezien de browser de afbeelding al in de cache heeft staan.
CSS-sprites zijn niet meer zo populair als ze ooit waren
CSS-sprites worden nog steeds vaak gebruikt om de snelheid van de site te verbeteren, hoewel ze misschien niet meer zo populair zijn als vroeger. Vanwege de hoge bandbreedte, webp formaten, beeldcompressie, inhoudleveringsnetwerken (CDN), trage voortgang en sterke caching technologieën, zien we niet zoveel CSS-sprites als vroeger op internet... hoewel het nog steeds een geweldige strategie is. Dit is vooral handig als u een pagina heeft die verwijst naar een groot aantal kleine afbeeldingen.
CSS Sprite-voorbeeld
Om CSS-sprites te gebruiken, moeten we de positie van elke afzonderlijke afbeelding in het sprite-afbeeldingsbestand definiëren met behulp van CSS. Dit wordt meestal gedaan door het instellen van de background-image
en background-position
eigenschappen voor elk element op de webpagina dat de sprite-afbeelding gebruikt. Door de x- en y-coördinaten van de afbeelding in de sprite op te geven, kunnen we afzonderlijke afbeeldingen als afzonderlijke elementen op de pagina weergeven. Hier is een voorbeeld... we hebben twee knoppen in één afbeeldingsbestand:
Als we willen dat de afbeelding links wordt weergegeven, kunnen we de div voorzien arrow-left
als de klasse zodat de coördinaten alleen die kant weergeven:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
En als we de pijl naar rechts willen weergeven, stellen we de klasse voor onze div in op arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites voor lichte en donkere modus
Een interessant gebruik hiervan is met lichte en donkere modi. Misschien heb je een logo of afbeelding met donkere tekst die niet zichtbaar is op een donkere achtergrond. Ik heb dit voorbeeld gemaakt van een knop met een wit centrum voor de lichte modus en een donker centrum voor de donkere modus.
Met behulp van CSS kan ik de juiste afbeeldingsachtergrond weergeven op basis van of de gebruiker de lichte modus of de donkere modus gebruikt:
: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);
}
Uitzondering: e-mailclients ondersteunen dit mogelijk niet
Sommige e-mailclients, zoals Gmail, ondersteunen geen CSS-variabelen, die in het voorbeeld dat ik heb gegeven worden gebruikt om te schakelen tussen lichte en donkere modi. Dit betekent dat u mogelijk alternatieve technieken moet gebruiken om te schakelen tussen verschillende versies van de sprite-afbeelding voor verschillende kleurenschema's.
Een andere beperking is dat sommige e-mailclients bepaalde CSS-eigenschappen niet ondersteunen die vaak worden gebruikt in CSS-sprites, zoals background-position
. Dit kan het moeilijk maken om afzonderlijke afbeeldingen in het sprite-afbeeldingsbestand te plaatsen.