Slik bruker du CSS Sprites med lys og mørk modus
CSS sprites er en teknikk som brukes i webutvikling for å redusere antall HTTP forespørsler fra en nettside. De involverer å kombinere flere små bilder til en enkelt større bildefil og deretter bruke CSS for å vise bestemte deler av det bildet som individuelle elementer på nettsiden.
Den primære fordelen med å bruke CSS-sprites er at de kan bidra til å forbedre sidelastetiden for et nettsted. Hver gang et bilde lastes inn på en nettside, krever det en separat HTTP-forespørsel, noe som kan bremse innlastingsprosessen. Ved å kombinere flere bilder til ett enkelt spritebilde kan vi redusere antallet HTTP-forespørsler som trengs for å laste inn siden. Dette kan resultere i en raskere og mer responsiv nettside, spesielt for nettsteder med mange små bilder som ikoner og knapper.
Ved å bruke CSS-sprites kan vi også dra nytte av nettleserbufring. Når en bruker besøker et nettsted, vil nettleseren deres bufre sprite-bildet etter den første forespørselen. Dette betyr at påfølgende forespørsler om individuelle elementer på nettsiden som bruker sprite-bildet vil være mye raskere siden nettleseren allerede vil ha bildet i bufferen.
CSS Sprites er ikke så populære som de en gang var
CSS-sprites er fortsatt ofte brukt for å forbedre nettstedets hastighet, selv om de kanskje ikke er så populære som de en gang var. På grunn av høy båndbredde, webp formater, bildekomprimering, innholdsleveringsnettverk (CDN), lat lastingog sterk caching teknologier, ser vi ikke så mange CSS-sprites som vi pleide på nettet... selv om det fortsatt er en flott strategi. Det er spesielt nyttig hvis du har en side som refererer til en mengde små bilder.
Eksempel på CSS Sprite
For å bruke CSS-sprites, må vi definere posisjonen til hvert enkelt bilde i sprite-bildefilen ved hjelp av CSS. Dette gjøres vanligvis ved å stille inn background-image
og background-position
egenskaper for hvert element på nettsiden som bruker sprite-bildet. Ved å spesifisere x- og y-koordinatene til bildet i spriten, kan vi vise individuelle bilder som separate elementer på siden. Her er et eksempel ... vi har to knapper i en enkelt bildefil:
Hvis vi ønsker at bildet til venstre skal vises, kan vi gi div arrow-left
som klassen slik at koordinatene bare viser den siden:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Og hvis vi ønsker å vise høyre pil, vil vi sette klassen for vår div til arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites for lys og mørk modus
En interessant bruk av dette er med lyse og mørke moduser. Kanskje du har en logo eller et bilde som har mørk tekst på som ikke er synlig på en mørk bakgrunn. Jeg gjorde dette eksemplet på en knapp som har et hvitt senter for lys modus og et mørkt senter for mørk modus.
Ved å bruke CSS kan jeg vise riktig bildebakgrunn basert på om brukeren bruker lys modus eller mørk modus:
: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);
}
Unntak: E-postklienter støtter kanskje ikke dette
Noen e-postklienter, som Gmail, støtter ikke CSS-variabler, som brukes i eksemplet jeg ga for å bytte mellom lys og mørk modus. Dette betyr at du kanskje må bruke alternative teknikker for å bytte mellom ulike versjoner av spritebildet for ulike fargevalg.
En annen begrensning er at noen e-postklienter ikke støtter visse CSS-egenskaper som vanligvis brukes i CSS-sprites, som f.eks. background-position
. Dette kan gjøre det vanskelig å plassere individuelle bilder i sprite-bildefilen.