CSS sprite: opis, osnovne tehnike i korisne preporuke

Moderna web stranica trebala bi biti brza, lijepa i učinkovita kako u fazi razvoja tako iu radu s klijentom. U pravilu, svaka tvrtka koja stvara internetske resurse, želi imati svoje lice, privlači posjetitelje svojim dizajnom, stilom, pouzdanošću, brzinom i drugim kvalitetama.

Korisna svojstva duhova

CSS-sprite dopušta poboljšanje kvalitativnih karakteristika mjesta i imidža tvrtke. U biti, to nije vrlo komplicirano sredstvo za razvojnog inženjera, ali ono stvarno ubrzava proces razvoja resursa i brzinu njihovog rada.


Između ostalog, kod je pojednostavljen i, u određenom smislu, postaje podnošljiv na druge resurse koji, zbog činjenice da se CSS sprite koristi, postaju slični bliskim rođacima, budući da možete koristiti iste grafičke ideje, stil dizajna. elementi dijaloga, struktura i sadržaj oznaka. U normalnom procesu izrade web stranice potrebno je napraviti mnogo slika. Vrlo često ove slike zauzimaju vrlo malo prostora, ali su uvijek zasebna datoteka. Za svaki operativni sustav bilo kojeg poslužitelja, otvaranje datoteke je dugotrajan rad, ali neće se značajno razlikovati u vremenu kada se datoteka otvori s 13 na 13 piksela i kada se datoteka od 16 slika otvori 5252 piksela. U prvom slučaju potrebno je imati 16 datoteka i 16 operacija otvaranja /čitanja, u drugom slučaju će se dobiti 16 slika kao rezultat otvaranja samo jedne datoteke. Ako stvarate skupove takvih datotekapo predmetu (horizontalni izbornik, obrasci dijaloga, gumbi kalkulatora, stavke kalendara), tada se takvi skupovi slika mogu prenijeti s mjesta na mobitel.


Na poleđini medalje

Kada postoje obožavatelji, previše živopisno preporučuju korištenje duhova CSS, nužno postoje oni koji pažljivo proučavaju problem i jasno pokazuju da je uvijek praktičnije raditi na stari način , Doista, ako umjesto 16 slikovnih datoteka postoji jedna datoteka od 16 slika, tada će umjesto 16 operacija otvaranje /čitanje biti jedno. No, trik je u tome što svatko ima predmemoriju preglednika, a on učitava sve što je u ekstremnom slučaju. Osim toga, elementi stranice obično se učitavaju kada se stranica prvi put posjeti, a zatim se učitavaju samo promjene.
Drugi aspekt. Obično se slike režu, a ne lijepe u jednu datoteku. Nekako se tehnologija razvila i, bolje, običaj. Dizajner stvara raspored, raspored koristi njegove komade sitno nasjeckanih dijelova rasporeda. Protivnici duhova vjeruju da je prikupljanje više slika u jednoj datoteci dugotrajna lekcija koja povećava ukupno vrijeme razvoja stranice. Postoje i programeri koji razmatraju i optimiziraju broj HTTP zahtjeva, s obzirom da je ova lekcija pragmatičnija od CSS-a. Naravno, sve ove točke su važne, ali mnogo je veća ideja: sve treba primijeniti u razumnim granicama.

Automatizacija i CSS sprite

Ako nema smisla pokretati CSS generator duhova i dobiti pravudio dizajna, onda ništa ne sprječava da se ovaj dio sastavi na uobičajeni način. Ako uobičajena tehnologija dovodi do potrebe za rezanjem stotina slika, bolje je baciti javascript funkciju, koja će, ako je potrebno, odabrati regiju iz duhova i prikazati je.
Valja napomenuti, međutim, da je duh iz dva ili tri elementa ili desetak drugih - gdje nije otišao, ali kada je u slučaju stotina crteža, onda s pisanjem problema s javascript funkcijom, naravno, neće se pojaviti, ali koliko će raditi Osim toga, zalijepiti slike - ovaj, CSS sprite generator čini željenu sliku, a CSS kod je ispod njega, to je apsolutno isti, koliko će biti komponente sprite. Problemi će nastati prilikom obrade web-mjesta, mijenjanja dizajna, brisanja i dodavanja novih stavki. Prilikom razvijanja duhova ne biste trebali razmišljati o tome kako ga koristiti, već kako ga kasnije promijeniti.

Tematska korist od upotrebe duhova

