Content marketing

Kako koristiti CSS spriteove sa svijetlim i tamnim načinom rada

CSS spriteovi su tehnika koja se koristi u web razvoju za smanjenje broja HTTP zahtjeve web stranice. Uključuju kombiniranje više malih slika u jednu veću slikovnu datoteku i zatim korištenje CSS-a za prikaz određenih dijelova te slike kao pojedinačnih elemenata na web stranici.

Primarna prednost korištenja CSS spriteova je ta što mogu poboljšati vrijeme učitavanja stranice za web mjesto. Svaki put kada se slika učitava na web-stranici, potreban je zaseban HTTP zahtjev, što može usporiti proces učitavanja. Kombiniranjem više slika u jednu sprite sliku, možemo smanjiti broj HTTP zahtjeva potrebnih za učitavanje stranice. To može rezultirati bržim i responzivnijim web mjestom, posebno za web mjesta s mnogo malih slika poput ikona i gumba.

Korištenje CSS spriteova također nam omogućuje da iskoristimo predmemoriju preglednika. Kada korisnik posjeti web stranicu, njegov će preglednik pohraniti sliku spritea u predmemoriju nakon prvog zahtjeva. To znači da će naknadni zahtjevi za pojedinačne elemente na web stranici koji koriste sliku spritea biti mnogo brži budući da će preglednik već imati sliku u svojoj predmemoriji.

CSS spriteovi nisu tako popularni kao što su nekada bili

CSS spriteovi još uvijek se često koriste za poboljšanje brzine web stranice, iako možda nisu toliko popularni kao što su nekad bili. Zbog velike propusnosti, webp formati, kompresija slike, mreže za isporuku sadržaja (CDN), lijeno učitavanjei jako predmemoriranje tehnologije, ne vidimo toliko CSS spriteova kao prije na webu... iako je to još uvijek odlična strategija. Osobito je korisno ako imate stranicu koja se poziva na mnoštvo malih slika.

Primjer CSS Sprite

Da bismo koristili CSS spriteove, moramo definirati položaj svake pojedinačne slike unutar slikovne datoteke spritea koristeći CSS. To se obično radi postavljanjem background-image i background-position svojstva za svaki element na web stranici koji koristi sliku spritea. Određivanjem x i y koordinata slike unutar spritea možemo prikazati pojedinačne slike kao zasebne elemente na stranici. Evo primjera… imamo dva gumba u jednoj slikovnoj datoteci:

Primjer CSS Sprite

Ako želimo da se prikaže slika s lijeve strane, možemo dati div sa arrow-left kao klasa tako da koordinate prikazuju samo tu stranu:

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

A ako želimo prikazati desnu strelicu, postavili bismo klasu za naš div na arrow-right.

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

CSS spriteovi za svijetli i tamni način rada

Jedna zanimljiva upotreba ovoga je sa svijetlim i tamnim modovima. Možda imate logotip ili sliku na kojoj je tamni tekst koji nije vidljiv na tamnoj pozadini. Napravio sam ovaj primjer gumba koji ima bijeli centar za svijetli način i tamni centar za tamni način.

css sprite svijetlo tamno

Koristeći CSS, mogu prikazati odgovarajuću pozadinu slike ovisno o tome koristi li korisnik svijetli ili tamni način:

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

Iznimka: klijenti e-pošte ovo možda ne podržavaju

Neki klijenti e-pošte, poput Gmaila, ne podržavaju CSS varijable, koje se koriste u primjeru koji sam naveo za prebacivanje između svijetlog i tamnog načina rada. To znači da ćete možda morati upotrijebiti alternativne tehnike za prebacivanje između različitih verzija slike spritea za različite sheme boja.

Još jedno ograničenje je da neki klijenti e-pošte ne podržavaju određena CSS svojstva koja se obično koriste u CSS spriteovima, kao što je background-position. To može otežati pozicioniranje pojedinačnih slika unutar slikovne datoteke spritea.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.