Content Marketing

Hur man använder CSS Sprites med ljust och mörkt läge

CSS sprites är en teknik som används i webbutveckling för att minska antalet HTTP förfrågningar från en webbsida. De involverar att kombinera flera små bilder till en enda större bildfil och sedan använda CSS för att visa specifika delar av den bilden som enskilda element på webbsidan.

Den främsta fördelen med att använda CSS-sprites är att de kan hjälpa till att förbättra sidans laddningstid för en webbplats. Varje gång en bild läses in på en webbsida kräver den en separat HTTP-förfrågan, vilket kan sakta ner laddningsprocessen. Genom att kombinera flera bilder till en enda sprite-bild kan vi minska antalet HTTP-förfrågningar som behövs för att ladda sidan. Detta kan resultera i en snabbare och mer responsiv webbplats, särskilt för webbplatser med många små bilder som ikoner och knappar.

Genom att använda CSS-sprites kan vi också dra fördel av webbläsarcache. När en användare besöker en webbplats cachelagrar deras webbläsare spritebilden efter den första begäran. Detta innebär att efterföljande förfrågningar om enskilda element på webbsidan som använder sprite-bilden kommer att gå mycket snabbare eftersom webbläsaren redan kommer att ha bilden i sin cache.

CSS-sprites är inte lika populära som de en gång var

CSS-sprites används fortfarande ofta för att förbättra webbplatsens hastighet, även om de kanske inte är lika populära som de en gång var. På grund av hög bandbredd, webp format, bildkomprimering, innehållsleveransnätverk (CDN), lat laddningoch stark cachning teknologier ser vi inte så många CSS-sprites som vi brukade på webben... även om det fortfarande är en bra strategi. Det är särskilt användbart om du har en sida som refererar till en mängd små bilder.

Exempel på CSS Sprite

För att använda CSS-sprites måste vi definiera positionen för varje enskild bild i sprite-bildfilen med CSS. Detta görs vanligtvis genom att ställa in background-image och background-position egenskaper för varje element på webbsidan som använder sprite-bilden. Genom att ange x- och y-koordinaterna för bilden i spriten kan vi visa enskilda bilder som separata element på sidan. Här är ett exempel... vi har två knappar i en enda bildfil:

Exempel på CSS Sprite

Om vi ​​vill att bilden till vänster ska visas kan vi förse div med arrow-left som klassen så att koordinaterna bara visar den sidan:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Och om vi vill visa högerpilen skulle vi ställa in klassen för vår div arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

CSS Sprites för ljust och mörkt läge

En intressant användning av detta är med ljusa och mörka lägen. Du kanske har en logotyp eller bild som har mörk text på den som inte syns på en mörk bakgrund. Jag gjorde det här exemplet på en knapp som har ett vitt mitt för ljust läge och ett mörkt mitt för mörkt läge.

css sprite ljus mörk

Med CSS kan jag visa lämplig bildbakgrund baserat på om användaren använder ljust läge eller mörkt läge:

: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);
}

Undantag: E-postklienter kanske inte stöder detta

Vissa e-postklienter, som Gmail, stöder inte CSS-variabler, som används i exemplet jag gav för att växla mellan ljust och mörkt läge. Det betyder att du kan behöva använda alternativa tekniker för att växla mellan olika versioner av spritebilden för olika färgscheman.

En annan begränsning är att vissa e-postklienter inte stöder vissa CSS-egenskaper som vanligtvis används i CSS-sprites, som t.ex. background-position. Detta kan göra det svårt att placera enskilda bilder i sprite-bildfilen.

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.