CSS sprites: maelezo, mbinu za msingi na mapendekezo muhimu

Tovuti ya kisasa inapaswa kuwa ya haraka, nzuri na yenye ufanisi wote katika hatua ya maendeleo na wakati wa kufanya kazi na mteja. Kama kanuni, kila kampuni inayojenga rasilimali za mtandao inataka kuwa na mtu wake mwenyewe, kuvutia wageni kwa kubuni, style, kuaminika, kasi na sifa zingine.

Matumizi muhimu ya sprites

CSS sprites inakuwezesha kuboresha sifa zote za tovuti, na picha ya kampuni. Kwa kweli, hii sio chombo kikubwa cha developer, lakini kwa kasi inaendelea mchakato wa kuendeleza rasilimali, na kasi ya kazi yao.

Miongoni mwa mambo mengine, kificho ni rahisi na, kwa namna fulani, huwa na portable kwa rasilimali nyingine, ambazo, kutokana na matumizi ya sprites ya CSS, yanafanana na jamaa za karibu, kwa sababu unaweza kutumia mawazo sawa ya graphic, Muundo na maudhui ya vitambulisho.

Katika mchakato wa kawaida wa kuendeleza tovuti, unahitaji kufanya picha nyingi. Mara nyingi picha hizi zinachukua nafasi ndogo sana, lakini daima ni faili tofauti. Kwa mfumo wowote wa uendeshaji wa seva yoyote, ufunguzi wa faili ni operesheni ya muda, lakini hauwezi kutofautiana kwa kiasi kikubwa wakati faili inafunguliwa na saizi 13 na 13, na wakati faili ya picha 16 ya 52 na 52 saizi inafunguliwa. Katika kesi ya kwanza, unahitaji kuwa na faili 16 na shughuli 16 za kufungua / kusoma, katika kesi ya pili, picha 16 zitapatikana kwa kufungua faili moja tu.

Ikiwa unapata seti ya faili hizo kwa somo (menyu zisizo na usawa, fomu za mazungumzo, vifungo vya calculator, vitu vya kalenda ...), kisha seti hizo za picha zinaweza kuhamishwa kwa simu kutoka kwenye tovuti hadi kwenye tovuti.

Sehemu ya nyuma ya sarafu

Wakati kuna mashabiki ambao ni haraka sana kupendekeza kutumia sprites CSS, hakikisha kupata wale ambao kwa makini kujifunza swali na kwa uwazi inaonyesha kuwa ni daima zaidi vitendo kufanya kazi kwa njia ya zamani.

Hakika, ikiwa badala ya faili 16 za picha kuna faili moja ya picha 16, basi badala ya shughuli za kufungua / kusoma 16 zitakuwa na moja. Lakini hila ni kwamba kila kivinjari ana cache, na hubeba kitu tu kama mapumziko ya mwisho. Kwa kuongeza, kawaida vipengele vya ukurasa vinarejeshwa mara ya kwanza ukurasa unapotembelewa, na tu wale waliobadilishwa hupakiwa baadaye.

Kipengele kingine. Picha ya kawaida hukatwa badala ya kufungwa kwenye faili moja. Kwa namna fulani teknolojia imeendeleza hivyo, ni bora kusema, desturi. Muumbaji anajenga mpangilio, na mpangilio hutumia vipande vyake: sehemu zenye kung'olewa kwa mpangilio. Wapinzani wa sprites wanaamini kwamba ukusanyaji wa picha kadhaa katika faili moja ni kazi ya kuteketeza muda, kuongeza muda wa maendeleo wa jumla wa ukurasa.

Pia kuna watengenezaji wanaozingatia na kuboresha idadi ya maombi ya HTTP, wakiamini kwamba shughuli hii ni zaidi ya kisayansi kuliko CSS sprites.

Wakati wote ulioonyeshwa bila shaka ni muhimu, lakini muhimu zaidi ni maoni: kila kitu kinapaswa kutumiwa ndani ya mipaka ya busara.

Automation na CSS sprites

Ikiwa hakuna hatua katika kukimbia jenereta ya sprite ya CSS na kupata sehemu sahihi ya kubuni, hakuna kitu cha kuacha kufanya sehemu hii kwa kawaida. Ikiwa teknolojia ya kawaida inasababisha haja ya kukata mamia ya picha, basi ni vyema kupiga kazi ya JavaScript, ambayo, ikiwa ni lazima, itachagua eneo linalohitajika kutoka kwa sprite na kuionyesha.

Ikumbukwe, hata hivyo, kwamba sprite ya vipengele viwili au vitatu au dazeni au mbili haiendi popote, lakini wakati kuna mamia ya michoro katika sprite, hakika haitakuwa na matatizo kwa kuandika kazi ya JavaScript, lakini ni kiasi gani kitakachochukua ili kuunda Sprite vile kubwa ... Kwa kuongeza, gundi picha ni jambo moja, jenereta ya sprite CSS inafanya picha zote zinazohitajika na CSS-code kwa hiyo, haijalishi ni vipi vipengele vya sprite. Matatizo hutokea wakati urejeshe tovuti, ubadili kubuni, ufuta na uongeze vitu vipya. Wakati wa kuendeleza sprite, haipaswi kufikiri juu ya jinsi ya kutumia, lakini jinsi ya kuibadilisha baadaye.

Faida ya kimapenzi ya kutumia sprites

