CSS sprites: deskribapena, oinarrizko teknikak eta gomendio erabilgarriak

Gune modernoa azkar, eder eta eraginkorra izan behar da bai garapen fasean eta bai bezeroarekin lanean. Arau orokor gisa, Interneteko baliabideak sortzen dituen enpresa bakoitzak bere pertsona propioa izatea nahi du, bisitariei erakusteko diseinua, estiloa, fidagarritasuna, abiadura eta beste ezaugarri batzuk.

Spritesen propietate erabilgarriak

CSS sprites-ek gunearen kalitatearen ezaugarriak eta enpresaren irudia hobetzeko aukera ematen du. Funtsean, hau ez da garatzaile tresna oso konplexua, baina baliabideak garatzen eta bere lanaren abiadura bizkortzen du.

Beste gauza batzuen artean, kodearen sinplifikazioa da eta, zentzu jakin batean, beste baliabide batzuk eramaten ditu, CSS sprits erabiliz, senide hurbilen antzekoak dira, ideia grafiko berak erabil ditzakeelako, Etiketen egitura eta edukia.

Webgune bat garatzeko ohiko prozesuan, irudi asko egin behar dituzu. Sarritan argazki hauek leku gutxi hartzen dute, baina beti beste fitxategi bat dira. Edozein zerbitzarentzako sistema eragilea erabiltzerakoan, fitxategi bat irekitzean denbora asko dago eragiketa hori, baina ez da 13 eta 13 bitetan irekiko den denbora pixka bat aldatzen, eta 52 irudiak 52 pixeleko 52 pixeleko fitxategi bat irekitzen duenean. Lehenengo kasuan 16 fitxategiak eta 16 irekita / irakurritako eragiketak izan behar dituzu, bigarren kasuan, 16 irudi fitxategi bakar bat irekitzean lortuko da.

Fitxategi horien multzoak gaia (menuak horizontalak, elkarrizketa-koadroak, kalkulu-botoiak, egutegiko elementuak ...) sortzen badituzu, orduan irudi multzo horiek mugikorretik gune batetik bestera transferitu daitezke.

Txanponaren alderantzizkoa

Noiz CSS sprits erabiliz gomendatzen azkarregi zale daude, ziurtatu galdetu arretaz duten galdera aurkitu eta modu adimendunan beti modu praktikoan erakusten adimentsua.

Izan ere, 16 irudi-fitxategiren ordez 16. irudiko fitxategi bat badago, 16 irekitze / irakurketa eragiketen ordez ordeztu egingo da. Baina trikimailu hau arakatzaile bakoitzak cache bat dauka eta azken finean bakarrik erabiltzen du. Gainera, normalean orrialde elementuak kargatzen dira orrialdea bisitatzen duzun lehen aldian, eta aldatutakoak bakarrik kargatzen dira geroago.

Beste alderdi bat. Normalean irudiak ebaki egiten dira, fitxategi batean itsatsita baino. Nolabait teknologia garatu du, beraz, hobe da esatea, pertsonalizatua. Diseinatzaileak diseinua sortzen du eta diseinua bere piezak erabiltzen ditu: diseinuaren zati fin txikiak. Spriten aurkakoek uste dute fitxategi askoren bilduma fitxategi batean denbora asko hartzen duela, orriaren garapenaren denbora orokorra handituz.

HTTP eskaeren kopurua kontuan hartzen eta optimizatzen duten garatzaileek ere badute, jarduera hori CSS sprits baino pragmatikoagoa dela uste dutelako.

Esan beharreko une guztiak zalantzarik gabe axola zaizkio, baina askoz ere garrantzitsuagoa da iritzia: dena mugak arrazoizko epean aplikatu behar da.

Automatizazioa eta CSS sprites

CSS sprite sorgailua exekutatzen ari ez bada eta diseinuaren zati zuzena lortzen ez bada, ez da ezer zati hori modu ohikoan egiterik gelditzeko. Ohiko teknologiak ehunka irudia moztu beharra eramaten badu, hobe da JavaScript funtzioa zirriborratzea, beharrezkoa izanez gero, eskatutako eremua hautatuko du sprite batetik eta bistaratuko du.

Hala ere, bi edo hiru elementu edo dozena bat edo bi spiteri ez zaie edonon joan behar, baina zirriborroen ehunka ispiluan badira, JavaScript funtzioaren idazketa arazorik gabe egongo da, baina zenbat ahalegina egingo du Sprite handi bat ... Horrez gain, kola irudiak gauza bat da, sprite sortzailea CSS-k nahi duen irudia eta CSS-kodea nahi ditu, ez du axola zenbat sprite elementu izango den. Arazoak sortzen dira gunea birmoldatzen duzunean, aldatu diseinua, ezabatu eta elementu berriak gehitzeko. Sprite bat garatzean, ez duzu pentsatu nola erabili behar den, baina gero nola aldatu.

Sprites erabiltzeko gaikako onurak

CSS programazio hizkuntzak ez bezala, arau multzo nahiko estatikoa da, dinamika guztiak arauek eta haien eduki funtzionalak zehazten dituzte (estandar arabera). Sprites multzo batean, HTML, CSS kontuan hartuta, diseinu-funtzionaltasun liburutegi tematikoak sor ditzakezu.

