CSS-sprites: a apejuwe ti awọn ipilẹ imuposi ati ki o wulo awọn italolobo

Modern ojula lati wa ni sare, o dara ati lilo daradara mejeeji ni awọn ipele ti idagbasoke, ati nigbati ṣiṣẹ pẹlu kan ni ose. Bi ofin, gbogbo ile ti o ṣẹda online oro, ọtẹ lati ni ara wọn oju, lati fa alejo pẹlu awọn oniwe-oniru, ara, dede, iyara ati awọn miiran eroja.

Wulo ini ti sprites

CSS-sprites le mu awọn mejeji awọn ti agbara abuda kan ti ojula ati awọn ile-ile image. Ni awọn oniwe-mojuto, o ti n ko ju idiju idagbasoke ọpa, sugbon o gan iyara soke awọn ilana ati awọn oluşewadi idagbasoke, ati awọn iyara ti iṣẹ wọn.

Lara ohun miiran, o simplifies awọn koodu ati, ni kan awọn ori, o jẹ šee si miiran oro ti, nitori awọn o daju wipe awọn ti lo CSS-sprites wa ni iru bi awọn sunmọ ebi, nitori ti o le lo awọn kanna ayaworan ero, ara oniru eroja ọrọ, be ati awọn akoonu ti ti tag.

Ni awọn deede papa ti idagbasoke ti ojula lati se pupo ti awọn aworan. Gan igba, awọn wọnyi images ya soke gidigidi kekere aaye kun, sugbon ni o wa nigbagbogbo kan lọtọ faili. Fun eyikeyi ọna eto ti eyikeyi server si faili kan - yi isẹ, a akoko-n gba, sibẹsibẹ, yoo ko yato significantly pẹlu ọwọ si akoko nigba ti a faili ti wa ni la lori awọn 13 nipa 13 awọn piksẹli, ati nigbati awọn faili ti wa ni ṣí lati 16 awọn aworan 52 nipa 52 awọn piksẹli. Ni akọkọ nla, o ni 16 awọn faili ati 16 ìmọ / ka mosi, ninu awọn keji nla 16 images yoo wa ni gba bi kan abajade ti awọn šiši ti nikan kan faili.

Ti o ba ṣẹda kan ti ṣeto ti awọn faili lori koko (petele akojọ, iwa ọrọ, awọn isiro bọtini kalẹnda oniru eroja ...) wipe iru images le wa ni idapo flexibly gbe lati ojula to ojula.

awọn downside

Nigba ti nibẹ ni o wa egeb, ju frisky niyanju lati lo CSS sprites ni o wa dandan awon ti o ti wa ni fara keko ni oro ati ki o kedere fihan wipe o jẹ nigbagbogbo wulo lati sise awọn atijọ asa ọna.

Nitootọ, ti o ba wa ni ọkan faili ti 16 awọn aworan, dipo ti 16 ìmọ / ka mosi yoo jẹ ọkan dipo ti 16 aworan awọn faili. Ṣugbọn awọn omoluabi ni wipe gbogbo kiri ni o ni a kaṣe, ati awọn ti o èyà nkankan nikan bi ohun asegbeyin ti. Ni afikun, maa awọn iwe eroja ti wa ni o rù nigbati o akọkọ be ni iwe, ati ki o si rù nikan yi pada.

Miran aspect. Ojo melo, awọn aworan ti wa ni ge, ko glued si kan nikan faili. Bakan ti o ti ni idagbasoke a ọna ẹrọ, o jẹ dara lati sọ, awọn aṣa. Awọn onise ṣẹda awọn akọkọ ati akọkọ ń lo àwọn ege: finely wẹwẹ ona ti awọn ifilelẹ. Alatako sprites gbagbo wipe kíkó orisirisi aworan ninu ọkan faili - n gba aṣayan iṣẹ-ṣiṣe, eyi ti o mu ki awọn lapapọ iwe oniru.

Nibẹ ni o wa awon Difelopa ti o gbagbo ki o si je ki awọn nọmba ti HTTP-ibeere, onigbagbọ ti yi ojúṣe jẹ diẹ pragmatic ju CSS-sprites.