Tofauti na lugha za programu za CSS, hii ni seti ya sheria ya kimya, mienendo yake yote imedhamiriwa na sheria na maudhui ya kazi (kwa kawaida). Kuzingatia katika seti ya sprites, HTML, CSS, unaweza kuunda maktaba ya makabila ya kazi ya kubuni.

Kwa mfano, toleo la kumaliza la orodha: kwa kuunganisha sheria ndogo za css, kazi za js na ikiwa ni pamoja na baadhi ya HTML-divs katika msimbo, unaweza kupata matokeo. Kubadilisha yaliyomo ya picha ya picha, unaweza kubadilisha muonekano wa orodha hii. Kwa kufafanua mwili wa kazi, unaweza kurekebisha kazi.

Inageuka toleo la pekee la programu inayolengwa na kitu (OOP). Bila shaka, itakuwa ni wazo lenye mkali, lakini halitasimama sana kwenye mstari wa lugha nyingine za OOP katika lugha halisi. Ilikuwa tu mapema miaka ya 90, wakati OOP ilifufuliwa na kuanza kupata nafasi ya kawaida ya kufunga jua, iliwakilisha wazo thabiti na fomu halisi ya kujieleza, na leo watengenezaji wamekuja na lugha nyingi kama hakuna lugha ya Kirusi tofauti.

Toys - mgodi wa dhahabu kwa sprites

Msisimko na programu ni dhana zisizokubaliana, lakini kufuzu kwa michezo ya kuandika programu hutofautiana sana kutoka kwa kawaida (coding rahisi) na ubunifu (kubuni na kuendeleza teknolojia mpya, mawazo).

Mchezo wa kubuni huvutia vector graphics, kwa sababu mchanganyiko wa SVG sprite + CSS sheria si tu katika mahitaji, lakini pia mara nyingi anarudi kutoka kitu cha developer (tovuti) katika kitu cha mchezo halisi. Hasa, Strike Counter Strike maarufu hutumika kwa masharti ya sprites, dawa ni vyema vyema vyema: mlipuko, damu, macho ...

Maneno "kufunga sprites css v34" kwa kuanzisha ni ya kawaida kabisa na inaeleweka. Sprites hawakupata manufaa tu katika matumizi katika asili yao, lakini pia iliunda niche ambayo iliwa kazi kikamilifu, inapatikana na kueleweka kwa mzunguko fulani wa watumiaji.

CSS inaonyesha: mfano

Ili kubadili kurasa za tovuti kwenye lugha fulani, chaguo mbalimbali hutumiwa, lakini kama mchezaji wa lugha anafanyika kwa njia ya icon, suluhisho kwa kutumia sprite inaweza kuonekana kama hii:

Uharibifu wa dhahiri wa sprites

Kwanza kabisa, ni mchakato wa utumishi na wa makini. Ni jambo moja kukata kubuni katika vipande vidogo, na nyingine ni kukusanya picha moja kutoka kwa wadogo wengi. Tumia wazo la turuba na kuiweka picha zote zinazotumiwa kwenye tovuti, kabisa.

Hata kutumia jenereta ya sprite ya CSS, matatizo hayawezi kuepukwa, hasa wakati unapaswa upya upya wavuti ya tovuti. Weka katika picha ya sprite picha kadhaa - sio safu ya vipengele, graphics ni graphics, kwa kawaida huonyeshwa, badala ya kuchaguliwa kwa msimbo kama safu katika kutafuta kipengee kilichohitajika.

Wawaida na watengenezaji wafuatayo wanasema kuwa tangu sprites yanahusiana na historia ya utawala, basi hii ni picha ya asili tu, si kipengele cha tovuti. Sehemu ya graphic ya mambo ya ukurasa inapaswa kuendesha vitambulisho vya img.

Kwa hili ni vigumu kukubaliana kwa msingi rahisi kwamba historia haikufahamu kama historia ya jumla. Ni historia tu, bila kujali nini - kipengele cha miniature au ukurasa mzima kwa ujumla.

Wakati huo huo, ni sehemu muhimu ambayo ni kikwazo kikubwa katika matumizi ya sprites.

Matumizi ya busara

Pamoja na ukweli kwamba maneno "teknolojia ya mtandao" na "teknolojia ya juu" huhesabiwa kuwa sawa, kwa kweli ni kazi kubwa na katika sehemu fulani kazi isiyo ya kiteknolojia. Sprites haipatikani hasa dhidi ya vikwazo vingine, kama vile programu safi katika JavaScript au PHP, au kwa kuzingatia utendaji muhimu, kusanidi mchakato wa maeneo ya kujaza na habari, au, kwa mfano, kujenga nakala za kumbukumbu za kumbukumbu.

Nguvu na mtazamo wa mifumo ya usimamizi wa tovuti hutumiwa mara kwa mara na viwango vya matumizi yao ya vitendo, na maendeleo ya mwongozo wa rasilimali, kama sheria, inaongoza kwa haja ya kuandika upya moja au nyingine ya algorithms yake mwenyewe kwa kipindi cha 1001.

Katika muktadha wa kile kilichosemwa, ni muhimu tu kutumia katika mipaka ya busara kila kitu ambacho chombo cha kisasa kinatoa. Usiwe na bidii sana kutumia moja kwa uharibifu wa mwingine, na utawala wa dhahabu kwenye jengo la tovuti ni hii: mtu asipaswi kufikiri juu ya jinsi ya kuifanya kazi haraka iwezekanavyo, lakini juu ya jinsi ya kutekeleza ili ili tukio la hali yoyote isiyowezekana inaweza kutatuliwa haraka Tatizo lolote.