CSS sprites: opis, osnovne tehnike i korisne preporuke

Suvremena web stranica bi trebala biti brza, lijepa i učinkovita kako u fazi dizajna, tako iu suradnji s klijentom. U pravilu, svaka tvrtka koja stvara internetske resurse želi imati svoju osobu, privlači posjetitelje svojim dizajnom, stilom, pouzdanost, brzina i druge kvalitete.

Korisna svojstva spritova

CSS sprites omogućuju poboljšanje kvalitativnih karakteristika stranice i slike tvrtke. U biti, ovo nije vrlo složeni alat za razvojne programere, ali u stvari ubrzava proces razvoja resursa i brzinu njihovog rada.

Između ostalog, pojednostavljuje kod i, u izvjesnom smislu, to je prenosiv na druge resurse koji, s obzirom na činjenicu da su korišteni CSS-duhovi su slični kao i bliskih srodnika, jer možete koristiti dijalog iste grafičke ideje, stil dizajn elemenata, struktura i sadržaj oznaka.

U uobičajenom procesu razvoja web stranica, morate napraviti mnogo slika. Vrlo često ove slike zauzimaju vrlo malo prostora, ali uvijek su zasebna datoteka. Za bilo koji operativni sustav bilo kojeg poslužitelja otvorite datoteku - Ovaj postupak je dugotrajan, međutim, neće značajno razlikuju s obzirom na vrijeme kada je datoteka otvorena na 13 po 13 piksela, a kad je datoteka otvorena od 16 slika 52 po 52 piksela. U prvom slučaju morate imati 16 datoteka i 16 otvorenih / čitanih operacija, au drugom slučaju 16 slika će biti dobivena otvaranjem samo jedne datoteke.

Ako stvorite skupove takvih datoteka po temama (horizontalni izbornik, oblike dijaloga, kalkulatora, elemenata dizajna kalendara ...) tada se takvi skupovi slika mogu prenijeti s web stranice na web mjesto.

Na stražnjoj strani novčića

Kada postoje navijači koji su prebrzo preporučili korištenje CSS spritesa, svakako pronađite one koji pažljivo proučavaju pitanje i inteligentno pokazuju da je uvijek praktičnije raditi na staromodan način.

Doista, ako umjesto 16 slikovnih datoteka postoji jedna datoteka od 16 slika, a umjesto 16 operacija otvaranja / čitanja bit će jedno. No, trik je da svaki preglednik ima predmemoriju, i učitava nešto samo kao posljednje sredstvo. Osim toga, obično se elementi stranice učitavaju prilikom prvog posjeta stranici, a zatim se preuzimaju samo izmijenjene.

Još jedan aspekt. Obično se slike rezaju umjesto da se lijepe u jednu datoteku. Nekako se tehnologija razvila, bolje je reći, običaj. Dizajner stvara izgled, a izgled koristi svoje dijelove: sitno sjeckani dijelovi izgleda. Protivnici spritova smatraju da je zbirka nekoliko slika u jednoj datoteci dugotrajan zadatak, što povećava ukupni razvoj vremena stranice.

Postoje i programeri koji razmatraju i optimiziraju broj HTTP zahtjeva, vjerujući da je ova aktivnost pragmatičnija od CSS spritesa.

Svi navedeni trenuci nesumnjivo imaju značenje, ali mnogo je važnije mišljenje: sve se treba primijeniti u razumnim granicama.

Automatizacija i CSS sprites

Ako nema smisla pokrenuti generator CSS sprite i dobivanje pravog dijela dizajna, nema ništa zaustaviti samo da se taj dio na uobičajeni način. Ako uobičajena tehnologija dovodi do potrebe za rezanjem stotina slika, poželjno je skicirati jаvascript funkciju koja će nužno odabrati traženo područje od sprite i prikazati ga.

Valja napomenuti, međutim, da je duh od dva ili tri elementa, ili drugih desetak - U redu, ali kada se u sprite stotina crteža, neke s pisanjem probleme jаvascript-funkcija, naravno, neće dogoditi, ali koliko posla će trajati do stvaranja tako veliki duh ... Osim toga, ljepilo slike - ovo CSS Sprite generator i čini željenu sliku i CSS koda za to, nije ga bilo briga koliko će konstitutivni elementi duh. Problemi nastaju prilikom redizajnacije web-mjesta, promjene dizajna, brisanja i dodavanja novih stavki. Prilikom razvijanja sprite ne biste trebali razmišljati o tome kako ga koristiti, već kako je kasnije promijeniti.

Tematske prednosti korištenja spritova

