Ukusheshisa Isiza Sakho ngama-CSS Sprites

umphathi we-spritemaster

Ngibhala ngejubane lekhasi kancane kule sayithi futhi yingxenye ebalulekile yokuhlaziywa nokwenza ngcono esikwenzayo kumasayithi amaklayenti ethu. Ngaphandle kokuthuthela kumaseva anamandla nokusebenzisa amathuluzi afana nawo Amanethiwekhi Wokudiliva Okuqukethwe, kunezindlela eziningi zamasu wokuhlela onjiniyela abaphakathi wewebhu abangazisebenzisa.

Izinga le-Cascading Style Sheet yoqobo selineminyaka engaphezu kwengu-15 manje. I-CSS ibiyindlela ebalulekile yokuthuthuka kwewebhu ngoba yehlukanisa okuqukethwe nedizayini. Bheka le bhulogi nanoma iyiphi enye futhi iningi lomehluko wesitayela umane ukwiphepha lesitayela elinamathiselwe. Amashidi wesitayela nawo abalulekile ngoba agcinwa endaweni yenqolobane ngaphakathi kwesiphequluli sakho. Ngenxa yalokho, njengoba abantu beqhubeka nokuvakashela isiza sakho, abalandi ishidi lesitayela njalo… okuqukethwe okuqukethwe yikhasi kuphela.

Into eyodwa ye-CSS evame ukusetshenziswa kabi I-CSS Sprites. Lapho umsebenzisi evakashela iwebhusayithi yakho, ungahle ungaboni ukuthi abenzi nje isicelo esisodwa sekhasi. Bona yenza izicelo eziningi… Isicelo sekhasi, sanoma imaphi amashidi wesitayela, noma yimaphi amafayela anamathiselwe weJavaScript, bese isithombe ngasinye. Uma unetimu enochungechunge lwezithombe zemingcele, amabha wokuzulazula, izizinda, izinkinobho, njll.… Isiphequluli kufanele sicele ngasinye, esisodwa ngasikhathi kusuka kwiseva yakho yewebhu. Phindaphinda lokho ngezinkulungwane zezivakashi futhi lokho kungaba amashumi ezinkulungwane zezicelo ezenziwe kuseva yakho!

Lokhu-ke kubambezela isiza sakho. A isayithi elihamba kancane lingaba nomthelela omkhulu ekuzibandakanyeni nasekuguqulweni ezenziwa yizithameli zakho. Isu elisetshenziswa abathuthukisi bewebhu abakhulu ukufaka zonke izithombe kufayela elilodwa… elibizwa nge- Sprite. Esikhundleni sokwenza isicelo ngasinye sezithombe zakho zefayela, manje kudingeka kuphela ukuthi kube nesicelo esisodwa sesithombe esisodwa se-sprite!

Ungafunda ngakho isebenza kanjani i-CSS Sprites ku-CSS-Tricks or I-CSS Sprite yeSmashing Magazine okuthunyelwe. Iphuzu lami akukhona ukukubonisa ukuthi uzisebenzisa kanjani, ukweluleka nje ukuthi uqinisekise ukuthi ithimba lakho lokuthuthukisa liyabafaka kusayithi. Isibonelo esinikezwa yi-CSS Tricks sikhombisa izithombe eziyi-10 eziyizicelo eziyi-10 futhi ezingezwa kufika ku-20.5Kb. Lapho kuqoqwe ku-sprite eyodwa, kunjalo Isicelo esingu-1 esingu-13kb! Izicelo zokuya nokubuya nezikhathi zokuphendula izithombe eziyi-9 manje sezihambile futhi inani ledatha lehliswe ngaphezu kuka-30%. Phindaphinda lokho ngenani lezivakashi kusayithi lakho futhi uzophuca ezinye izinsiza!

globalnavThe Apple ibha yokuzula iyisibonelo esihle. Inkinobho ngayinye inezindawo ezimbalwa… noma ngabe usekhasini, ngaphandle kwekhasi, noma ugcizelela inkinobho. I-CSS ichaza ukuxhumeka kwenkinobho futhi yethule isifunda sesimo esifanele kwisiphequluli sabasebenzisi. Zonke lezi zifundazwe ziwile ndawonye ngomdwebo owodwa - kodwa ziboniswa isifunda ngesifunda njengoba kuchaziwe eshidini lesitayela.

Uma abathuthukisi bakho bewathanda amathuluzi, kukhona ithoni ngaphandle lapho engabasiza, kufaka phakathi i- Uhlaka lweCompass CSS, Isicelo Nciphisa yeASP.NET, I-CSS-Spriter kuRuby, Isikripthi se-CSSSprite ye-Photoshop, ISpritePad, I-SpriteRight, I-SpriteCow, I-ZeroSprites, I-CSS Sprite Generator yeProjekthi Fondue, I-Sprite Master Web, Kanye I-SpriteMe Incwajana yokubekisa.

I-Screenshot ye- I-Sprite Master Web:
umphathi we-spritemaster

Martech Zone ayisebenzisi isithombe sangemuva kuyo yonke ingqikithi yayo, ngakho-ke akudingeki ukuthi sisebenzise le ndlela ngalesi sikhathi.

2 Amazwana

  1. 1

    Linda… iqoqo lonke alisiyo “isithombe” (noma “ibhanoyi”), futhi isithombe ngasinye (noma iqembu elincane lezithombe uma kwenzeka sigqwayiza noma sisebenza ngokushintshana) “i-sprite”?

    Mhlawumbe izinto seziqanjwe kabusha kusukela okokugcina ngaphatha lolu hlobo lwento kepha ngafunga ukuthi iSprite iyona nto egcine ikhonjisiwe, hhayi itafula ledatha elikhulu ekhishwe kulo.

    (“Itafula le-Sprite”… ngabe bekungenjalo?)

    • 2

      Kungenzeka ukuthi sikhuluma izinto ezimbili ezihlukile, uMark. Nge-CSS, ungacacisa ngokuyisisekelo ukuthi iyiphi 'ingxenye' yefayela lesithombe ekhombisa ukusebenzisa izixhumanisi. Lokhu kukuvumela ukuthi ubeke zonke izithombe zakho ku-'priteite 'eyodwa bese uvele ukhombe endaweni ofisa ukuyikhombisa nge-CSS.

UCABANGANI?

Le sayithi isebenzisa i-Akismet ukunciphisa ugaxekile. Funda ukuthi idatha yakho yokuphawula isetshenziswa kanjani.