Inhalt Marketing

Wéi benotzen ech CSS Sprites mat Liicht an donkel Modus

CSS sprites sinn eng Technik an Web Entwécklung benotzt der Zuel vun ze reduzéieren HTTP Ufroe vun enger Websäit gemaach. Si beinhalt d'Kombinatioun vu verschidde kleng Biller an eng eenzeg méi grouss Bilddatei an dann mat CSS fir spezifesch Sektiounen vun deem Bild als eenzel Elementer op der Websäit ze weisen.

De primäre Virdeel fir CSS Sprites ze benotzen ass datt se hëllefe kënnen d'Säitlaaschtzäit fir eng Websäit verbesseren. All Kéier wann e Bild op enger Websäit gelueden ass, erfuerdert et eng separat HTTP-Ufro, déi de Luedeprozess verlangsamen. Andeems Dir verschidde Biller an een eenzegt Sprite-Bild kombinéiere kënnt, kënne mir d'Zuel vun HTTP-Ufroe reduzéieren, déi néideg sinn fir d'Säit ze lueden. Dëst kann zu enger méi séier a méi reaktiounsfäeger Websäit resultéieren, besonnesch fir Site mat vill kleng Biller wéi Ikonen a Knäppercher.

D'Benotzung vun CSS Sprites erlaabt eis och de Browser Caching ze profitéieren. Wann e Benotzer eng Websäit besicht, wäert hire Browser de Sprite Bild no der éischter Ufro cache. Dëst bedeit datt spéider Ufroe fir eenzel Elementer op der Websäit, déi d'Sprite-Bild benotzen, vill méi séier sinn, well de Browser d'Bild scho a sengem Cache huet.

CSS Sprites sinn net sou populär wéi se eemol waren

CSS Sprites ginn ëmmer nach allgemeng benotzt fir d'Sitegeschwindegkeet ze verbesseren, obwuel se vläicht net sou populär sinn wéi se eemol waren. Wéinst der héijer Bandbreedung, Websäit Formater, Bildkompressioun, Inhalt Liwwerung Netzwierker (CDN), liddereg lueden, an staark Caching Technologien, gesi mir net sou vill CSS Sprites wéi mir um Internet benotzt hunn ... obwuel et nach ëmmer eng super Strategie ass. Et ass besonnesch nëtzlech wann Dir eng Säit hutt déi eng Villzuel vu klenge Biller referéiert.

CSS Sprite Beispill

Fir CSS Sprites ze benotzen, musse mir d'Positioun vun all eenzel Bild an der Sprite Bilddatei mat CSS definéieren. Dëst gëtt normalerweis gemaach andeems Dir de background-image an background-position Eegeschafte fir all Element op der Websäit déi de Sprite Bild benotzt. Andeems Dir d'x an y Koordinate vum Bild am Sprite spezifizéiert, kënne mir eenzel Biller als separat Elementer op der Säit weisen. Hei ass e Beispill ... mir hunn zwee Knäppercher an enger eenzeger Bilddatei:

CSS Sprite Beispill

Wa mir wëllen datt d'Bild op der lénker Säit ugewise gëtt, kënne mir d'Div matmaachen arrow-left als Klass sou datt d'Koordinaten nëmmen déi Säit weisen:

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

A wa mir de richtege Pfeil wëllen weisen, stelle mir d'Klass fir eis Div arrow-right.

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

CSS Sprites Fir Liicht an Däischter Modus

Eng interessant Notzung vun dësem ass mat hell an donkel Modi. Vläicht hutt Dir e Logo oder Bild mat engem donkelen Text deen net op engem donkelen Hannergrond ze gesinn ass. Ech hunn dëst Beispill vun engem Knäppche gemaach, deen e wäisse Zentrum fir Liichtmodus an en donkelen Zentrum fir däischter Modus huet.

css sprite hell donkel

Mat CSS kann ech den entspriechende Bildhannergrond baséieren op ob de Benotzer e liichte Modus oder däischter Modus benotzt:

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

Ausnam: E-Mail Clienten kënnen dëst net ënnerstëtzen

E puer E-Mail Clienten, wéi Gmail, ënnerstëtzen keng CSS Variablen, déi am Beispill benotzt ginn, dat ech geliwwert hunn, fir tëscht hell an donkel Modi ze wiesselen. Dëst bedeit datt Dir eventuell alternativ Technike benotze musst fir tëscht verschiddene Versioune vum Spritebild fir verschidde Faarfschemaen ze wiesselen.

Eng aner Begrenzung ass datt e puer E-Mail Clienten verschidde CSS Eegeschaften net ënnerstëtzen, déi allgemeng an CSS Sprites benotzt ginn, wéi z. background-position. Dëst kann et schwéier maachen eenzel Biller bannent der Sprite Bilddatei ze positionéieren.

Douglas Karr

Douglas Karr ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.