Za razliku od CSS programskih jezika, ovo je relativno statičan skup pravila, sve njegove dinamike određene su pravilima i njihovim funkcionalnim sadržajem (standardno). S obzirom na složene spritove, HTML, CSS možete stvoriti tematske knjižnice dizajna-funkcionalnosti.

Na primjer, završena inačica izbornika: jednostavno povezivanjem nekoliko css-pravila, js-funkcija i uključivanje u kod neke HTML-divove, možete dobiti rezultat. Promjenom sadržaja sprite slike možete promijeniti izgled ovog izbornika. Navođenjem funkcijskog tijela, možete podesiti funkcionalnost.

Nabavite izvornu verziju objektno orijentirano programiranje (OOP). Bez sumnje, to će biti sjajna ideja, ali neće biti previše živo razlikovati od ostalih dijalekata OOP-a na stvarnim jezicima. To je samo u ranim 90-ih, kada je PLO je oživio i postao neobično brzo dobiti mjesto pod suncem, to je specifična ideja i konkretan oblik njezinog izražaja, ali sada programeri su došli do što više dijalekata kao što je raznolik ruski.

Igračke - rudnik zlata za spritove

Uzbuđenje i programiranje - nekompatibilni koncepti, ali programiranje vještine, pisanje igre, osjetno se razlikuje od obschebytovoy (jednostavno šifriranje) i kreativnog (dizajn i razvoj novih tehnologija, ideja).

Igra dizajn žalbe na vektorske grafike, jer kombinacija SVG-sprites + CSS-pravila ne samo potražnje, ali često postaje predmet developer (stranice) za predmet stvarne igre. Konkretno, popularna igra Counter Strike odnosi se na pojmove spritova, sprejevi su vrlo smisleni sinonimi: eksplozija, krv, vid ...

Izraz "install sprites css v34" za inicijativu je sasvim normalan i razumljiv. Sprite su stekli ne samo korisnost u primjeni u svojoj biti, nego su stvorili nišu koja je postala potpuno funkcionalna, dostupna i razumljiva određenom krugu potrošača.

CSS sprites: primjer

Da biste promijenili stranice web mjesta na jedan ili drugi jezik, koriste se različite opcije, ali ako se izbornik jezika izvodi u obliku ikone, rješenje pomoću spritea može izgledati ovako:

Očigledni nedostaci spritova

Prije svega, to je dugotrajan i skrupulozan proces. Jedna je stvar za rezanje dizajna u male dijelove, a drugo je prikupiti jednu sliku od mnogih malih. Primijenite ideju o platnu i stavite na njega sve slike korištene na web mjestu, potpuno uzaludne.

Čak i pomoću CSS sprite generatora, teškoće se ne mogu izbjeći, pogotovo kada morate redizajnirati web dizajn. Postavite u sprite nekoliko desetaka slika - to nije niz elemenata, grafika je grafika, obično se jednostavno prikazuje na zaslonu, a ne sortirana u kodu kao niz u potrazi za željenim elementom.

Standard i razvojni programeri koji slijede ga tvrde da budući da su spritevi povezani s pravilom pozadine, onda je to isključivo pozadinska slika, a ne element web mjesta. Grafička komponenta elemenata stranice trebala bi manipulirati img oznakama.

S tim se teško složiti na jednostavnoj osnovi da se pozadina ne percipira kao opće stanje. To je samo pozadina, bez obzira na sve - minijaturni element ili cijela stranica kao cjelina.

U međuvremenu, to je grafička komponenta koja je ozbiljna prepreka u korištenju spritesa.

Razumna upotreba

Unatoč činjenici da su pojmovi „Internet tehnologija” i „visoke tehnologije” se smatra sinonimom, u stvari, to je dugotrajan i ponekad vrlo low-tech posao. Duhovi nisu posebno obučeni u odnosu na druge uskih grla u čistom programiranje u jаvascriptu ili PHP, kao i na razvoj potrebne funkcionalnosti, procese punjenja stranica ili informacija, kao što su pozadine stvaranja arhivske kopije postavljanje.

Snaga i izgledi za korištenje sustava za upravljanje sadržajem često izravnati nijanse njihove praktične primjene i razvoja priručnik resursa, u pravilu, dovodi do potrebe za 1001. Vrijeme prepisati jedno ili drugo vlastiti algoritam.

U kontekstu onoga što je rečeno, važno je jednostavno koristiti u razumnim granicama sve ono što moderni instrument pruža. Nemojte biti previše nestrpljiv da koristite jedan nad drugim, a zlatno pravilo u položaj zgrade glasi: morate razmišljati ne o tome kako proći posao što je prije moguće, i kako ga izvršiti tako da se u slučaju bilo kakve nepredviđene situacije može biti brzo riješen bilo koji problem.