Gbogbo igba itọkasi ni o wa laiseaniani pataki, sugbon Elo diẹ pataki ni awọn wo: o yẹ ki o wa ni loo laarin reasonable ifilelẹ lọ.

Adaṣiṣẹ ati CSS-Sprites

Ti o ba ti o mu ki ko si ori lati ṣiṣe CSS Sprites monomono ati ki o gba awọn ọtun apa ti awọn oniru, ki o si ohunkohun idilọwọ nìkan ṣe soke yi apa ti awọn deede ọna. Ti o ba ti mora ọna ti o mu ki o pataki lati ge ogogorun ti awọn aworan, o jẹ preferable lati Sketch awọn JavaScript-iṣẹ, eyi ti tianillati yoo yan lati awọn ti o fẹ agbegbe ti awọn sprite ki o si han o.

O yẹ ki o wa woye, sibẹsibẹ, wipe awọn sprite ti meji tabi mẹta eroja, tabi kan mejila miiran - gbogbo ọtun, sugbon nigba ti ni awọn sprite ogogorun ti yiya, diẹ ninu awọn pẹlu kikọ JavaScript-iṣẹ isoro, dajudaju, yoo ko waye, ṣugbọn bi o Elo iṣẹ ti o yoo gba si awọn ẹda ti iru kan ti o tobi sprite ... ni afikun, pọ aworan - yi ọkan CSS sprite monomono ati ki o mu awọn ti o fẹ image, ati CSS-koodu fun o, o ko bikita bi o Elo yoo ni constituent eroja ti awọn sprite. Isoro dide nigba ti remaking ojula oniru ayipada, yiyọ ati afikun ti titun eroja. Sese a sprite, o yẹ ki o ro ko nipa bi o lati lo o, ati bi o ti ki o si yi.

Koko anfaani ti lilo sprites

Ko CSS siseto ede, yi ni a jo aimi ti ṣeto ti awọn ofin gbogbo awọn oniwe-dainamiki ni nipasẹ awọn ofin ati awọn won iṣẹ-ṣiṣe akoonu (boṣewa). Considering awọn sprites ni eka, awọn HTML, awọn CSS le ṣẹda kan tiwon-iṣẹ oniru ti awọn ìkàwé.

Fun apẹẹrẹ, awọn ti pari version of awọn akojọ: nìkan so ọpọ CSS-ofin, JS-iṣẹ ati ni awọn koodu nọmba ti HTML-divs, o le gba awọn esi. Nipa yiyipada awọn akoonu ti awọn aworan ti awọn sprite, o le yi awọn ti wo awọn akojọ. Seto awọn ara ti awọn iṣẹ, o le ṣatunṣe awọn iṣẹ-.

Gba kan ti ao iyatọ ti ohun-Oorun siseto (OOP). Daju, o yoo wa ni a imọlẹ agutan, ṣugbọn o yoo ko ni le ju imọlẹ lati duro jade lodi si lẹhin ti awọn miiran OOP ede, oriÿi gidi. O ti wa ni nikan ni ibẹrẹ '90s, nigbati awọn Plo ti a sọji o si di pọnran ni kiakia jèrè ibi kan ninu oorun, o jẹ kan pato agutan ati ki o kan nja fọọmu ti awọn oniwe-ikosile, ṣugbọn nisisiyi awọn Awon Difelopa ti wá soke pẹlu bi ọpọlọpọ oriÿi bi nibẹ ni o ni Oniruuru Russian.

Toys - a bonanza fun sprites

Simi ati siseto - ni ibamu agbekale, ṣugbọn siseto ogbon, kikọ awọn ere, jẹ fihan o yatọ lati obschebytovoy (simple ìsekóòdù) ati ki o Creative (oniru ati idagbasoke ti titun imo ero, ero).

Game Design apetunpe to fekito eya, nitori awọn apapo ti SVG-sprites + CSS-ofin ko nikan eletan, sugbon igba di ohun ti awọn Olùgbéejáde (ti ojula) si awọn ohun ti a gidi game. Ni pato, awọn gbajumo ere Counter Kọlu kan si awọn ofin ti awọn sprites, sprays oyimbo ti o nilari Synonyms: aruwo, ẹjẹ, oju ...

