Content Marketing

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:

Eksempel på CSS Sprite

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.

css sprite lys mørk

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.

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.