Ang konsepto ng sprites ay mayroon nang ilang sandali ngayon. Ito ay isa sa pinakakaraniwang ginagamit na mga diskarte sa industriya ng laro upang mapabilis ang proseso ng pagpapakita ng mga animasyon sa isang screen. Sa artikulong ito, partikular na titingnan namin kung paano makakatulong ang diskarteng ito sa amin na mapagbuti ang karanasan ng gumagamit sa mga web page sa tulong ng CSS Sprite sa sumusunod na pagkakasunud-sunod:
- Ano ang Sprite?
- Ano ang CSS Sprite - isang mabilis na pangkalahatang ideya?
- Halimbawa ng kung paano ito nakakatulong sa Pag-unlad sa Web?
- Mga Kalamangan Ng Paggamit ng CSS Sprites
- Ano ang dapat gawin ng isang developer kapag nagtatrabaho sa CSS Sprites?
- Paano lumikha ng isang CSS Sprite Sheet?
- Paano gagana sa CSS Sprites?
- Mga kumpanya na gumagamit ng CSS Sprites
Ano ang Sprite?
Ang sprite ay isang solong imahe na bahagi ng isang mas malaking eksena sa isang laro. Ang maramihang mga sprite ay pinagsama sa isang malaking imahe na tinatawag na isang sprite sheet. Kapag ang isang sprite sheet ay na-load sa memorya, ang iba't ibang mga sprite ay nai-render nang mabilis na magkakasunod upang bigyan ang ilusyon ng animasyon. Ginagawa ito nang sabay-sabay sa sampu hanggang daan-daang mga iba't ibang mga sprite upang makabuo ng isang eksena sa laro.
Ang pangunahing ideya ay na mas mabilis itong mag-load ng isang imahe at ipakita ang isang bahagi nito saanman kinakailangan kumpara sa paglo-load ng maraming mga imahe at ipakita ang mga ito.
Ano ang CSS Sprite: Isang mabilis na pangkalahatang ideya?
Ang isang CSS sprite ay isang diskarte na kadalasang ginagamit ng mga web developer upang ma-optimize ang pagganap ng mga web page. Sa diskarteng ito, maraming mas maliliit na imahe na kadalasang magkapareho ang sukat ay pinagsama sa isang solong malaking imaheng tinatawag na a sheet ng sprite o tile set . Ginagamit ang sprite sheet na ito upang ipakita ang mga indibidwal na elemento saan man namin kailangan ang mga ito.
Kadalasan, ang mga elemento tulad ng mga logo, nabigasyon na arrow, mga pindutan ay kasama sa sprite sheet dahil halos pareho ang mga sukat at madalas na ginagamit sa isang web page.
Halimbawa ng kung paano ito nakakatulong sa Pag-unlad sa Web?
Pangkalahatan, habang ang pagdidisenyo ng mga web page ng imahe ay naiimbak at ginagamit bilang mga indibidwal na file. Kaya, kapag binuksan ng isang gumagamit ang isang webpage, ang browser ay kailangang gumawa ng isang kahilingan sa HTTP para sa bawat isa sa mga file na ito, hiwalay na i-download ang mga ito at ipakita ang mga ito. Humahantong ito sa mas mataas na mga oras ng pag-load ng pahina dahil ang isang partikular na web page ay maaaring magkaroon ng isang malaking bilang ng mas maliit na mga imahe tulad ng mga pindutan, mga icon, logo.
Tinutulungan ng mga CSS sprite ang mga developer na pagsamahin ang mga madalas na ginagamit na maliliit na imahe sa isang malaking imahe. Ang browser ay pagkatapos ay kailangang mag-download lamang ng isang file na pagkatapos ay ginamitipakita ang kinakailangang seksyon sa pamamagitan ng pag-offset ng imahe.
Mga Kalamangan Ng Paggamit ng CSS Sprites
Mayroong dalawang pangunahing bentahe ng paggamit ng CSS sprite sa normal na mga imahe:
Mas mabilis na paglo-load ng pahina: Pinahuhusay ang oras ng paglo-load ng pahina habang ang mga larawang ginamit sa web page ay lilitaw sa sandaling na-download ang sheet.
Mas malaking throughput at mas mababang paggamit ng mapagkukunan: Hindi lamang ang diskarteng ito ang nagpapabuti sa karanasan ng end-user sa pamamagitan ng paggawa ng mas mabilis na pag-load ng pahina,ngunit binabawasan din nito ang kasikipan sa network dahil ang mas mababang bilang ng mga kahilingan sa HTTP ay ginawa.
Ano ang dapat gawin ng isang Developer kapag nagtatrabaho sa CSS Sprites?
Kapag nagtatrabaho sa mga indibidwal na imahe, maaaring gumana ang developer sa HTML tag at i-istilo ito sa CSS kung kinakailangan. Ngunit kapag nagtatrabaho sa CSS Sprites, kailangang gumawa ng isang tukoy na bagay ang isang developer:
- Paglikha ng Sprite Sheet
Habang bumubuo ng isang web page kung magpasya ang developer na gumamit ng mga CSS sprite, kailangan niya munang likhain ang sheet ng sprite sa pamamagitan ng pagsasama ng lahat ng mga nais na elemento tulad ng mga pindutan, logo, atbp. Sa isang pattern na tulad ng grid. Maaari itong magawa gamit ang anumang programa sa pag-edit ng imahe tulad ng Photoshop o Gimp. Mayroon ding maraming mga tool sa online na magagamit na makakatulong sa iyong gawin ang sprite sheet. Ang mga tool na ito ay tinalakay sa ibang pagkakataon sa artikulong ito.
- Pag-access sa isang partikular na elemento ng sprite gamit ang Posisyon sa background ng CSS pag-aari
Kapag handa na ang sprite sheet, kailangang gumamit ang CSS ng mga katangian upang ma-access ang iba't ibang bahagi ng sheet.
- lapad: Lapad ng sprite
- taas: Taas ng sprite
- background: Sanggunian sa sheet ng sprite
- Posisyon sa background: Mga halaga ng offset (sa mga pixel) upang mai-access lamang ang kinakailangang bahagi ng sheet ng sprite
Paano lumikha ng isang CSS Sprite Sheet?
Maaari mong gamitin ang anumang software sa pag-edit ng imahe upang ayusin ang iyong mas maliit na mga imahe sa isang grid ngunit dalawang mas madaling pamamaraan ang tinalakay sa ibaba:
1. Online Sprite Sheet Creation Tool
LINK: toptal.com/developers/css/sprite-generator/
Ang tool na ito ay hindi lamang libre gamitin ngunit nagbibigay din sa iyo ng kinakailangang CSS code na maaaring magamit habang sumangguni sa sprite sheet. Gayundin, maaari kang umikot sa paligid ng iba't ibang mga katangian tulad ng padding sa pagitan ng mga elemento at pagbabago ng kanilang pagkakahanay.
2. Bumubuo ng Sprite Sheet na may Sprity
Kung gumagamit ka ng Grunt, Node o Gulp, maaari kang mag-install ng isang pakete na tinatawag na Sprity na makakatulong sa iyo na lumikha ng isang sprite sheet sa iba't ibang mga format tulad ng PNG, JPG, atbp.
overriding vs overloading c ++
Una, kakailanganin mong i-install ang Sprity gamit ang:
npm i-install ang sprity -g
Pagkatapos, upang makabuo ng sprite sheet, gamitin ang sumusunod na utos:
sprity ./output-directory/ ./input-directory/*.png
Paano gagana sa CSS Sprites?
Sa halimbawang ito, gagamitin namin ang sumusunod na sheet ng sprite:
Tulad ng nakikita mo sa imahe sa itaas anim na mga icon (Instagram, Twitter, at Facebook) ay nakaayos sa isang pattern na tulad ng grid. Sa unang hilera, mayroon kaming isang normal na estado at sa pangalawang hilera, mayroon kaming kanilang hover na estado (ang imahe na lilitaw sa sandaling na-hover namin ang cursor ng mouse sa kanila).
Kung ginawa mo ang sprite sheet gamit ang mga tool na tinalakay namin sa itaas alam mo na ang mga offset na kinakailangan sa CSS ngunit kung gumamit ka ng iba pang tool o binigyan ka lang ng ilang sprite sheet pagkatapos ay huwag mag-alala, tatalakayin namin ang isang pamamaraan na tutulong sa iyo na makakuha ng mga offset para sa kinakailangang elemento.
Hinahayaan ngayon makita ang isang napaka-simpleng paraan upang makakuha ng kinakailangang mga offset para sa bawat isa sa anim na mga icon sa pamamagitan ng paggamit ng MS Paint. Maaaring hindi ito isang perpektong solusyon upang gumana sa mga sprite ngunit dahil mayroon itong tampok na nagbibigay ng mga coordinate ng mouse cursor, maaari itong magamit upang makuha ang kinakailangang koordinasyon ng X at Y.
Una, buksan ang iyong imahe ng sprite sheet (grid na naglalaman ng lahat ng mas maliit na mga imahe) at dalhin ang iyong cursor ng mouse sa kaliwang sulok sa itaas ng sprite na nais mong kunin.
Kapag mayroon ka ng mga koordinasyon ng kaliwang tuktok na punto ng iyong sprite (itaas na kaliwang imahe ng Instagram), maaari mong ipakita ang tukoy na sprite na ito saanman kinakailangan ng paggamit ng CSS code:
background: url ('img_sprites.png')
posisyon sa background: 0 0
lapad: 125px
taas: 125px
Gumagamit kami ng lapad at taas na 125 pixel tulad ng aming mga icon na nasa sukat na iyon. Upang makuha ang susunod na imahe (Twitter) sa parehong hilera, ginagamit namin ang sumusunod na code:
background: url ('img_sprites.png')
background-posisyon: -128px 0px
lapad: 125px
taas: 125px
Tandaan ang katangiang posisyon sa background sa snippet sa itaas. Ang (-128px, 0) ay nangangahulugang na-offset namin ang aming sprite sheet sa kaliwa ng 128 mga pixel (isinasaalang-alang ang padding sa pagitan ng mga elemento sa account) at 0 na mga pixel sa Y-Axis. Kung mai-access namin ang icon ng hover sa twitter kung gayon ang aming katangiang posisyon sa background ay:
background-posisyon: -128px -128px
Sa ganitong paraan, maaari na nating ma-access ang bawat bahagi ng aming sprite sheet gamit ang CSS. Dumaan tayo sa isang kumpletong HTML at CSS code kung paano ito gawin.
Hakbang 1: Pagsulat ng kinakailangang HTML Code
Sa code sa ibaba, nagdaragdag kami ng tatlong mga link. Gayundin, maiuugnay namin ang aming HTML sa styleheet (screen.css).
Hakbang 2: Pagsusulat ng kinakailangang CSS. Una, aayusin namin ang aming ibinahaging klase ng icon. Dito, makikita mong tumutukoy kami sa sprite sheet na nilikha namin.
/ * Ibinahaging icon ng Klase * /
span.icon a: link,
span.icon a: binisita{
ipakita:harangan
text-indent:-9999px
nababagabag na klase sa halimbawa ng java
larawan sa background: url (./ img_sprites.png)
background-ulitin:hindi na ulit
}
Hakbang 3: Pagkuha ng mga indibidwal na mga icon mula sa sprite sheet gamit ang mga offset.
/ * Icon ng Instagram * /
span.instagram a: link,
span.instagram a: binisita{
lapad:125px
taas:125px
background-posisyon:0 0
}
/ * Icon ng Twitter * /
span.twitter a: link,
span.twitter a: binisita{
lapad:125px
taas:125px
background-posisyon:-128px 0
}
file handling sa halimbawa ng java
/ * Facebook Icon * /
span.facebook a: link,
span.facebook a: binisita{
lapad:125px
taas:125px
background-posisyon:-257px 0
}
Hakbang 4: Pagkuha ng mga hover icon mula sa sprite sheet gamit ang mga offset.
span.instagram a: magpasadya{background-posisyon:0 -128px}
span.twitter a: magpasadya{background-posisyon:-128px -128px}
span.facebook a: magpasadya{background-posisyon:-255px -128px}
Mga kumpanya na gumagamit ng CSS Sprites
Maraming malalaking pangalan sa industriya ang gumagamit ng CSS Sprites upang mapabuti ang kakayahang tumugon ng kanilang mga website. Malawakang ginagamit ng mga kumpanyang tulad ng Google, Facebook, Amazon ang pamamaraang ito dahil nakakatulong ito sa kanila na mabawasan ang bilang ng mga kahilingan sa HTTP bawat sesyon para sa isang partikular na gumagamit. Ito ay isang malaking pakinabang kapag isinasaalang-alang namin na ang mga kumpanyang ito ay nagsisilbi sa milyun-milyong mga customer sa anumang naibigay na sandali.
Ngayon na mahawakan mo kung ano ang mga CSS sprite at kung paano gumana sa kanila, ikaw ay isang hakbang na mas malapit sa iyong paglalakbay upang malaman ang CSS. Ang mga konsepto tulad ng sprites ay isang game-changer sa oras ngayon dahil naging napakahalaga para sa mga developer na kunin ang bawat kaunting pagganap mula sa isang webpage.
Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Mga Larawan ng HTML' at babalikan ka namin.