Za razliku od CSS programskih jezika, ovo je relativno statičan skup pravila, sva njegova dinamika određena je pravilima i njihovim funkcionalnim sadržajem (prema standardu). S obzirom na duh, HTML, CSS u kompleksu, možete kreirati biblioteke tematskog dizajna.
Na primjer, dovršena opcija izbornika: jednostavno povezivanje više css-pravila, js-funkcija i uključivanje nekoliko HTML-kodova u kod, možete dobiti rezultat. Promjena sadržaja slike spritea može promijeniti izgled ovog izbornika. Nakon pročišćavanja tijela funkcije, možete podesiti funkciju. To će biti neka vrsta varijanteObjektno orijentirano programiranje (OOP). Nesumnjivo, to će biti živa ideja, ali neće biti previše živo isticati na pozadini drugih narječja OOP-a na stvarnim jezicima. Tek je početkom devedesetih, kada se PLO ponovno rodio i postao iznimno brz da osvoji mjesto pod suncem, predstavljala je konkretnu ideju i konkretan oblik njezina izraza, a danas su programeri izmislili toliko dijalekata koliko različitih jezika.

Igračke - zlatno dno za duhove

Kockanje i programiranje su nekompatibilni koncepti, ali kvalifikacija programera, piše igre, znatno se razlikuje od općeg bita (jednostavno kodiranje) i kreativnog (projektiranje i razvoj novih tehnologija i ideja). Igra dizajn privlači vektorske grafike, tako da kombinacija SVG-sprite + CSS-pravila nije samo zahtjev, ali se često transformira iz razvojnog objekta (site) u objekt stvarne igre. Konkretno, popularna igra Counter Strike odnosi se na pojmove sprite, sprej je u potpunosti shvaćen sinonimi: eksplozija, krv, prizor
Izraz "instaliraj sprite css v34" za posvećenu posve normalnu i razumljivu. Sprite je primio ne samo korisnost aplikacije u svojoj suštini, već je stvorio i nišu, koja je postala potpuno opremljena, pristupačna i razumljiva određenom krugu potrošača.

CSS sprite: primjer

Različite varijante koriste se za prebacivanje stranica stranice na jedan ili drugi jezik, ali ako se izbornik jezika izvodi kao ikona, tada rješenje koje koristi duh može izgledati ovako:

Očigledni nedostaci duhova

Prije svega, to je naporan i savjestan proces. Jedna stvar je rezati dizajn na male komadiće, a drugi - na skupljanje jedne slike od mnogih malih. Primijenite ideju platna i stavite na njega sve slike koje se koriste na stranici, apsolutno beznadno.
Čak ni uz pomoć generatora CSS spritea, poteškoće se ne mogu izbjeći, pogotovo kada je riječ o re-dizajniranju stranice. Stavite na desetke slika u slučaju - to nije niz stavki, grafika je grafika, obično je jednostavno izlaz na zaslon, ali ne pretražujte kod kao polje u potrazi za željenom stavkom. Standard i takvi programeri tvrde da kada je duh povezan s pozadinskim pravilom, to je samo pozadinska slika, a ne element stranice. Grafičku komponentu elemenata stranice treba manipulirati img oznakama. S tim je teško složiti se s jednostavnim razlogom da je pozadina bila mala kada se smatrala općom pozadinom. To je samo pozadina, bez obzira na sve - minijaturni element ili cijela stranica u cjelini. U međuvremenu, sama grafička komponenta ozbiljna je prepreka za korištenje duhova.

Inteligentna uporaba

Unatoč činjenici da se pojmovi "internetska tehnologija" i "visoke tehnologije" smatraju sinonimima, u praksi je to radno intenzivan i ponekad vrlo ne-tehnološki rad. Sprite nije posebno osjetljiv na druga uska grla u čistom programiranju na javascriptu ili PHP-u, kao iu razvoju potrebne funkcionalnosti, prilagodbi procesa punjenja web-mjesta informacijama ili, na primjer, pozadinomstvaranje arhivskih kopija.
Snaga i obećanje korištenih sustava upravljanja mjestima ponekad se kompenziraju nijansama njihove praktične primjene, a ručni razvoj resursa, u pravilu, dovodi do potrebe da se 1001. prepiše određeni algoritam. U kontekstu gore navedenog, važno je jednostavno koristiti u razumnim granicama sve ono što moderni alat pruža. Ne biste trebali biti preteški za primjenu na štetu drugog, a zlatno pravilo u izgradnji gradilišta sugerira sljedeće: ne morate razmišljati o tome kako obaviti posao što je prije moguće, već kako ga izvršiti kako bi u slučaju bilo kakve nepredviđene situacije bilo moguće brzo riješiti bilo koji problem.

Povezane publikacije