Ke wikiwiki nei i kāu pūnaewele me CSS Sprites

pūnaewele spritemaster

Kākau wau e pili ana i ka wikiwiki o ka ʻaoʻao ma kēia pūnaewele a he ʻāpana nui ia o ka hoʻoponopono a me nā hoʻomaikaʻi a mākou e hana ai i nā pūnaewele a kā mākou mea kūʻai aku. Ma waho o ka neʻe ʻana i nā kikowaena pūnaewele ikaika a hoʻohana i nā pono e like me ʻO nā Pūnaewele Hoʻohui Kūlana, aia kekahi mau ʻano ʻenehana papahana ʻē aʻe i hiki i ka mea hoʻomohala pūnaewele ke hoʻohana.

ʻO ke kūlana no ka Pepa ʻAno Cascading Style ma luna o 15 mau makahiki i kēia manawa. He mea nui ka CSS i ka hoʻomohala pūnaewele no ka mea ua hoʻokaʻawale ia i ka ʻike mai ka hoʻolālā. E nānā i kēia blog a me nā mea ʻē aʻe a ʻo ka hapa nui o ka ʻokoʻa ʻana o ka style aia wale nō i ka styleheet pili. He mea nui nā Stylesheets no ka mea mālama ʻia lākou i kahi wahi i loko o kahi cache ma waena o kāu polokalamu kele pūnaewele. A ʻo kahi hopena, ke hoʻomau nei ka poʻe e kipa i kāu pūnaewele, ʻaʻole lākou e hoʻoiho nei i kahi pepa kaila i kēlā me kēia manawa ... ʻo ka ʻaoʻao wale nō ka ʻike.

Hoʻokahi mea o CSS i hoʻohana pinepine ʻole ʻia CSS Sprite. Ke kipa aku kahi mea hoʻohana i kāu pūnaewele, ʻaʻole paha ʻoe e ʻike ʻaʻole lākou e noi wale nei i kahi ʻaoʻao. ʻO lākou hana i nā noi he nui… He noi no ka ʻaoʻao, no nā pepa kaila, no nā faila JavaScript i hoʻopili ʻia, a laila kēlā me kēia kiʻi. Inā loaʻa iā ʻoe kahi kumuhana e loaʻa ana i kahi o nā kiʻi no nā palena, nā kaola hoʻokele, nā kāʻei, nā pihi, a pēlā aku. Hoʻonui i kēlā me nā kaukani kipa a hiki i nā tausani o nā noi i noi ʻia i kāu kikowaena pūnaewele.

ʻO kēia, ke lohi, lohi i kāu pūnaewele. A Hiki i ka pūnaewele lohi ke hopena i ka hopena a me ka hoʻololi ʻana i kāu poʻe e hoʻolohe ai. ʻO kahi papahana e hoʻohana ai nā mea hoʻomohala pūnaewele nui ke waiho nei i nā kiʻi āpau i hoʻokahi faila… i kapa ʻia a sprite. Ma mua o ka noi ʻana i kēlā me kēia o kāu faile faila, i kēia manawa aia wale nō kahi noi no hoʻokahi kiʻi sprite!

Hiki iāʻoe ke heluhelu e pili ana pehea e hana ai ʻo CSS Sprites ma CSS-Tricks or ʻO Smashing Magazine's CSS Sprite pou ʻAʻole kaʻu kiko e hōʻike iā ʻoe pehea e hoʻohana ai iā lākou, e aʻoaʻo wale iā ʻoe e hōʻoia i kāu hui hoʻomohala e hoʻohui iā lākou i ka pūnaewele. ʻO kahi laʻana a CSS Tricks e hōʻike nei he 10 mau kiʻi he 10 mau noi a hoʻonui i 20.5Kb. Ke hōʻiliʻili ʻia i hoʻokahi sprite, ʻo ia 1 noi ʻo 13kb kēlā! Ua hala ka noi huakaʻi pōʻaiapuni a me nā manawa pane no 9 mau kiʻi a ua hoʻemi ʻia ka nui o ka ʻike ma mua o 30%. Hoʻonui i kēlā me ka helu o nā mea kipa ma kāu pūnaewele a e kahi ʻā maoli nō i kahi mau kumuwaiwai.

globalnavka Apple ʻO ka pae hoʻokele he laʻana maikaʻi loa. He mau mokuʻāina kā kēlā me kēia pihi ... inā ʻoe ma ka ʻaoʻao, ma waho o ka ʻaoʻao, a i ʻole mousing ma luna o ke pihi. Hoʻākāka ʻo CSS i nā kuhi o ka pihi a hōʻike i ka ʻāpana o ka mokuʻāina kūpono i nā mea hoʻohana pūnaewele. Ua hāneʻe pū ʻia kēia mau mokuʻāina āpau i hoʻokahi kiʻi - akā hōʻike ʻia i nā wahi a ka ʻāina e like me ka mea i hōʻike ʻia i ka pepa kaila.

Inā makemake kāu mea hoʻomohala i nā mea hana, aia he ton i waho e hiki ke kōkua iā lākou, e like me ka Pākuʻi CSS panana, RequestReduce no ASP.NET, CSS-Spriter no Ruby, Palapala kākau CSSSprite no Photoshop, ʻO SpritePad, ʻO Sprite, ʻO SpriteCow, Nā ZeroSprites, ʻOihana Fondue's CSS Sprite Generator, Pūnaewele Sprite Master, A me ka ʻO SpriteMe Pukaikala.

Hoʻoponopono o Pūnaewele Sprite Master:
pūnaewele spritemaster

Martech Zone ʻaʻole hoʻohana i nā kiʻi kāʻei kua i loko o kāna kumuhana, no laila ʻaʻole pono mākou e hoʻohana i kēia hana i kēia manawa.

2 Comments

  1. 1

    Kali ... ʻaʻole anei ka hōʻiliʻili holoʻokoʻa he "kiʻi" (a i ʻole he "mokulele"), a me kēlā me kēia kiʻi liʻiliʻi (a i ʻole ʻāpana ʻāpana o nā kiʻi i ka hihia o nā animated a i ʻole interactively hoʻololi ʻana) he "sprite"?

    Malia paha ua kapa inoa ʻia nā mea mai ka manawa hope loa aʻu i lawelawe ai i kēia ʻano mea akā hiki iaʻu ke hoʻohiki i ka Sprite ka mea i pau i ka hōʻike ʻia, ʻaʻole ka papa ʻikepili nui i huki ʻia ai.

    (“Pākaukau Sprite”… ʻaʻole anei ia?)

    • 2

      E kamaʻilio paha mākou i nā mea ʻelua, Mark. Me CSS, hiki iā ʻoe ke kuhikuhi kikoʻī i kahi 'ʻāpana' o kahi faile kiʻi e hōʻike ai i nā hoʻonohonoho. ʻAe kēia iā ʻoe e waiho i kāu mau kiʻi āpau i kahi 'sprite' hoʻokahi a laila e kuhikuhi wale i kahi āu e makemake ai e hōʻike me ka CSS.

Pehea kou manaʻo?

Ke hoʻohana nei kēia pūnaewele i ka Akismet e ho'ēmi i ka spam. E aʻo pehea e hanaʻia ai kāuʻikeʻikepili.