Awọn gbolohun "ṣeto awọn sprite CSS v34" fun awọn pilẹ jẹ ohun deede ati understandable. Sprites ti wa ni ri ko nikan ni awọn lilo ti awọn IwUlO, ni lodi, sugbon tun akoso a onakan, eyi ti o jẹ ohun ti o ni kikun-ifihan, ti ifarada ati ki o rọrun lati ni oye kan awọn Circle ti awọn onibara.

CSS-sprites: Apeere

a orisirisi ti awọn aṣayan fun a pato ede lati yi ojúewé lori ojula ti wa ni lilo, ṣugbọn ti o ba ti ede selector lati ṣe bi ohun icon, awọn ojutu lilo kan sprite le wo bi yi:

Kedere drawbacks sprites

Akọkọ ti gbogbo, o jẹ akoko ti-gba ki o si tele ilana. O ti wa ni ohun kan - lati ge awọn oniru sinu kekere awọn ege, ati awọn miiran - lati gba aworan kan ti ọpọlọpọ awọn kekere. Waye awọn agutan ti kanfasi ati ki o gbe o lori gbogbo awọn ti awọn aworan ti a lo lori ojula jẹ patapata wulo.

Ani lilo CSS sprites monomono, awọn ìṣoro ko le wa ni yee, paapa nigbati o jẹ pataki lati paarọ awọn ojula oniru. Fi ni kan diẹ si mewa ti sprite images - o ni ko ohun orun ti eroja, awọn eya ni eya, ti o ti wa ni o kan han loju iboju, dipo ti ayokuro jade awọn koodu bi ohun orun lati wa awọn ọtun ohun kan.

Standard ati kóòdù wọnyí re nipe wipe bi sprites ni nkan ṣe pẹlu a imulo lẹhin lo, o jẹ nikan kan isale aworan ati ki o ko awọn ojula ano. Iwọn paati eroja ti a iwe yẹ ki o riboribo tag img.

O ti wa ni soro lati gba lori awọn ti o rọrun aaye pe nigba ti to lẹhin ti a ti fiyesi bi a wọpọ lẹhin. O ni o kan lẹhin, ko si ohun - a kekere ano tabi gbogbo iwe.

Nibayi, awọn iwọn paati ni ipoduduro kan pataki idiwọ si awọn lilo ti sprites.

judicious lilo

Bíótilẹ o daju wipe awọn ofin "Internet ọna ẹrọ" ati "ga ọna ẹrọ" ti wa ni ka lati wa ni bakannaa, ni pato, o jẹ akoko ti-n gba ati ki o ma gidigidi kekere-tekinoloji iṣẹ. Sprites ti wa ni ko paapa wọ aṣọ akawe si miiran bottlenecks ni funfun siseto ni JavaScript tabi PHP, bi daradara bi ninu idagbasoke ti awọn pataki iṣẹ, eto sii lakọkọ ti àgbáye ojula tabi alaye, gẹgẹ bi awọn lẹhin ṣẹda pamosi idaako.

Agbara ati asesewa ti lilo ti akoonu isakoso awọn ọna šiše igba leveled nuances ti won wulo ohun elo, ati Afowoyi awọn oluşewadi idagbasoke, bi ofin, nyorisi si awọn nilo fun awọn 1001st akoko lati rewrite ọkan tabi awọn miiran a kikan alugoridimu.

Ni yi o tọ, o jẹ pataki lati nìkan reasonable lati lo gbogbo ti o pese a igbalode ọpa. Ma ko ni le ju ni itara lati lo ọkan lori awọn miiran, ati awọn ti nmu ofin ni ojula ile Say bi wọnyi: o nilo lati ro ko nipa bi o si ṣe iṣẹ bi ni kete bi o ti ṣee, ati bi lati ṣiṣẹ ti o ki ni irú ti eyikeyi idagiri ipo le ti wa ni kiakia resolved eyikeyi isoro.