Luasghéarú Do Láithreáin le CSS Sprites

gréasáin spritemaster

Scríobhaim faoi luas leathanaigh go leor ar an suíomh seo agus is cuid thábhachtach den anailís agus de na feabhsúcháin a dhéanaimid ar shuíomhanna ár gcliant. Seachas bogadh go freastalaithe cumhachtacha agus uirlisí mar Líonraí Seachadta Ábhar, tá roinnt teicnící cláraithe eile is féidir leis an meánfhorbróir gréasáin a úsáid.

Tá an caighdeán don Bhileog Stíle Cascáideacha bunaidh os cionn 15 bliana d’aois anois. Ba éabhlóid thábhachtach é CSS i bhforbairt gréasáin toisc gur scaradh sé ábhar ón dearadh. Féach ar an mblag seo agus ar aon cheann eile agus tá an chuid is mó den difríocht stíle sa bhileog stíl atá ceangailte leis. Tá bileoga stíle tábhachtach freisin toisc go ndéantar iad a stóráil go háitiúil i taisce laistigh de do bhrabhsálaí. Mar thoradh air sin, de réir mar a leanann daoine ar aghaidh ag tabhairt cuairte ar do shuíomh, níl stílbhileog á íoslódáil acu gach uair… ach ábhar an leathanaigh.

Gné amháin de CSS nach mbaintear mórán úsáide aisti go minic CSS Sprites. Nuair a thugann úsáideoir cuairt ar do shuíomh Gréasáin, b’fhéidir nach dtuigeann tú nach bhfuil siad ag déanamh ach iarratas amháin ar an leathanach. Siad iarratais iolracha a dhéanamh… Iarraidh ar an leathanach, ar aon stílbhileoga, ar aon chomhaid JavaScript a ghabhann leis, agus ansin ar gach íomhá. Má tá téama agat ina bhfuil sraith íomhánna le haghaidh teorainneacha, barraí nascleanúna, cúlraí, cnaipí, srl… caithfidh an brabhsálaí gach ceann, ceann ag an am, a iarraidh ar do fhreastalaí gréasáin. Déan é sin a iolrú faoi na mílte cuairteoir agus féadann sé sin na mílte iarratas a dhéanamh ar do fhreastalaí!

Moillíonn sé seo, ar a seal, do shuíomh. A. is féidir le suíomh mall tionchar drámatúil a bheith aige ar an rannpháirtíocht agus ar na tiontaithe a dhéanann do lucht féachana. Straitéis a úsáideann forbróirí gréasáin iontacha is ea na híomhánna go léir a chur i gcomhad aonair… ar a dtugtar a sprite. Seachas iarratas a dhéanamh ar gach ceann de d’íomhánna comhaid, anois ní gá ach aon iarraidh amháin ar an íomhá sprite aonair!

Is féidir leat léamh faoi conas a oibríonn CSS Sprites ag CSS-Seifteanna or Sprite CSS Smashing Magazine phost. Ní hé mo phointe a thaispeáint duit conas iad a úsáid, ach comhairle a thabhairt duit a chinntiú go ndéanann d’fhoireann forbartha iad a ionchorprú ar an suíomh. Taispeánann an sampla a sholáthraíonn CSS Tricks 10 íomhá ar 10 n-iarratas iad agus suas le 20.5Kb. Nuair a bhailítear é i sprite amháin, tá 1 iarraidh is é sin 13kb! Tá an t-iarratas ar thuras cruinn agus amanna freagartha 9 n-íomhá imithe anois agus laghdaítear méid na sonraí níos mó ná 30%. Déan é sin a iolrú faoi líon na gcuairteoirí ar do shuíomh agus beidh tú ag baint leasa as roinnt acmhainní i ndáiríre!

globalnavAn Apple is sampla iontach é barra nascleanúna. Tá cúpla stát ag gach cnaipe ... cibé an bhfuil tú ar an leathanach, lasmuigh den leathanach, nó ag dul thar an gcnaipe. Sainmhíníonn CSS comhordanáidí an chnaipe agus cuireann sé réigiún an stáit cheart i láthair do bhrabhsálaí na n-úsáideoirí. Titeann na stáit seo go léir le chéile in aon ghrafach amháin - ach taispeántar iad de réir réigiúin mar a shonraítear sa stílbhileog.

Más breá le d’fhorbróirí uirlisí, tá tonna amuigh ansin a chabhróidh leo, lena n-áirítear an Creat CSS Compass, RequestReduce le haghaidh ASP.NET, CSS-Spriter do Ruby, Script CSSSprite le haghaidh Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Gineadóir Sprite CSS Project Fondue, Máistir Gréasáin Sprite, agus an SpriteMe Leabharmharc.

Scáileán de Máistir Gréasáin Sprite:
gréasáin spritemaster

Martech Zone ní bhaineann sí úsáid as íomhánna cúlra le linn a téama, mar sin ní gá dúinn an teicníc seo a úsáid ag an am seo.

2 Comments

  1. 1

    Fan ... nach “íomhá” (nó “eitleán”) an bailiúchán iomlán, agus “sprite” i ngach fo-íomhá (nó foghrúpa íomhánna i gcás cinn beoite nó athraitheacha idirghníomhacha)?

    B’fhéidir gur athainmníodh rudaí ón uair dheireanach a láimhseáil mé an cineál seo rud ach d’fhéadfainn a mhionnú gurbh é an Sprite an ghné a cuireadh ar taispeáint sa deireadh, ní an tábla mór sonraí as ar tarraingíodh é.

    (“Tábla sprite”… nárbh ea?)

    • 2

      B’fhéidir go bhfuil muid ag caint dhá rud éagsúla, Mark. Le CSS, is féidir leat a shonrú go bunúsach cén 'chuid' de chomhad íomhá atá le taispeáint ag úsáid comhordanáidí. Ligeann sé seo duit do chuid íomhánna go léir a chur in aon ‘sprite’ amháin agus ansin díriú díreach ar an limistéar is mian leat a thaispeáint leis an CSS.

Cad é do bharúil?

Úsáideann an suíomh seo Akismet chun spam a laghdú. Foghlaim conas a dhéantar próiseáil ar do chuid tráchta.