Content Marketing

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:

CSS Sprite-voorbeeld

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.

css sprite licht donker

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.

Douglas Karr

Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

Gerelateerde artikelen

Terug naar boven knop
Sluiten

Adblock gedetecteerd

Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.