Saurin Haɓaka Gidan yanar gizonku tare da CSS Sprites

gidan yanar gizo mai yada labarai

Na yi rubutu game da saurin shafi dan kadan a wannan rukunin yanar gizon kuma yana da muhimmin bangare na bincike da ingantawa da muke yi ga rukunin abokan cinikinmu. Baya ga motsawa zuwa sabobin masu ƙarfi da amfani da kayan aikin kamar Hanyoyin sadarwar abun ciki, akwai wasu sauran dabarun shirye-shiryen da matsakaita mai samarda yanar gizo zai iya amfani dasu.

Matsakaici don asalin Takaddun Shagon Cascading ya wuce shekaru 15 yanzu. CSS ya kasance mahimmin ci gaba a cigaban yanar gizo saboda ya raba abun ciki daga zane. Dubi wannan rukunin yanar gizon da kowane ɗayan kuma yawancin bambancin salo ne kawai a cikin takaddun tsarin da aka haɗe. Takardun Styles suma suna da mahimmanci saboda ana adana su a cikin gida a cikin ma'ajiyar bincike a cikin bincike. Sakamakon haka, yayin da mutane ke ci gaba da ziyartar rukunin yanar gizonku, ba sa sauke takardar salo kowane lokaci… kawai abubuwan shafin.

Elementaya daga cikin abubuwan CSS wanda galibi ba a amfani da shi shine CSS Sprites. Lokacin da mai amfani ya ziyarci gidan yanar gizan ku, ƙila ba za ku iya fahimtar cewa ba sa yin roƙo ɗaya kawai don shafin ba. Su yi buƙatun da yawaRequest neman shafi, ga kowane zanen gado, ga kowane fayilolin JavaScript da aka haɗe, sannan kowane hoto. Idan kana da jigo wanda yake da jerin hotuna na iyakoki, sandunan kewayawa, baya, maɓallan, da sauransu… mai binciken yana buƙatar kowanne, ɗaya bayan ɗaya daga sabar yanar gizo. Haɗa hakan ta dubun baƙi kuma hakan na iya zama dubun dubatar buƙatun da aka gabatar wa sabarku!

Wannan, bi da bi, yana jinkirta shafinku. A jinkirin shafin na iya samun tasiri mai tasiri akan ƙaddamarwa da sauyawa cewa masu sauraro ku. Dabarar da manyan masanan yanar gizo ke amfani da ita shine sanya duk hotunan cikin fayil guda single wanda ake kira a sprite. Maimakon yin nema ga kowane hotunan fayil ɗin ku, yanzu akwai kawai buƙatar buƙatu guda ɗaya don hoton rubutun guda ɗaya!

Kuna iya karantawa game da yadda CSS Sprites ke aiki a CSS-Tricks or Rushewar Mujallar ta CSS Sprite gidan waya Dalilina ba shine in nuna muku yadda ake amfani da su ba, don kawai in baku shawara ne don tabbatar da ƙungiyar ci gabanku ta haɗa su a cikin rukunin yanar gizon. Misalin da dabarun CSS ke bayarwa yana nuna hotuna 10 waɗanda suke buƙatu 10 kuma sun haɗu zuwa 20.5Kb. Lokacin da aka tara a cikin sprite guda, yana da Nemi 1 kenan 13kb! Buƙatar tafiye-tafiye da lokutan amsawa don hotuna 9 yanzu sun tafi kuma adadin bayanai sun ragu da fiye da 30%. Haɗa hakan ta yawan baƙi a rukunin yanar gizonku kuma da gaske za ku aske wasu albarkatu!

duniyanavThe apple Bar maɓallin kewayawa babban misali ne. Kowane maɓalli yana da statesan jihohi… shin kana kan shafin, kashe shafin, ko mouse akan maɓallin. CSS yana bayyana maɓallin maɓallin kuma yana gabatar da yankin yanayin daidai ga mai bincike na masu amfani. Duk waɗannan jihohin sun rushe gaba ɗaya a cikin zane-zane - amma ana nuna yanki zuwa yanki kamar yadda aka tsara a cikin takardar salo.

Idan masu haɓaka ku na son kayan aiki, akwai tan a waje waɗanda zasu iya taimaka musu, gami da Tsarin kamfani CSS, Neman Ragewa don ASP.NET, CSS-Spriter na Ruby, Rubutun CSSSprite don Photoshop, SpritePad, Rariya, SpriteCow, Tsakar Gida, Project Fondue's CSS Sprite Generator, Sprite Jagora Yanar gizo, Da Fadawane Alamar shafi.

Screenshot of Sprite Jagora Yanar gizo:
gidan yanar gizo mai yada labarai

Martech Zone baya amfani da hotunan bangon gaba dayan taken, don haka ba lallai bane muyi amfani da wannan fasahar a wannan lokacin.

2 Comments

  1. 1

    Jira… ba duka tarin “hoto” (ko “jirgin sama”) ba, kuma kowane ƙaramin hoto (ko ƙaramin rukuni na hotuna dangane da masu rai ko masu canzawa ta hanyar hulɗa) “sprite” ne?

    Wataƙila an sake sunan abubuwa tun daga lokacin da na kula da irin wannan amma zan iya yin rantsuwa cewa Sprite shine asalin da ya ƙare da nunawa, ba babban teburin data da aka ciro shi ba.

    (“Sprite table”… wannan ba haka bane?)

    • 2

      Wataƙila muna magana da abubuwa biyu daban, Mark. Tare da CSS, zaku iya tantance ainihin wane 'yanki' na fayil ɗin hoto don nuna amfani da haɗin kai. Wannan yana baka damar sanya dukkan hotunan ka a cikin 'sprite' guda daya sannan kawai ka nuna yankin da kake son nunawa tare da CSS.

Me kuke tunani?

Wannan shafin yana amfani da Akismet don rage spam. Koyi yadda aka sarrafa bayanan bayaninka.