Te Whakaterenga i To Pae me nga CSS Sprites

paetukutuku kaituhi

Ka tuhi au mo te tere o te whaarangi ki runga i tenei papaanga he waahanga nui tenei mo te wetewete me nga whakapainga e mahia ana e matou ki nga papaanga a o taatau kaihoko. I tua atu i te neke ki nga kaiwhakarato kaha me te whakamahi taputapu penei Whatunga Tukunga Ihirangi, kei kona ano etahi atu mahinga mahinga e taea ana e te kaiwhakawhanake paetukutuku toharite te whakamahi.

Ko te paerewa mo te Panui Panuku Momo Cascading kua neke atu i te 15 nga tau inaianei. He whanaketanga nui te CSS i roto i te whanaketanga paetukutuku na te mea i wehe ke te tuhinga mai i te hoahoa. Tirohia tenei blog me tetahi atu, me te nuinga o nga rereketanga taera kei roto noa i te raarangi taapiri e piri ana. He mea nui ano nga Maakaahua na te mea ka penapena nga waahi ki roto i te pouaka kaute i roto i to tirotiro. I te mutunga, i te haere tonu o te taangata ki to papanga, kaore i te tango i te rau taera ia waa… ko nga tuhinga noa o te whaarangi.

Ko tetahi waahanga o te CSS e kore e tino whakamahia ana CSS Sprite. Ka toro atu te kaiwhakamahi ki to paetukutuku, kaore pea koe i te mohio kaore i te kotahi noa nga tono mo te whaarangi. Ratou mahia nga tono maha… He tono mo te whaarangi, mo nga rau taera, mo nga konae JavaScript ka piri, ka hono ai ia ahua. Mena he kaupapa taau kei a koe nga whakaahua mo nga rohe, nga pae whakatere, nga papamuri, nga paatene, me era atu… me tono e te kaitirotiro ia mea, ia wa, mai i to kaituku paetukutuku. Whakareatia atu ma te mano o nga manuhiri ka tae atu ki te tekau mano tini tono ki to kaitoha!

Ko tenei, ka whakaheke i to papaanga. A he puhoi te paanga o te papanga ki te urunga me te huri e to whakarongo. He rautaki e whakamahia ana e nga kaiwhakawhanake paetukutuku nui ko te whakauru i nga whakaahua katoa ki roto ki te konae kotahi… i huaina ko te sprite. Tena ki te tono tono mo o whakaahua whakaahua, inaianei me tono kia kotahi te whakaahua sprite kotahi!

Ka taea e koe te korero mo pehea te mahi a te CSS Sprites i CSS-Tricks or Smashing makasini CSS Sprite pou Ko taku korero ehara i te whakaatu ki a koe me pehea te whakamahi, hei tohutohu noa i a koe kia whakauruhia mai e to roopu whanaketanga ki roto i te papaanga. Ko te tauira e whakaatuhia ana e CSS Tricks e whakaatu ana i nga whakaahua 10 e 10 nga tono ka tapiri atu ki te 20.5Kb. Ka kohia ana i roto i te waahi kotahi, koinei 1 tono 13kb tera! Ko nga tono mo te haerenga hurihuri me nga waa whakautu mo nga whakaahua 9 kua ngaro inaianei ana kua heke te nui o nga korero neke atu i te 30%. Whakahaerehia ma te maha o nga manuhiri kei to papanga ka tino heua e koe etahi rauemi!

ao-aote Apple pae whakaterenga he tauira pai. He maha nga ahuatanga o ia paatene… kei te whaarangi koe, kei waho o te whaarangi, kei te neke ranei i te paatene. Ka tautuhia e CSS nga taunga o te paatene ka whakaatu i te rohe o te ahua tika ki nga kaitoro tirotiro. Ko enei kawanatanga katoa kua hinga ngatahi ki te whakairoiro kotahi - engari ka whakaatuhia te rohe ma ia rohe e whakaatu ana i te pepa taera.

Mena he pai ki nga kaiwhakangungu o taputapu, kei kona atu nga taone nui hei awhina i a raatau, tae atu ki nga Kapehu anga CSS, TonoToha mo te ASP.NET, CSS-Spriter mo Ruby, Hōtuhi CSSSprite mo te Whakaahua, Panui Sprite, SpriteTika, SpriteCow, TuuturuWhiwhi, Kaupapa Whakawhanake a CSS Sprite Generator, Paetukutuku Paetukutuku a Sprite, Me te SpriteMe Pukapuka Panui.

Tuhinga o mua Paetukutuku Paetukutuku a Sprite:
paetukutuku kaituhi

Martech Zone kaore e whakamahi i nga whakaahua papamuri puta noa i tana kaupapa, no reira kaore e tika kia whakamahia tenei tikanga i tenei waa.

2 Comments

  1. 1

    Taihoa… ehara ko te kohinga katoa he "ahua" (he "rererangi" ranei), a ko ia ahua-iti (ko te roopu-roopu o nga whakaahua ranei i te mea ka whakaohohia, ka whakawhiti ranei nga mea whakawhitiwhiti) he "sprite"?

    Akene kua whakaingoa ano nga mea mai i te wa o mua i whakahaerehia e au tenei momo mea engari i oati ahau ko te Sprite te waahanga i oti te whakaatu, kaore ko te teepu raraunga nui i kumea mai.

    ("Teepu Sprite"… ehara koinei?)

    • 2

      E rua pea nga mea e korerohia ana e maatau, Maka. Ma te CSS, ka taea e koe te tohu ko tehea 'waahanga' o tetahi konae whakaahua hei whakaatu ma te whakamahi i nga taunga. Ma tenei ka taea e koe te whakauru i o whakaahua katoa ki roto i te 'sprite' ka tohu noa ki te rohe e hiahia ana koe ki te whakaatu me te CSS.

He aha koutou whakaaro?

Whakamahia ai e tenei pae i te Akismet hei whakaiti i te mokowhiti. Akohia te tukatuka o to raraunga korero.