Xawaareynta Boggaaga oo leh CSS Sprites

shabakada spritemaster

Waxaan wax ka qorayaa xawaaraha bogga xoogaa xoogaa ah oo ku yaal boggan waana qayb muhiim ah oo ka mid ah falanqaynta iyo hagaajinta aan ku sameyno goobaha macaamiisheena. Marka laga soo tago u guurista server-yada xoogga badan iyo adeegsiga qalabka sida Shabakadaha Bixinta Macluumaadka, waxaa jira dhowr farsamooyin barnaamijyo kale ah oo isku-duwaha webka uu isticmaali karo.

Halbeegga loo yaqaan 'Cascading Style Sheet' wuxuu hadda ka weyn yahay 15 sano. CSS waxay ahayd horumar muhiim ah oo ku saabsan horumarinta webka maxaa yeelay waxay ka soocday waxyaabaha ka yimid naqshadeynta. Eeg balooggan iyo wixii kale iyo inta badan farqiga u qaabeynta ayaa si fudud ugu jira warqadda qaabdhismeedka ku lifaaqan. Noocyada qaabdhismeedka ayaa sidoo kale muhiim ah maxaa yeelay waxaa lagu keydiyaa xaafadda dhexdeeda oo lagu keydiyo biraawsarkaaga. Natiijo ahaan, maadaama dadku sii wadaan booqashada bartaada, ma soo degsanayaan xaashida qaab mar kasta… kaliya bogga bogga.

Mid ka mid ah curiyeyaasha CSS ee inta badan aan la adeegsan ayaa ah CSS Sprites. Markuu adeegsade booqdo websaydhkaaga, ma ogaan kartid inayan si fudud u codsanayn bogga. Iyaga codsiyo badanCodsi bogga, wixii xaashiyo qaab ah, wixii faylal ah ee JavaScript ku lifaaqan, ka dibna sawir kasta. Haddii aad leedahay mawduuc leh sawirro taxane ah oo loogu talagalay xudduudaha, baararka wareega, taariikhda, badhamada, iwm.… Barowsarku waa inuu mid kasta ka codsadaa, midba mar adeeggaaga shabakadda. Ku dhufo kumanaan booqdayaal ah taasna waxay noqon kartaa tobanaan kun oo codsiyo ah oo loo sameeyay server-kaaga!

Tani, markeeda, waxay gaabineysaa bartaada. A goobta gaabis ah waxay ku yeelan kartaa saameyn baaxad leh hawlgelinta iyo beddelaadyada in dhagaystayaashaadu sameeyaan. Istaraatiijiyad ay adeegsadayaasha websaydhada waaweyn adeegsadaan ayaa sawirada oo dhan ku wada ridaya hal feyl… oo la yiraahdo a higgaadinta. Halkii aad codsi u samayn lahayd mid kasta oo ka mid ah sawirrada faylkaaga, hadda waxaa loo baahan yahay oo keliya in la helo hal codsi oo loogu talagalay hal sawir oo keliya!

Waxaad wax ka akhrisan kartaa sida CSS Sprites uga shaqeeyaan CSS-Tricks or Burburinta Magazine ee CSS Sprite boostada Ujeeddadaydu maaha inaan ku tuso sida loo isticmaalo, kaliya inaan kugula taliyo inaad hubiso kooxdaada horumarinta inay ku daraan goobta. Tusaalaha CSS Tricks bixiyaa wuxuu muujinayaa 10 sawir oo ah 10 codsi kuna dar ilaa 20.5Kb. Markii lagu soo ururiyey hal sprite, waa 1 codsi waa 13kb! Codsiga safarka wareega iyo waqtiyada jawaabta ee sawirada 9 hada waa baxeen waxaana xaddiga xogta la dhimay in kabadan 30%. Ku dhufo tirada booqdayaasha boggaaga oo runtii waad xiiri doontaa xoogaa ilo ah!

globalnavThe Apple bar navigation waa tusaale weyn. Badhan kastaa wuxuu leeyahay dhawr gobol… haddii aad bogga ku jirto, bogga ka baxsan, ama badhanka aad ku qoslayso. CSS waxay qeexaysaa iskuduwaha badhanka waxayna u soo bandhigayaan gobolka xaalada saxda ah biraawsarka adeegsadayaasha. Dhamaan goboladaan waxay kuwada burbureen hal shaxan - laakiin waxaa lagu muujiyey gobolba gobol sida ku qeexan warqada qaabka.

Haddii horumariyayaashu jecel yihiin qalabka, waxaa jira tan halkaas ka baxsan oo ka caawin kara iyaga, oo ay ku jiraan Qaab dhismeedka CSS, Codsi Dhimis loogu talagalay ASP.NET, CSS-Spriter ee Ruby, Qoraalka CSSSprite loogu talagalay Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Mashruuca Fondue's Generator Generator, Sprite Master Web, Iyo SpriteMe Buug-yare.

Sawirada Sprite Master Web:
shabakada spritemaster

Martech Zone uma adeegsanaayo asalka asalka mawduuciisa oo dhan, marka uma baahnin inaan farsamadan dejino waqtigan.

2 Comments

  1. 1

    Sug… ururinta oo dhami ma aha “sawir” (ama “diyaarad”), iyo sawir-hoosaad kasta (ama koox-hoosaadyada sawirada marka laga hadlayo kuwa isbadal leh ama is-beddalaya) "sprite"?

    Waxaa laga yaabaa in walxaha dib loo beddelay tan iyo markii ugu dambeysay ee aan wax ka qabtay waxaas oo kale laakiin waxaan ku dhaartay inaan ku dhaartay Sprite-ka inuu yahay cunsurkii ugu dambeeyay ee la soo bandhigayay, ee uusan ahayn miiska xogta weyn ee laga soo jiiday.

    (“Miiska Sprite”… taasi ma ahayn miyaa?)

    • 2

      Waxaa laga yaabaa inaan ka hadlayno laba waxyaalood oo kala duwan, Mark. CSS, waxaad asal ahaan ku qeexi kartaa 'qaybta' feyl feyl ah si aad u muujiso isuduwaha ka faa'iideysiga. Tani waxay kuu ogolaaneysaa inaad sawiradaada oo dhan ku dhejiso hal 'sprite' ka dibna kaliya tilmaam meesha aad rabto inaad ku muujiso CSS.

Maxay idinla tahay?

Boggani wuxuu isticmaalaa Akismet si loo yareeyo spam. Baro sida xogtaada faallooyinkaaga looga shaqeeyo.