Conținut de marketing

Cum să utilizați sprite-urile CSS cu modul Light și Dark

CSS sprite-urile sunt o tehnică folosită în dezvoltarea web pentru a reduce numărul de HTTP solicitările făcute de o pagină web. Acestea implică combinarea mai multor imagini mici într-un singur fișier imagine mai mare și apoi utilizarea CSS pentru a afișa anumite secțiuni ale acelei imagini ca elemente individuale pe pagina web.

Avantajul principal al utilizării sprite-urilor CSS este că acestea pot ajuta la îmbunătățirea timpului de încărcare a paginii pentru un site web. De fiecare dată când o imagine este încărcată pe o pagină web, aceasta necesită o solicitare HTTP separată, care poate încetini procesul de încărcare. Combinând mai multe imagini într-o singură imagine sprite, putem reduce numărul de solicitări HTTP necesare pentru a încărca pagina. Acest lucru poate duce la un site web mai rapid și mai receptiv, în special pentru site-urile cu multe imagini mici, cum ar fi pictograme și butoane.

Utilizarea sprite-urilor CSS ne permite, de asemenea, să profităm de stocarea în cache a browserului. Când un utilizator vizitează un site web, browserul său va stoca în cache imaginea sprite după prima solicitare. Aceasta înseamnă că solicitările ulterioare pentru elemente individuale de pe pagina web care utilizează imaginea sprite vor fi mult mai rapide, deoarece browserul va avea deja imaginea în cache.

Sprite-urile CSS nu sunt la fel de populare cum erau cândva

Sprite-urile CSS sunt încă utilizate în mod obișnuit pentru a îmbunătăți viteza site-ului, deși este posibil să nu fie la fel de populare ca înainte. Din cauza lățimii de bandă mari, WebP formate, compresia imaginii, rețele de livrare de conținut (CDN), încărcătură leneșă, și caching puternic tehnologii, nu vedem atât de multe sprites CSS ca înainte pe web... deși este încă o strategie grozavă. Este util mai ales dacă aveți o pagină care face referire la o multitudine de imagini mici.

Exemplu de sprite CSS

Pentru a folosi sprite-uri CSS, trebuie să definim poziția fiecărei imagini individuale în fișierul de imagine sprite folosind CSS. Acest lucru se face de obicei prin setarea background-image și background-position proprietăți pentru fiecare element de pe pagina web care utilizează imaginea sprite. Specificând coordonatele x și y ale imaginii în cadrul sprite-ului, putem afișa imagini individuale ca elemente separate pe pagină. Iată un exemplu... avem două butoane într-un singur fișier imagine:

Exemplu de sprite CSS

Dacă dorim ca imaginea din stânga să fie afișată, putem furniza div-ul arrow-left ca clasă, astfel încât coordonatele afișează doar acea parte:

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

Și dacă dorim să afișam săgeata dreapta, am seta clasa pentru div-ul nostru arrow-right.

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

Sprites CSS pentru modul Light And Dark

O utilizare interesantă a acestui lucru este cu modurile de lumină și întuneric. Poate că aveți un logo sau o imagine care are text întunecat pe ea, care nu este vizibil pe un fundal întunecat. Am făcut acest exemplu de buton care are un centru alb pentru modul de lumină și un centru întunecat pentru modul întunecat.

css sprite light dark

Folosind CSS, pot afișa fundalul adecvat al imaginii, în funcție de faptul dacă utilizatorul folosește modul luminos sau modul întunecat:

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

Excepție: este posibil ca clienții de e-mail să nu accepte acest lucru

Unii clienți de e-mail, cum ar fi Gmail, nu acceptă variabile CSS, care sunt folosite în exemplul pe care l-am oferit pentru a comuta între modurile deschise și cele întunecate. Aceasta înseamnă că poate fi necesar să utilizați tehnici alternative pentru a comuta între diferite versiuni ale imaginii sprite pentru diferite scheme de culori.

O altă limitare este că unii clienți de e-mail nu acceptă anumite proprietăți CSS care sunt utilizate în mod obișnuit în sprite-urile CSS, cum ar fi background-position. Acest lucru poate face dificilă poziționarea imaginilor individuale în fișierul de imagine sprite.

Douglas Karr

Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

Articole pe aceeaşi temă

Înapoi la butonul de sus
Închide

Blocarea reclamelor a fost detectată

Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.