CSS sprites: opis, osnovne tehnike in uporabna priporočila

Moderna spletna stran mora biti hitra, lepa in učinkovita v fazi projektiranja in pri delu s stranko. Praviloma vsaka družba, ki ustvarja internetne vire, želi imeti svojo lastno osebo, privabiti obiskovalce po zasnovi, slogu, zanesljivosti, hitrosti in drugih lastnostih.

Koristne lastnosti spritev

CSS sprite omogočajo izboljšanje tako kakovostnih značilnosti mesta kot tudi podobo podjetja. V bistvu to ni zelo zapleteno razvijalsko orodje, ampak resnično pospeši proces razvoja virov in hitrosti njihovega dela.

Med drugim poenostavlja kodo in, v nekem smislu, da je prenosni na druge vire, da zaradi dejstva, da so uporabljeni CSS-sprites podobno kot bližnje sorodnike, saj lahko uporabite dialog isti grafičnih idej, oblikovanje slog elementi, strukturo in vsebino oznak.

V običajnem procesu razvoja spletnega mesta morate narediti veliko slik. Zelo pogosto te slike zasedajo zelo malo prostora, vendar so vedno ločene datoteke. Za kateri koli operacijski sistem katerega koli strežnika je odprtje datoteke operacija, ki traja veliko časa, vendar se ne bo znatno razlikovala v času, ko se datoteka odpre za 13 pikslov na 13 pikslov, in ko se odpre datoteka s 16 slikami 52 na 52 pikslov. V prvem primeru morate imeti 16 datotek in 16 odprtih / branih operacij, v drugem primeru pa 16 slik, ki jih dobite z odpiranjem samo ene datoteke.

Če ustvarite nabore takšnih datotek po temah (horizontalni meni, oblike dialoga, gumbi kalkulatorja, elementi koledarja ...), potem se taki nabor slik lahko prenesejo z mesta na spletno stran.

Na hrbtni strani kovanca

Ko so ventilatorji, preveč poskočno priporoča uporabo CSS sprites so nujno tisti, ki so skrbno preučuje vprašanje in jasno kaže, da je vedno praktično delo na starinski način.

Dejansko, če namesto 16 slikovnih datotek obstaja ena datoteka s 16 slikami, potem bo namesto 16 operacij odpiranja / branja ena. Toda trik je, da vsak brskalnik ima predpomnilnik in naloži nekaj le kot zadnjo možnost. Poleg tega se ponavadi elementi strani naložijo, ko prvič obiščete stran, nato pa se prenesejo samo spremenjeni.

Drug vidik. Slike se običajno prekrivajo in ne lepljajo v eno datoteko. Nekako se je tehnologija razvila, bolje je reči, po meri. Oblikovalec ustvari razporeditev in postavitev uporablja svoje dele: drobno sesekljane dele postavitve. Nasprotniki spritev verjamejo, da je zbiranje več slik v eni datoteki dolgotrajen, kar povečuje celotni čas razvoja strani.

Obstajajo tudi razvijalci, ki upoštevajo in optimizirajo število zahtev HTTP, verjamejo, da je ta dejavnost bolj pragmatična kot CSS sprites.

Vsi navedeni momenti so nedvomno pomembni, vendar je veliko bolj pomembno mnenje: vse je treba uporabljati v razumnih mejah.

Avtomatizacija in CSS sprites

Če ni smisla izvajati CSS generatorja in pridobiti pravi del zasnove, nič ne more ustaviti, da bi ta del naredil na običajen način. Če konvencionalna tehnologija omogoča, da je treba zmanjšati na stotine slik, je bolje, da skico jаvascript-funkcijo, ki je nujno bo izberejo želenega območja sprite in jo prikaže.

Opozoriti je treba, kljub temu, da je Sprite iz dveh ali treh elementov, ali drugih deset - vse v redu, ko pa v Sprite sto risb, nekateri s pisanjem težave jаvascript funkcijo, seveda, ne bo prišlo, ampak koliko dela bo trajalo, da ustvarjanje tako velika Sprite ... Poleg tega, lepilo slike - ta CSS Sprite generator in naredi želeno sliko in CSS-koda za to, mu ni bilo mar, koliko bo sestavni elementi Vilenjak. Težave se pojavijo, ko spremenite spletno mesto, spremenite načrtovanje, izbrišete in dodate nove predmete. Pri razvijanju sprite ne smete razmišljati o tem, kako ga uporabiti, ampak kako jo kasneje spremeniti.

Tematske prednosti uporabe spritev

Za razliko od programskih jezikov CSS je to sorazmerno statičen niz pravil, vse njegove dinamike pa so določene s pravili in funkcionalno vsebino (po standardu). Ob upoštevanju kompleksnih spritev, HTML, CSS lahko ustvarite tematske knjižnice oblikovalskih funkcij.

