A ’luathachadh do làrach le CSS Sprites

lìon spritemaster

Bidh mi a ’sgrìobhadh mu astar duilleig gu ìre mhath air an làrach seo agus tha e na phàirt chudromach den anailis agus na leasachaidhean a bhios sinn a’ dèanamh air làraich ar luchd-dèiligidh. A bharrachd air gluasad gu frithealaichean cumhachdach agus a ’cleachdadh innealan mar Lìbhrigidhean Lìbhrigidh Susbaint, tha grunn dhòighean prògramaidh eile ann as urrainn don leasaiche lìn cuibheasach a chleachdadh.

Tha an ìre airson an duilleag stoidhle tùsail Cascading còrr air 15 bliadhna a-nis. Bha CSS na mean-fhàs cudromach ann an leasachadh lìn oir bha e a ’sgaradh susbaint bho dhealbhadh. Thoir sùil air a ’bhlog seo agus gin eile agus tha a’ mhòr-chuid den eadar-dhealachadh stoidhle dìreach anns an duilleag stoidhle ceangailte. Tha duilleagan-stoidhle cudromach cuideachd oir tha iad air an stòradh gu h-ionadail ann an tasgadan sa bhrobhsair agad. Mar thoradh air an sin, mar a bhios daoine a ’tadhal air an làrach agad, chan eil iad a’ luchdachadh sìos duilleag stoidhle gach uair… dìreach susbaint na duilleige.

Is e aon eileamaid de CSS nach eilear a ’cleachdadh gu leòr CSS Sprites. Nuair a bhios neach-cleachdaidh a ’tadhal air an làrach-lìn agad, is dòcha nach tuig thu nach eil iad dìreach a’ dèanamh aon iarrtas airson na duilleige. Iad grunn iarrtasan a dhèanamh… Iarrtas airson na duilleige, airson duilleagan stoidhle sam bith, airson faidhlichean JavaScript sam bith ceangailte, agus an uairsin gach ìomhaigh. Ma tha cuspair agad anns a bheil sreath de dhealbhan airson chrìochan, bàraichean seòlaidh, cùl-raointean, putanan, msaa… feumaidh am brabhsair gach fear iarraidh, aon aig an aon àm bhon t-seirbheisiche lìn agad. Dèan iomadachadh air an sin leis na mìltean de luchd-tadhail agus faodaidh sin na deichean mhìltean de dh ’iarrtasan a dhèanamh don t-seirbheisiche agad!

Bidh seo, an uair sin, a ’slaodadh sìos do làrach. A. faodaidh làrach slaodach buaidh mhòr a thoirt air conaltradh agus atharrachadh a bhios an luchd-èisteachd agad a ’dèanamh. Tha ro-innleachd a bhios luchd-leasachaidh lìn sgoinneil a ’cleachdadh a’ cur na h-ìomhaighean gu lèir ann an aon fhaidhle… ris an canar a sprite. An àite a bhith a ’dèanamh iarrtas airson gach aon de na h-ìomhaighean faidhle agad, a-nis chan fheum ach aon iarrtas a bhith ann airson an ìomhaigh sprite singilte!

Faodaidh tu leughadh mu dheidhinn mar a tha CSS Sprites ag obair aig CSS-Tricks or Sprash Magazine Smashing Magazine dreuchd. Chan e a ’phuing agam sealltainn dhut mar a chleachdas tu iad, dìreach airson comhairle a thoirt dhut gus dèanamh cinnteach gu bheil an sgioba leasachaidh agad gan toirt a-steach don làrach. Tha an eisimpleir a tha CSS Tricks a ’toirt seachad a’ sealltainn 10 ìomhaighean a tha nan 10 iarrtasan agus a ’cur suas ri 20.5Kb. Nuair a thèid a chruinneachadh ann an aon sprite, tha e 1 iarrtas a tha 13kb! Tha an t-iarrtas turas cruinn agus na h-amannan freagairt airson 9 ìomhaighean a-nis air falbh agus tha an dàta air a lughdachadh nas motha na 30%. Dèan iomadachadh air an sin leis an àireamh de luchd-tadhail air an làrach agad agus tha thu gu bhith a ’crathadh cuid de ghoireasan!

globalnavTha Apple tha bàr seòlaidh na dheagh eisimpleir. Tha corra stàite aig gach putan ... ge bith a bheil thu air an duilleag, far na duilleig, no a ’gluasad thairis air a’ phutan. Bidh CSS a ’mìneachadh co-chomharran a’ phutan agus a ’taisbeanadh na sgìre den stàit cheart gu brabhsair an luchd-cleachdaidh. Tha na stàitean sin uile air an tuiteam còmhla ann an aon raon grafaigeach - ach air an taisbeanadh a rèir sgìre mar a tha air a chomharrachadh anns an duilleag stoidhle.

Ma tha meas aig an luchd-leasachaidh agad air innealan, tha tunna a-muigh an sin a chuidicheas iad, nam measg an Frèam CSS Compass, IarrtasReduce airson ASP.NET, CSS-Spriter airson Ruby, Sgriobt CSSSprite airson Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Gineadair Sprite CSS aig Pròiseact Fondue, Sprite Master Web, Agus a ' SpriteMe Comharradh-leabhair.

Glacadh-sgrìn de Sprite Master Web:
lìon spritemaster

Martech Zone cha bhith sinn a ’cleachdadh ìomhaighean cùl-fhiosrachaidh air feadh a chuspair, mar sin chan fheum sinn an dòigh seo a chleachdadh aig an àm seo.

2 Beachdan

  1. 1

    Fuirich… nach e “ìomhaigh” (no “plèana”) a th ’anns a’ chruinneachadh gu lèir, agus gach “fo-ìomhaigh” no fo-bhuidheann de dhealbhan a thaobh feadhainn beòthail no ag atharrachadh gu eadar-ghnìomhach) mar “sprite”?

    Is dòcha gu bheil stuth air ath-ainmeachadh bhon uair mu dheireadh a làimhsich mi an seòrsa rud seo ach b ’urrainn dhomh mionnachadh gur e an Sprite an eileamaid a chaidh a thaisbeanadh, chan e an clàr dàta mòr às an deach a tharraing.

    (“Clàr sprite”… nach e sin a bh ’ann?)

    • 2

      Is dòcha gu bheil sinn a ’bruidhinn dà rud eadar-dhealaichte, Marc. Le CSS, faodaidh tu gu bunaiteach sònrachadh dè an 'cuibhreann' de fhaidhle ìomhaigh a tha ri fhaicinn a 'cleachdadh co-chomharran. Leigidh seo dhut na h-ìomhaighean agad gu lèir a chuir ann an aon ‘sprite’ agus an uairsin dìreach tarraing chun àite a tha thu airson a thaisbeanadh leis an CSS.

Dè do bheachd?

Tha an làrach seo a 'cleachdadh Akismet gus spama a lùghdachadh. Ionnsaich mar a thathar a 'pròiseasadh an dàta bheachdan agad.