Koncept spritov obstaja že nekaj časa. To je ena najpogosteje uporabljenih tehnik v industriji iger za pospešitev postopka prikazovanja animacij na zaslonu. V tem članku bomo še posebej preučili, kako nam ta tehnika lahko pomaga izboljšati uporabniško izkušnjo na spletnih straneh s pomočjo CSS Sprites v naslednjem vrstnem redu:
- Kaj je Sprite?
- Kaj je CSS Sprite - kratek pregled?
- Primer, kako pomaga pri spletnem razvoju?
- Prednosti uporabe CSS Sprite
- Kaj mora razvijalec storiti pri delu s CSS Sprites?
- Kako ustvariti CSS Sprite Sheet?
- Kako delati s CSS Sprites?
- Podjetja, ki uporabljajo CSS Sprites
Kaj je Sprite?
Sprite je ena slika, ki je del večje scene v igri. Nato se več spritov združi v veliko sliko, imenovano sprite sheet. Ko se list sprite naloži v pomnilnik, se različni spriti hitro upodobijo, da ustvarijo iluzijo animacije. To se hkrati naredi za deset do sto različnih spritov, da se ustvari prizor v igri.
Osnovna ideja je, da je veliko hitreje naložiti sliko in prikazati njen del, kjer koli je to potrebno, v primerjavi z nalaganjem več slik in njihovo prikazovanje.
Kaj je CSS Sprite: kratek pregled?
Sprite CSS je tehnika, ki jo spletni razvijalci pogosto uporabljajo za optimizacijo delovanja spletnih strani. Pri tej tehniki se več manjših slik, običajno enakih dimenzij, združi v eno veliko sliko, imenovano a sprite list ali komplet ploščic . Ta sprite list se nato uporablja za prikaz posameznih elementov, kjer koli jih potrebujemo.
Običajno so elementi, kot so logotipi, puščice za krmarjenje, gumbi, vključeni v list sprite, saj so skoraj enakih dimenzij in se pogosto uporabljajo na spletni strani.
Primer, kako pomaga pri spletnem razvoju?
Na splošno se slike pri oblikovanju spletnih strani shranijo in uporabljajo kot posamezne datoteke. Ko uporabnik odpre spletno stran, mora brskalnik za vsako od teh datotek narediti zahtevo HTTP, jo naložiti ločeno in prikazati. To vodi k večjim časom nalaganja strani, saj ima lahko določena spletna stran veliko število manjših slik, kot so gumbi, ikone in logotipi.
Sprite CSS pomagajo razvijalcem, da te pogosto uporabljene majhne slike kombinirajo v eno veliko sliko. Nato mora brskalnik prenesti samo eno datoteko, ki je nato vajenaprikažite zahtevani odsek z odmikom slike.
Prednosti uporabe CSS Sprite
Obstajata dve glavni prednosti uporabe CSS spritev pred običajnimi slikami:
Hitrejše nalaganje strani: Izboljša čas nalaganja strani, saj se slike, uporabljene na spletni strani, pojavijo takoj, ko se list prenese.
Večja pretočnost in manjša poraba virov: Ne samo, da ta tehnika izboljšuje izkušnjo končnega uporabnika s hitrejšim nalaganjem strani,zmanjšuje pa tudi preobremenjenost omrežja, saj je poslanih manj zahtev HTTP.
Kaj mora razvijalec narediti pri delu s CSS Sprites?
Pri delu s posameznimi slikami lahko razvijalec preprosto dela z oznako HTML in ga po potrebi oblikujte v CSS. Toda pri delu s CSS Sprites mora razvijalec narediti dve posebni stvari:
- Ustvarjanje sprite lista
Če se razvijalec odloči, da bo uporabil CSS sprite, mora med izdelavo spletne strani najprej ustvariti list sprite, tako da vse želene elemente, kot so gumbi, logotipi itd., Združi v mrežni vzorec. To lahko storite s katerim koli programom za urejanje slik, kot sta Photoshop ali Gimp. Na voljo je tudi veliko spletnih orodij, ki vam pomagajo narediti list za sprite. Ta orodja so obravnavana kasneje v tem članku.
- Dostopite do določenega elementa sprite s pomočjo Položaj ozadja CSS lastnine
Ko je list sprite pripravljen, mora razvijalec nato uporabiti atribute CSS za dostop do različnih delov lista.
- premer: Širina spritea
- višina: Višina sprite
- ozadje: Sklic na list sprite
- Položaj ozadja: Vrednosti odmika (v slikovnih pikah) za dostop samo do zahtevanega dela lista sprite
Kako ustvariti CSS Sprite Sheet?
Za razporeditev manjših slik v mrežo lahko uporabite katero koli programsko opremo za urejanje slik, vendar sta spodaj obravnavana dva lažja načina:
1. Spletno orodje za ustvarjanje sprite listov
POVEZAVA: toptal.com/developers/css/sprite-generator/
kako ustvariti paket
To orodje ni samo brezplačno za uporabo, temveč vam ponuja tudi potrebno kodo CSS, ki jo lahko uporabite pri sklicevanju na list sprite. Prav tako se lahko poigravate z različnimi lastnostmi, na primer z oblazinjenjem elementov in spreminjanjem njihove poravnave.
2. Ustvarjanje sprite lista s Sprity
Če uporabljate Grunt, Node ali Gulp, lahko namestite paket Sprity, ki vam bo pomagal ustvariti list sprite v različnih oblikah, kot so PNG, JPG itd.
Najprej boste morali namestiti Sprity z uporabo:
npm namestite sprity -g
Nato za ustvarjanje sprite lista uporabite naslednji ukaz:
sprity ./output-directory/ ./input-directory/*.png
Kako delati s CSS Sprites?
V tem primeru bomo uporabili naslednji list sprite:
Kot lahko vidite na zgornji sliki, je bilo šest ikon (Instagram, Twitter in Facebook) razporejenih po mrežastem vzorcu. V prvi vrstici imamo normalno stanje, v drugi vrstici pa njihovo stanje lebdenja (slika, ki se prikaže, ko nanje premaknemo miškin kazalec).
Če ste sprite list izdelali z orodji, o katerih smo razpravljali zgoraj, potem že poznate odmike, ki jih zahteva CSS, če pa ste uporabili drugo orodje ali ste preprosto dobili nekaj sprite listov, potem ne skrbite, bomo razpravljali o metodi, ki vam bo pomagal nadomestiti zahtevani element.
Zdaj si oglejmo zelo preprost način za pridobitev potrebnih odmikov za vsako od šestih ikon z uporabo MS Paint. Morda ni idealna rešitev za delo s prajti, a ker ima funkcijo, ki zagotavlja koordinate kazalca miške, jo lahko uporabimo za pridobitev zahtevanih koordinat X in Y.
Najprej odprite sliko lista sprite (mreža, ki vsebuje vse manjše slike) in postavite kazalec miške v zgornji levi kot sprite, ki ga želite zajeti.
Ko imate koordinate zgornje leve točke vašega spriteta (zgoraj levo Instagram slika), lahko s pomočjo kode CSS prikažete ta določen sprite, kjer koli je to potrebno:
ozadje: url ('img_sprites.png')
položaj ozadja: 0 0
širina: 125 slikovnih pik
višina: 125px
Širino in višino uporabljamo kot 125 slikovnih pik, saj so naše ikone te dimenzije. Za pridobitev naslednje slike (Twitter) v isti vrstici uporabimo naslednjo kodo:
ozadje: url ('img_sprites.png')
položaj ozadja: -128px 0px
širina: 125 slikovnih pik
višina: 125px
Upoštevajte atribut položaja ozadja v zgornjem delčku. (-128px, 0) pomeni, da premaknemo naš list sprite v levo za 128 slikovnih pik (pri čemer upoštevamo oblazinjenje med elementi) in 0 slikovnih pik na osi Y. Če bi dostopali do ikone lebdenja twitterja, bi bil naš atribut položaja ozadja:
položaj ozadja: -128px -128px
Na ta način lahko zdaj s pomočjo CSS dostopamo do vsake komponente našega sprite lista. Pojdimo skozi celotno kodo HTML in CSS, kako to storiti.
Korak 1: Pisanje zahtevane kode HTML
V spodnjo kodo preprosto dodamo tri povezave. Prav tako bomo povezali naš HTML s tabelo slogov (screen.css).
2. korak: Pisanje potrebnega CSS. Najprej bomo oblikovali svoj skupni razred ikon. Tu lahko vidite, da se sklicujemo na sprite list, ki smo ga ustvarili.
/ * Ikona v skupni rabi Razred * /
span.icon a: povezava,
span.icon a: obiskal{
zaslon:blok
zamik besedila:-9999px
primer argumentov ukazne vrstice java
slika ozadja: url (./ img_sprites.png)
ozadje-ponovitev:brez ponovitve
}
3. korak: Pridobivanje posameznih ikon s sprite lista s pomočjo odmikov.
/ * Ikona Instagrama * /
span.instagram a: povezava,
span.instagram a: obiskal{
premer:125 slikovnih pik
višina:125 slikovnih pik
kako uporabljati java swing -
položaj ozadja:0 0
}
/ * Ikona Twitterja * /
span.twitter a: povezava,
span.twitter a: obiskal{
premer:125 slikovnih pik
višina:125 slikovnih pik
položaj ozadja:-128 slikovnih pik 0
}
/ * Facebook ikona * /
span.facebook a: povezava,
span.facebook a: obiskal{
premer:125 slikovnih pik
višina:125 slikovnih pik
položaj ozadja:-257px 0
}
4. korak: Pridobivanje lebdečih ikon s lista sprite z uporabo odmikov.
span.instagram a: hover{položaj ozadja:0 -128 slikovnih pik}
span.twitter a: hover{položaj ozadja:-128 slikovnih pik -128 slikovnih pik}
span.facebook a: hover{položaj ozadja:-255 slikovnih pik -128 slikovnih pik}
Podjetja, ki uporabljajo CSS Sprites
Številna velika imena v panogi uporabljajo CSS Sprites za izboljšanje odzivnosti svojih spletnih mest. Podjetja, kot so Google, Facebook, Amazon, pogosto uporabljajo to metodo, saj jim pomaga zmanjšati število HTTP zahtev na sejo za določenega uporabnika. To je velika korist, če upoštevamo, da ta podjetja v danem trenutku opslužijo milijone strank.
Zdaj, ko ste spoznali, kaj so sprite CSS in kako z njimi delati, ste korak bližje na poti k učenju CSS. Koncepti, kot so sprites, v današnjem času spreminjajo igro, saj je za razvijalce postalo izjemno pomembno, da iz spletne strani izluščijo vsak del zmogljivosti.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega življenja To usposabljanje vam omogoči, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje bloga 'HTML Images' in se bomo javili.