Na primer, končana različica menija: preprosto s povezavo več css-pravil, js-funkcij in vključno z nekaterimi HTML-divi v kodi, lahko dobite rezultat. S spreminjanjem vsebine sprite slike lahko spremenite videz tega menija. Z določitvijo telesa funkcije lahko prilagodite funkcionalnost.

Pridobite izvirno različico objektno orientirano programiranje (OOP). Seveda bi bilo svetla ideja, vendar to ne bo preveč svetla, da izstopajo v ozadju drugih OOP jezikov, narečij resnično. To je samo v zgodnjih 90. letih, ko je PLO oživel in postal nenavadno hitro pridobijo mesto v soncu, je posebna ideja in konkretna oblika njegovega izražanja, zdaj pa so se razvijalci prišli do čim več narečij, kot je tam raznolika rusko.

Igrače - rudnik zlata za sprite

Razburjenje in programiranje sta nezdružljivi koncepti, vendar se kvalifikacije pisateljevih iger razlikujejo izrazito od skupnega (enostavnega kodiranja) in ustvarjalnosti (oblikovanje in razvoj novih tehnologij, idej).

Igra oblikuje pritožbe na vektorsko grafiko, ker kombinacija pravil SVG sprite + CSS ni samo v povpraševanju, temveč se pogosto spreminja iz predmeta razvijalca (mesta) v predmet resnične igre. Še posebej priljubljena igra Counter Strike velja za pogoje spritev, razpršila so precej pomembne sopomenke: eksplozija, kri, vid ...

Fraza "install sprites css v34" za iniciatorja je povsem normalna in razumljiva. Sprite niso pridobili samo koristnosti pri uporabi v svojem bistvu, temveč so oblikovali tudi nišo, ki je postala popolnoma funkcionalna, dostopna in razumljiva določenemu krogu potrošnikov.

CSS sprites: primer

Če želite straneh strani spremeniti v en ali drug jezik, se uporabljajo različne možnosti, vendar če je izbirnik jezika izveden v obliki ikone, lahko rešitev, ki uporablja sprite, izgleda takole:

Očitne pomanjkljivosti spritev

Najprej je dolgotrajen in skromen proces. Ena stvar je, da razrežite oblikovanje na majhne koščke, druga pa je zbrati eno sliko iz številnih majhnih. Uporabite idejo o platnu in jo postavite na vse slike, uporabljene na spletnem mestu, popolnoma brezplodne.

Tudi s pomočjo generatorja CSS sprite se težavam ni mogoče izogniti, še posebej, če morate preoblikovati oblikovanje spletnega mesta. Dodaj v nekaj deset Sprite slik - to ni niz elementov, grafika imajo grafiko, to je ponavadi samo prikaže na zaslonu, namesto da kodo razvrščanje kot niz, da bi našli pravo točko.

Standard in razvijalci, ki sledijo temu, trdijo, da so sprite povezane z ozadjem pravila, potem je to izključno ozadje, ne pa element mesta. Grafična komponenta elementov strani mora manipulirati oznako img.

S tem se težko strinjamo na preprosti podlagi, da ozadje ni zaznano kot splošno ozadje. To je samo ozadje, ne glede na to - miniaturni element ali celotna stran kot celota.

Medtem je grafična komponenta, ki je resna ovira pri uporabi spritev.

Razumna uporaba

Kljub temu, da je izraz "Internet tehnologije" in "visoke tehnologije", ki se šteje za sinonim, v resnici pa je zamudno in včasih zelo nizko-tech dela. Sprites niso posebej oblečen v primerjavi z drugimi ozkih grl v čisti načrtovanju jаvascript ali PHP, kot tudi pri razvoju potrebne funkcionalnosti, ki določa postopke za polnjenje spletnih strani in informacij, kot so ozadja ustvarili arhivskih kopij.

Moč in perspektivnost sistemov za upravljanje uporabljenih spletnih mest se ponekod izenačijo z niansami njihove praktične uporabe in ročni razvoj virov praviloma vodi do potrebe, da je treba za 1001. let ponovno napisati enega ali drugega lastnega algoritma.

V kontekstu tega, kar je bilo rečeno, je pomembno preprosto uporabiti v razumnih mejah vse, kar zagotavlja sodoben instrument. Ne biti preveč nestrpen, da uporabite eno čez drugo, in zlato pravilo v zgradbi mesta se glasi: morate ne razmišljajo o tem, kako takoj opraviti delo, kot je mogoče, in kako to izvesti tako, da se v primeru kakršne koli nepredvidene situacije lahko hitro rešena vsak problem.