Kako koristiti CSS sprijtove sa svijetlim i tamnim načinom rada
CSS sprite su tehnika koja se koristi u web razvoju za smanjenje broja HTTP zahtjeve koje postavlja web stranica. Oni uključuju kombiniranje više malih slika u jednu veću slikovnu datoteku, a zatim korištenje CSS-a za prikaz određenih dijelova te slike kao pojedinačnih elemenata na web stranici.
Primarna prednost upotrebe CSS sprijtova je da oni mogu pomoći da se poboljša vrijeme učitavanja stranice za web stranicu. Svaki put kada se slika učita na web stranicu, zahtijeva poseban HTTP zahtjev, što može usporiti proces učitavanja. Kombinovanjem više slika u jednu sprite sliku, možemo smanjiti broj HTTP zahtjeva potrebnih za učitavanje stranice. Ovo može rezultirati bržom i prilagodljivijom web-stranicom, posebno za web stranice s mnogo malih slika poput ikona i dugmadi.
Upotreba CSS sprite-a nam takođe omogućava da iskoristimo prednosti keširanja pretraživača. Kada korisnik posjeti web stranicu, njegov pretraživač će keširati sprite sliku nakon prvog zahtjeva. To znači da će naknadni zahtjevi za pojedinačnim elementima na web stranici koji koriste sprite sliku biti mnogo brži jer će pretraživač već imati sliku u svojoj keš memoriji.
CSS sprijtovi nisu toliko popularni kao što su nekada bili
CSS sprijtovi se i dalje često koriste za poboljšanje brzine web lokacije, iako možda nisu toliko popularni kao što su nekada bili. Zbog velike propusnosti, webp formati, kompresija slike, mreže za isporuku sadržaja (CDN), lijeno učitavanje, I jako keširanje tehnologije, ne vidimo toliko CSS sprijtova kao nekada na webu... iako je to i dalje odlična strategija. Posebno je korisno ako imate stranicu koja se poziva na mnoštvo malih slika.
Primjer CSS Sprite
Da bismo koristili CSS sprite, moramo definisati poziciju svake pojedinačne slike unutar datoteke sprite slike pomoću CSS-a. To se obično radi postavljanjem background-image
i background-position
svojstva za svaki element na web stranici koji koristi sprite sliku. Određivanjem x i y koordinata slike unutar sprite-a, možemo prikazati pojedinačne slike kao zasebne elemente na stranici. Evo primjera... imamo dva dugmeta u jednoj datoteci slike:
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 da prikažemo 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 sprijtovi za svijetli i tamni način rada
Jedna zanimljiva upotreba ovoga je sa svijetlim i tamnim načinima rada. Možda imate logotip ili sliku na kojoj se nalazi 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.
Koristeći CSS, mogu prikazati odgovarajuću pozadinu slike na osnovu toga da li korisnik koristi 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);
}
Izuzetak: Klijenti e-pošte možda ovo ne podržavaju
Neki klijenti e-pošte, kao što je Gmail, ne podržavaju CSS varijable, koje se koriste u primjeru koji sam naveo za prebacivanje između svijetlih i tamnih modova. To znači da ćete možda morati koristiti alternativne tehnike za prebacivanje između različitih verzija sprite slike za različite sheme boja.
Drugo ograničenje je da neki klijenti e-pošte ne podržavaju određena CSS svojstva koja se obično koriste u CSS sprijtovima, kao što je background-position
. Ovo može otežati pozicioniranje pojedinačnih slika unutar datoteke sprite slike.