Hoe om CSS Sprites met lig en donker modus te gebruik

CSS sprites is 'n tegniek wat in webontwikkeling gebruik word om die aantal te verminder HTTP versoeke wat deur 'n webblad gemaak word. Dit behels die kombinasie van veelvuldige klein beelde in 'n enkele groter beeldlêer en dan die gebruik van CSS om spesifieke gedeeltes van daardie beeld as individuele elemente op die webblad te vertoon.

Die primêre voordeel van die gebruik van CSS-sprites is dat dit kan help om die bladsylaaityd vir 'n webwerf te verbeter. Elke keer as 'n prent op 'n webblad gelaai word, vereis dit 'n aparte HTTP-versoek, wat die laaiproses kan vertraag. Deur veelvuldige beelde in 'n enkele sprite-beeld te kombineer, kan ons die aantal HTTP-versoeke wat nodig is om die bladsy te laai verminder. Dit kan lei tot 'n vinniger en meer responsiewe webwerf, veral vir werwe met baie klein beelde soos ikone en knoppies.

Die gebruik van CSS sprites stel ons ook in staat om voordeel te trek uit blaaierkas. Wanneer 'n gebruiker 'n webwerf besoek, sal hul blaaier die sprite-prent kas na die eerste versoek. Dit beteken dat daaropvolgende versoeke vir individuele elemente op die webblad wat die sprite-prent gebruik, baie vinniger sal wees aangesien die blaaier reeds die prent in sy kas sal hê.

CSS Sprites is nie so gewild soos hulle eens was nie

CSS-sprites word steeds algemeen gebruik om werfspoed te verbeter, hoewel hulle dalk nie so gewild is soos wat hulle eens was nie. As gevolg van hoë bandwydte, webp formate, beeld kompressie, inhoud aflewering netwerke (CDN), lui laai, en sterk caching tegnologieë, sien ons nie soveel CSS-sprites as wat ons gewoond was op die web nie ... hoewel dit steeds 'n goeie strategie is. Dit is veral nuttig as jy 'n bladsy het wat na 'n menigte klein beelde verwys.

Voorbeeld van CSS Sprite

Om CSS sprites te gebruik, moet ons die posisie van elke individuele prent binne die sprite-beeldlêer definieer met behulp van CSS. Dit word tipies gedoen deur die instel van die background-image en background-position eienskappe vir elke element op die webblad wat die sprite-beeld gebruik. Deur die x- en y-koördinate van die prent binne die sprite te spesifiseer, kan ons individuele prente as aparte elemente op die bladsy vertoon. Hier is 'n voorbeeld ... ons het twee knoppies in 'n enkele beeldlêer:

As ons wil hê dat die prent aan die linkerkant vertoon moet word, kan ons die div voorsien arrow-left as die klas, sodat die koördinate slegs daardie kant vertoon:

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

En as ons die regte pyltjie wil vertoon, sal ons die klas vir ons div stel arrow-right.

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

CSS Sprites vir lig en donker modus

Een interessante gebruik hiervan is met ligte en donker modusse. Miskien het jy 'n logo of prent wat donker teks op het wat nie op 'n donker agtergrond sigbaar is nie. Ek het hierdie voorbeeld gedoen van 'n knoppie wat 'n wit sentrum vir ligte modus en 'n donker sentrum vir donker modus het.

Deur CSS te gebruik, kan ek die toepaslike beeldagtergrond vertoon, gebaseer op of die gebruiker ligte modus of donker modus gebruik:

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

Uitsondering: E-poskliënte ondersteun dit dalk nie

Sommige e-poskliënte, soos Gmail, ondersteun nie CSS-veranderlikes nie, wat gebruik word in die voorbeeld wat ek verskaf het om tussen lig- en donkermodusse te wissel. Dit beteken dat jy dalk alternatiewe tegnieke moet gebruik om tussen verskillende weergawes van die sprite-beeld vir verskillende kleurskemas te wissel.

Nog 'n beperking is dat sommige e-poskliënte nie sekere CSS-eienskappe ondersteun wat algemeen in CSS-sprites gebruik word nie, soos bv. background-position. Dit kan dit moeilik maak om individuele beelde binne die sprite-beeldlêer te plaas.