Kako implementirati CSS Spriteove za poboljšanje web-stranica

Ovaj će vam članak pružiti detaljno i sveobuhvatno znanje o CSS SPritesima i kako se mogu koristiti za izravnavanje web stranica.

Koncept spriteova postoji već neko vrijeme. Jedna je od najčešće korištenih tehnika u industriji igara za ubrzavanje procesa prikazivanja animacija na zaslonu. U ovom ćemo članku posebno pogledati kako nam ova tehnika može pomoći u poboljšanju korisničkog iskustva na web stranicama uz pomoć CSS Spritesa sljedećim redoslijedom:

Što je Sprite?

Sprite je pojedinačna slika koja je dio veće scene u igri. Više se spriteova zatim kombinira u veliku sliku koja se naziva list spritea. Jednom kada se list spritea učita u memoriju, različiti se spritovi generiraju u brzom slijedu dajući iluziju animacije. To se istovremeno radi na desetke do stotine različitih spriteova kako bi se stvorila scena u igri.



CSS Sprites

binarni u decimalni pretvarač java

Osnovna ideja je da je puno brže učitati sliku i prikazati njezin dio gdje god je to potrebno u usporedbi s učitavanjem više slika i prikazati ih.

Što je CSS Sprite: brzi pregled?

CSS sprite tehnika je koju web programeri često koriste za optimizaciju izvedbe web stranica. U ovoj se tehnici više manjih slika obično istih dimenzija kombinira u jednu veliku sliku koja se naziva a list spritea ili set pločica . Ovaj list sprite se zatim koristi za prikaz pojedinačnih elemenata gdje god su nam potrebni.

Obično su elementi poput logotipa, strelica za navigaciju, gumba uključeni u list spritea jer su gotovo istih dimenzija i često se koriste na web stranici.

Primjer kako pomaže u web razvoju?

Općenito, tijekom dizajniranja web stranica slike se pohranjuju i koriste kao pojedinačne datoteke. Dakle, kada korisnik otvori web stranicu, preglednik mora poslati HTTP zahtjev za svaku od tih datoteka, preuzeti ih zasebno i prikazati. To dovodi do većeg učitavanja stranice jer određena web stranica može imati velik broj manjih slika poput gumba, ikona i logotipa.

CSS spritovi pomažu programerima da kombiniraju ove često korištene male slike u jednu veliku sliku. Tada preglednik mora preuzeti samo jednu datoteku na koju se zatim koristiprikazati traženi odjeljak pomicanjem slike.

Prednosti upotrebe CSS spriteova

Dvije su glavne prednosti upotrebe CSS spriteova u odnosu na normalne slike:

  • Brže učitavanje stranice: Povećava vrijeme učitavanja stranice jer se slike korištene na web stranici pojavljuju čim se list preuzme.

  • Veća propusnost i manja potrošnja resursa: Ne samo da ova tehnika poboljšava doživljaj krajnjeg korisnika ubrzavanjem učitavanja stranice,ali također smanjuje zagušenje mreže jer se daje manji broj HTTP zahtjeva.

Što programer mora učiniti kada radi s CSS Spritesima?

Kada radi s pojedinačnim slikama, programer može jednostavno raditi s HTML oznakom i po potrebi ga stilizirajte u CSS. Ali kada radi s CSS Spritesom, programer mora napraviti dvije specifične stvari:

  • Stvaranje sprite lista

Dok razvija web stranicu ako programer odluči koristiti CSS spriteove, mora prvo stvoriti list spritea spajanjem svih željenih elemenata poput gumba, logotipa itd. U obliku mreže. To se može učiniti pomoću bilo kojeg programa za uređivanje slika, poput Photoshopa ili Gimpa. Dostupni su i mnogi mrežni alati koji vam pomažu u izradi lista spriteta. O tim se alatima govori kasnije u ovom članku.

  • Pristupite određenom elementu spritea pomoću CSS pozadinska pozicija imovine

Jednom kad je list spritea spreman, programer tada mora koristiti CSS atribute za pristup različitim dijelovima lista.

  • širina: Širina spriteta
  • visina: Visina spriteta
  • pozadina: Upućivanje na list spritea
  • Položaj u pozadini: Vrijednosti pomaka (u pikselima) za pristup samo traženom dijelu lista spriteta

Kako stvoriti CSS Sprite list?

Možete koristiti bilo koji softver za uređivanje slika da biste svoje manje slike rasporedili u mrežu, ali u nastavku se razmatraju dvije lakše metode:

1. Alat za izradu internetskih sprite listova

VEZA: toptal.com/developers/css/sprite-generator/

Ovaj alat ne samo da je besplatan za upotrebu, već vam pruža i potreban CSS kôd koji se može koristiti prilikom referenciranja na list spritea. Također, možete petljati oko različitih svojstava, poput podmetanja između elemenata i mijenjanja njihovog poravnanja.

2. Generiranje sprite lista s Sprityjem

Ako koristite Grunt, Node ili Gulp, možete instalirati paket nazvan Sprity koji će vam pomoći stvoriti list spritea u različitim formatima poput PNG, JPG itd.

Prvo, morat ćete instalirati Sprity koristeći:

npm instalirati sprity -g

