Nkag mus rau koj lub xaib nrog CSS Sprites

spritemaster web

Kuv sau txog nplooj ntawv ceev ceev heev ntawm lub vev xaib no thiab nws yog qhov tseem ceeb ntawm kev tshuaj ntsuam thiab txhim kho peb ua rau peb cov neeg siv khoom xaib. Ib cag ntawm kev txav mus rau cov chaw muaj zog thiab siv cuab yeej nyiam Cov ntsiab lus xa tawm tes hauj lwm, muaj ntau tus lej ntawm lwm cov txheej txheem kev ua haujlwm nruab nrab lub web tsim tawm tuaj yeem siv.

Tus qauv rau thawj Cascading Style Sheet muaj ntau dua 15 xyoos tam sim no. CSS yog qhov kev hloov tseem ceeb hauv kev tsim web vim nws cais cov ntsiab lus los ntawm kev tsim. Saib ntawm lub blog no thiab lwm qhov thiab feem ntau ntawm qhov sib txawv styling tsuas yog nyob hauv daim ntawv txuas nrog no xwb. Stylesheets kuj tseem ceeb vim tias lawv tau muab tso rau hauv cov chaw hauv cache hauv koj tus browser. Raws li qhov tshwm sim, raws li tib neeg mus txuas ntxiv tuaj xyuas koj lub xaib, lawv tsis tau rub tawm cov ntawv style txhua lub sijhawm ... tsuas yog cov nplooj ntawv ntsiab lus.

Ib lub ntsiab ntawm CSS uas feem ntau underutilized yog CSS SpritesCov. Thaum ib tus neeg siv nkag mus rau koj lub vev xaib, tej zaum koj yuav tsis paub tias lawv tsis yog ua ib qho kev thov rau nplooj ntawv. Lawv ua ntau yam kev thov… Qhov thov rau nplooj ntawv, rau ib qho nplooj ntawv style, rau txhua daim ntawv txuas nrog JavaScript cov ntaub ntawv, thiab tom qab ntawd txhua daim duab. Yog tias koj muaj lub ntsiab lus uas muaj ntau cov duab rau cov ciam teb, cov kab qhia kev tshawb fawb, cov keeb kwm yav dhau los, cov nyees khawm, thiab lwm yam… browser yuav tsum thov txhua tus, ib qho zuj zus los ntawm koj lub web server. Muab cov txiaj ntsig ntawd los ntawm ntau txhiab tus qhua thiab qhov ntawd tuaj yeem yog kaum txhiab txhiab qhov kev thov ua rau koj cov neeg rau zaub mov!

Qhov no, nyeg, qeeb koj lub xaib. A Qhov chaw maj mam tuaj yeem muaj kev cuam tshuam zoo rau kev koom tes thiab kev hloov pauv uas koj cov neeg tuaj saib ua. Ib lub tswv yim uas cov neeg tsim kho lub web tau siv yog muab tag nrho cov duab rau hauv ib qho tsim ... hu ua a spriteCov. Tshaj li ua qhov kev thov rau txhua qhov ntawm koj cov ntawv xa duab, tam sim no tsuas yog xav tau ib qho kev thov rau cov duab sprite nkaus xwb!

Koj tuaj yeem nyeem txog li cas CSS Sprites ua haujlwm ntawm CSS-Tricks or Smashing Magazine's CSS Sprite ncej. Kuv taw tes tsis yog los qhia koj yuav ua li cas siv lawv, tsuas yog qhia koj kom paub tseeb tias koj pab pawg txhim kho koom nrog lawv mus rau hauv lub xaib. Piv txwv tias CSS Tricks muab qhia 10 cov duab uas yog 10 qhov thov thiab ntxiv ntau txog 20.5Kb. Thaum sib sau ua ke nyob rau hauv ib sprite, nws yog 1 qhov thov uas yog 13kb! Kev hloov mus ncig thov thiab lub sijhawm teb rau 9 daim duab yog tam sim no ploj mus thiab tus nqi ntawm cov ntaub ntawv raug txo ntau dua 30%. Fiply uas los ntawm tus naj npawb ntawm cov neeg tuaj saib ntawm koj lub xaib thiab koj mus tiag tiag chais ib co kev pab tawm!

ntiaj tebnavcov Kua navigation bar yog ib qho piv txwv zoo. Txhua lub pob muaj ob peb lub xeev… txawm hais tias koj nyob rau ntawm nplooj ntawv, tawm nplooj ntawv, lossis mousing rau lub pob. CSS txhais tau qhov ua kom sib haum ntawm lub pob thiab nthuav tawm thaj tsam ntawm qhov tseeb lub xeev rau cov neeg siv browser. Tag nrho cov xeev no tau sib sau ua ke hauv ib daim duab nkaus xwb - tab sis pom thaj av los ntawm thaj av raws li hais hauv daim foos style.

Yog tias koj cov neeg tsim khoom nyiam cov cuab yeej, muaj cov tev tawm muaj uas tuaj yeem pab lawv, suav nrog Compass CSS lub moj khaum, RequestReduce rau ASP.NET, CSS-Sau Lus rau Ruby, CSSSprite tsab ntawv rau Photoshop, SpritePad, SpriteRight, Ntawv Txij Nkawm, ZeroSprites, Txoj Haujlwm Fondue's CSS Sprite Generator, Sprite Master Web, Thiab cov SpriteMe Ntawv cim phau ntawv.

Screenshot ntawm Sprite Master Web:
spritemaster web

Martech Zone tsis siv cov duab keeb kwm yav dhau los thoob plaws nws cov ntsiab lus, yog li peb tsis tas yuav siv cov txheej txheem no rau lub sijhawm no.

2 Comments

  1. 1

    Tos… tsis yog tag nrho kev sau ib qho “duab” (los sis “dav hlau”), thiab txhua sub-duab (lossis pawg ncua duab thaum muaj cov hloov ua yeeb yaj kiab lossis hloov pauv kev xav) ib “sprite”?

    Tej zaum cov khoom tau hloov npe txij li lub sijhawm dhau los kuv tau ua cov haujlwm zoo li no tab sis kuv tuaj yeem cog lus tias Sprite yog lub ntsiab lus uas tau ua tiav lawm, tsis yog cov ntaub ntawv loj cov rooj uas nws tau rub los ntawm.

    (“Sprite table”… uas tsis yog nws?)

    • 2

      Tej zaum peb yuav hais ob yam sib txawv, Cim. Nrog CSS, koj tuaj yeem sau hais kom meej qhov twg 'ntu' ntawm cov duab ntawv los tso saib kev siv cov duab tswj. Qhov no tso cai rau koj muab tag nrho koj cov duab rau hauv ib qho 'sprite' thiab tom qab ntawd tsuas yog taw tes rau thaj chaw uas koj xav kom tso tawm nrog CSS.

Yuav ua li cas koj xav hais tias?

Qhov Web site no siv Akismet los txo cov kev pabcuam. Kawm li cas koj cov ntaub ntawv tawm tswv yim tiav.