Adibidez, menuaren bukatuaren bertsioa: gutxienez, css-arau batzuk, js-funtzioak eta kodean HTML-divs batzuk barne konektatzean, emaitza lortu dezakezu. Irudiaren spritaren edukia aldatzean, menu honen itxura alda dezakezu. Funtzio-gorputza zehaztuz funtzionalitatea doitzeko.

Objektu bideratutako programazioaren (OOP) bertsio bitxia bihurtzen da . Zalantzarik gabe, ideia distiratsua izango da, baina ez da nabarmentzen benetako hizkuntzen beste OOP hizkuntzen atzeko planoetan. 90eko hamarkadaren hasieran bakarrik izan zen OOPk berpiztu eta eguzkiaren ohiz bizkorregi irabazten hasi zenean, ideia zehatz bat eta bere adierazpenaren forma zehatz bat irudikatzen zituen, eta gaur egun, garatzaileek dialekto ugarik sortu dituzte, ez baitira errusiar hizkuntza anitzak.

Jostailuak - spriteseko urrezko mina

Ilusioz eta programazioaz bateraezinak diren kontzeptuak dira, baina programatzaileen idazketen sailkapena oso desberdina da arrunta (kodifikazio sinplea) eta sortzailea (teknologia berriak eta ideiak diseinatu eta garatzea).

Game diseinurako errekurtsoak bektore grafikoak dira, SVG sprite + CSS arauak konbinatuta ez baitago eskaera bakarra, baina sarritan garatzaile baten (gune) objektu bihurtzen da benetako joko baten objektu bihurtzeko. Bereziki, joko ezagunaren Counter Strike sprites terminoei aplikatzen zaie, sprays oso sinonimoak dira sinonimoak: leherketa, odola, ikusmena ...

"Instalatu sprites css v34" esaldia abiapuntu egokia eta ulergarria da. Spritesek bere esentzian aplikaziotasuna soilik irabazi zuen, baina era berean, kontsumitzaileen zirkulu jakin bat guztiz funtzionala, eskuragarria eta ulergarria bihurtu zen.

CSS sprites: adibide bat

Gune baten orrialdeak hizkuntza batera edo bestera aldatzeko, hainbat aukera erabiltzen dira, baina hizkuntza hautatzailea ikono formatuan exekutatzen bada, sprite erabiliz soluzioak itxura hau izango du:

Spritesen desabantailak nabariak

Lehenik eta behin, prozesu latz eta zorrotz bat da. Diseinu bat pieza txikitan moztu beharra dago; bestea, argazki txikiak biltzen dituena. Aplikatu mihisearen ideia eta jarri webgunean erabilitako irudiak, guztiz futile.

CSS sprite sorgailu bat erabiltzen baduzu ere, ezin dira saihestu zailtasunak, batez ere diseinuaren diseinua birmoldatu behar duzu. Jarri sprite dozena irudi batzuk - ez da elementu sorta bat, grafikoak grafikoak dira, normalean bistaratzen dira, baizik eta kodean array gisa sailkatu beharrean nahi den elementua bilatzeko.

Garatzaileek eta estandarrek diotenez, sprites arauaren atzeko planarekin erlazionatuta daudenez gero, hau atzeko planoko irudia soilik da, ez gunearen elementu bat. Orrialdeko elementuen osagai grafikoak img tags maneiatu behar ditu.

Horrenbestez, funtsezko atzealdi orokor gisa hautematen ez den oinarrizko oinarriarekin ados dagoela zaila da. Atzeko planoa da, ez du axola zer den - miniaturazko elementua edo orrialde osoa oro har.

Bitartean, spritesen erabilera oztopo larria den osagai grafikoa da.

Arrazoizko erabilera

"Internet teknologia" eta "goi-teknologiako" terminoak sinonimoak direla kontuan hartuta, hain zuzen ere lan-intentsiboak eta leku ez-teknologiko handiko lanak dira. Spritesek ez du bereziki jaramonik egiten beste botikaik (JavaScript edo PHP programazio hutsa, esate baterako) edo beharrezkoa den funtzionalitatea garatzeko, informazioko guneak betetzeko prozesuak konfiguratuz edo, adibidez, artxiboen atzeko planoen kopiak sortuz.

Gunearen kudeaketa sistemen erabilerarako potentzia eta perspektibak aplikazio praktikoaren ñabardurak berdinak dira eta baliabideen eskuliburuaren garapena, normalean, algoritmoak berrerabili behar dira 1001. urtean.

Esandakoaren testuinguruan, oso garrantzitsua da tresna modernoak eskaintzen duen guztia zentzuzko mugetan erabiltzea. Ez izan gehiegi amorratua bat erabiltzeak beste baten kaltetan erabiltzeko eta urrezko arauaren eraikinaren eraikuntzan hau da: ez da pentsatu lanari ahalik eta lasterren ematea, baizik eta inplementatzeko moduari buruz, aurreikusi gabeko egoerarik gertatuz gero, azkar konpondu ahal izango da Arazoak.