Zatim, za generiranje sprite lista, upotrijebite sljedeću naredbu:

sprity ./izlaz-direktorij/ ./ulaz-direktorij/*.png

Kako raditi sa CSS Spritesima?

U ovom ćemo primjeru koristiti sljedeći list spritea:

Kao što možete vidjeti na gornjoj slici, šest ikona (Instagram, Twitter i Facebook) raspoređeno je u obliku mreže. U prvom redu imamo normalno stanje, a u drugom redu imamo njihovo stanje lebdenja (slika koja se pojavi kada na njih zadržimo pokazivač miša).

Ako ste sprit list napravili pomoću alata o kojima smo gore govorili, tada već znate pomake potrebne u CSS-u, ali ako ste koristili neki drugi alat ili vam je jednostavno dat neki sprite list, onda ne brinite, razgovarat ćemo o metodi koja pomoći će vam da nadoknadite traženi element.

Pogledajmo sada vrlo jednostavan način za dobivanje potrebnih pomaka za svaku od šest ikona pomoću MS Paint-a. Možda nije idealno rješenje za rad sa spritovima, ali budući da ima značajku koja pruža koordinate pokazivača miša, može se koristiti za dobivanje potrebnih X i Y koordinata.

Prvo otvorite sliku lista spritea (mreža koja sadrži sve manje slike) i postavite kursor miša u gornji lijevi kut spritea koji želite zgrabiti.

Jednom kada imate koordinate gornje lijeve točke vašeg spriteta (gornja lijeva Instagram slika), možete prikazati ovaj određeni sprite gdje god je potrebno pomoću CSS koda:

pozadina: url ('img_sprites.png')
pozadinski položaj: 0 0
širina: 125px
visina: 125px

Širinu i visinu koristimo kao 125 piksela jer su naše ikone te dimenzije. Da bismo preuzeli sljedeću sliku (Twitter) u istom retku, koristimo sljedeći kod:

pozadina: url ('img_sprites.png')
pozicija u pozadini: -128px 0px
širina: 125px
visina: 125px

Obratite pažnju na atribut položaja-pozadine u gornjem isječku. (-128px, 0) znači da pomičemo naš list spritea ulijevo za 128 piksela (uzimajući u obzir rastojanje između elemenata) i 0 piksela na Y-osi. Ako bismo pristupili ikoni twitter hover, tada bi naš atribut pozadinskog položaja bio:

pozicija u pozadini: -128px -128px

Na taj način sada možemo pristupiti svakoj komponenti našeg lista spritea pomoću CSS-a. Prođimo kroz cjelovit HTML i CSS kôd kako to učiniti.

Korak 1: Pisanje potrebnog HTML koda

U donjem kodu jednostavno dodajemo tri veze. Također, povezat ćemo naš HTML s tablicom stilova (screen.css).

razred='ikona instagrama'> href='#'>Instagram

razred='ikona twittera'> href='#'>Cvrkut

razred='ikona facebooka'> href='#'>Facebook

Korak 2: Pisanje potrebnog CSS-a. Prvo ćemo oblikovati našu zajedničku klasu ikona. Ovdje možete vidjeti da se pozivamo na list spritea koji smo stvorili.

/ * Dijeljena ikona Klasa * /

raspon.icon poveznica,

raspon.icon a: posjećeno{

prikaz:blok

uvlaka teksta:-9999 piksela

pozadinska slika: url (./ img_sprites.png)

pozadina-ponavljanje:bez ponavljanja

}

Korak 3: Dobivanje pojedinačnih ikona sa sprite lista pomoću pomaka.

/ * Instagram ikona * /

raspon.instagram poveznica,

raspon.instagram a: posjećeno{

širina:125 piksela

visina:125 piksela

pozadinski položaj:0 0

}

/ * Twitter ikona * /

span.twitter poveznica,

span.twitter a: posjećeno{

širina:125 piksela

visina:125 piksela

pozadinski položaj:-128px 0

}

/ * Facebook ikona * /

span.facebook poveznica,

span.facebook a: posjećeno{

širina:125 piksela

visina:125 piksela

pozadinski položaj:-257px 0

}

Korak 4: Dobivanje ikona lebdenja sa sprite lista pomoću pomaka.

raspon.instagram a: hover{pozadinski položaj:0 -128px}

span.twitter a: hover{pozadinski položaj:-128px -128px}

span.facebook a: hover{pozadinski položaj:-255px -128px}

Tvrtke koje koriste CSS Sprites

Mnoga velika imena u industriji koriste CSS Sprites kako bi poboljšali odziv svojih web stranica. Tvrtke poput Googlea, Facebooka i Amazona u velikoj mjeri koriste ovu metodu jer im to pomaže da smanje određeni broj HTTP zahtjeva po sesiji za određenog korisnika. To je ogromna korist ako uzmemo u obzir da te tvrtke u bilo kojem trenutku opslužuju milijune kupaca.

Sad kad ste shvatili što su CSS spriteovi i kako raditi s njima, korak ste bliže svom putovanju kako biste naučili CSS. Koncepti poput sprita mijenjaju igru ​​u današnje vrijeme jer je programerima postalo izuzetno važno izvući svaki djelić izvedbe s web stranice.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare na blogu 'HTML Images' i javit ćemo vam se.