Sådan bruger du CSS Sprites med lys og mørk tilstand
CSS sprites er en teknik, der bruges i webudvikling for at reducere antallet af HTTP anmodninger fra en webside. De involverer at kombinere flere små billeder til en enkelt større billedfil og derefter bruge CSS til at vise specifikke sektioner af billedet som individuelle elementer på websiden.
Den primære fordel ved at bruge CSS-sprites er, at de kan hjælpe med at forbedre sideindlæsningstiden for et websted. Hver gang et billede indlæses på en webside, kræver det en separat HTTP-anmodning, som kan bremse indlæsningsprocessen. Ved at kombinere flere billeder til et enkelt sprite-billede kan vi reducere antallet af HTTP-anmodninger, der er nødvendige for at indlæse siden. Dette kan resultere i en hurtigere og mere responsiv hjemmeside, især for websteder med mange små billeder som ikoner og knapper.
Brug af CSS sprites giver os også mulighed for at drage fordel af browser caching. Når en bruger besøger et websted, vil deres browser cache sprite-billedet efter den første anmodning. Det betyder, at efterfølgende anmodninger om individuelle elementer på websiden, der bruger sprite-billedet, vil være meget hurtigere, da browseren allerede har billedet i sin cache.
CSS Sprites er ikke så populære, som de engang var
CSS sprites er stadig almindeligt brugt til at forbedre webstedets hastighed, selvom de måske ikke er så populære, som de engang var. På grund af høj båndbredde, WebP formater, billedkomprimering, indholdsleveringsnetværk (CDN), doven lastningog stærk caching teknologier, ser vi ikke så mange CSS-sprites, som vi plejede på nettet... selvom det stadig er en fantastisk strategi. Det er især nyttigt, hvis du har en side, der refererer til et væld af små billeder.
Eksempel på CSS Sprite
For at bruge CSS-sprites skal vi definere placeringen af hvert enkelt billede i sprite-billedfilen ved hjælp af CSS. Dette gøres typisk ved at indstille background-image
, background-position
egenskaber for hvert element på websiden, der bruger sprite-billedet. Ved at angive x- og y-koordinaterne for billedet i spriten, kan vi vise individuelle billeder som separate elementer på siden. Her er et eksempel ... vi har to knapper i en enkelt billedfil:
Hvis vi ønsker, at billedet til venstre skal vises, kan vi forsyne div'en med arrow-left
som klassen, så koordinaterne kun viser den side:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Og hvis vi ønsker at vise højre pil, ville vi indstille klassen for vores div til arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites til lys og mørk tilstand
En interessant anvendelse af dette er med lys og mørke tilstande. Måske har du et logo eller billede med mørk tekst på, som ikke er synlig på en mørk baggrund. Jeg lavede dette eksempel på en knap, der har et hvidt center for lys tilstand og et mørkt center for mørk tilstand.
Ved hjælp af CSS kan jeg vise den passende billedbaggrund baseret på, om brugeren bruger lys tilstand eller mørk tilstand:
: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);
}
Undtagelse: E-mail-klienter understøtter muligvis ikke dette
Nogle e-mail-klienter, såsom Gmail, understøtter ikke CSS-variabler, som bruges i det eksempel, jeg gav, til at skifte mellem lys og mørk tilstand. Det betyder, at du muligvis skal bruge alternative teknikker til at skifte mellem forskellige versioner af sprite-billedet til forskellige farveskemaer.
En anden begrænsning er, at nogle e-mail-klienter ikke understøtter visse CSS-egenskaber, der almindeligvis bruges i CSS-sprites, som f.eks. background-position
. Dette kan gøre det vanskeligt at placere individuelle billeder i sprite-billedfilen.