Ho Potlakisa Sebaka sa Hau ka CSS Sprites

setsi sa marang-rang

Ke ngola ka lebelo la leqephe hanyane sebakeng sena sa marang-rang mme ke karolo ea bohlokoa ea tlhahlobo le lintlafatso tseo re li etsang ho libaka tsa bareki ba rona. Ntle le ho ea ho li-server tse matla le ho sebelisa lisebelisoa tse kang Li-Network Delivery Networks, ho na le mekhoa e meng e mengata ea ho etsa mananeo eo moqapi oa webo ea tloaelehileng a ka e sebelisang.

Tekanyetso ea Sheet ea Pele ea Cascading e se e feta lilemo tse 15 joale. CSS e ne e le phetoho ea bohlokoa ntlafatsong ea webo hobane e ne e arola litaba le moralo. Sheba blog ena le eng kapa eng mme boholo ba phapang ea setaele bo fumaneha feela sethaleng sa setaele. Li-stylesheets le tsona li bohlokoa hobane li bolokiloe sebakeng sa heno ka har'a cache ka har'a sebatli sa hau. Ka lebaka leo, ha batho ba ntse ba etela sebaka sa hau sa marang-rang, ha ba jarolle letlapa la setaele nako le nako… feela litaba tsa leqephe.

Karolo e le 'ngoe ea CSS eo hangata e sa sebelisoeng hantle ke Li-Sprites tsa CSS. Ha mosebelisi a etela sebaka sa hau sa marang-rang, u kanna oa se hlokomele hore ha ba etse kopo e le 'ngoe feela ea leqephe. Ba etsa likopo tse ngata… Kopo ea leqephe, bakeng sa maqephe a setaele, bakeng sa lifaele tse kopantsoeng tsa JavaScript, 'me setšoantšo ka seng. Haeba u na le sehlooho se nang le letoto la litšoantšo bakeng sa meeli, libaka tsa ho sesa, limelo, likonopo, jj. Atisa seo ka baeti ba likete mme seo e ka ba likopo tse mashome a likete tse etsoang ho seva ea hau!

Sena le sona se liehisa sebaka sa hau sa marang-rang. A sebaka se liehang se ka ba le tšusumetso e kholo ho boitlamo le liphetoho seo bamameli ba hau ba se etsang. Leano leo baetsi ba liwebosaete ba le sebelisang ba beha litšoantšo tsohle ho faele e le 'ngoe… e bitsoang a sprite. Sebakeng sa ho etsa kopo ea e 'ngoe le e' ngoe ea litšoantšo tsa hau tsa faele, joale ho hlokahala feela kopo e le 'ngoe bakeng sa setšoantšo se le seng sa sprite!

U ka bala ka CSS Sprites e sebetsa joang ho CSS-Tricks or CSS Sprite ea Makasine ea Smashing poso. Taba ea ka ha se ho u bontša hore na u li sebelisa joang, ho u eletsa feela ho netefatsa hore sehlopha sa hau sa nts'etsopele se se kenya sebakeng sena sa marang-rang. Mohlala oo CSS Tricks e fanang ka ona o bonts'a litšoantšo tse 10 tseo e leng likopo tse 10 ebe li eketsa ho fihlela ho 20.5Kb. Ha e bokelloa ka sprite e le 'ngoe, ho joalo Kopo e le 'ngoe ke 1kb! Kopo ea ho ea le ho khutla le linako tsa ho arabela litšoantšo tse 9 joale li felile 'me palo ea data e fokotsoe ho feta 30%. Atisa seo ka palo ea baeti sebakeng sa hau sa marang-rang 'me u tlo beola lisebelisoa tse ling!

globalnavThe Apple sebaka sa ho sesa ke mohlala o motle. Mong le e mong konopo o na le tse seng kae e re… hore na u leqepheng la, tima leqepheng la, kapa mousing fetang konopo. CSS e hlalosa likhokahano tsa konopo ebe e hlahisa sebaka se nepahetseng ho sebatli sa basebelisi. Linaha tsena kaofela li putlame hammoho ka setšoantšo se le seng - empa li bonts'itsoe tikoloho ka libaka joalo ka ha ho boletsoe letlapeng la setaele.

Haeba bahlahisi ba hau ba rata lisebelisoa, ho na le tonne kantle moo e ka ba thusang, ho kenyeletsoa le Moralo oa Compass CSS, Kopa Fokotsa bakeng sa ASP.NET, Mosebetsi-CSS bakeng sa Ruby, Mongolo oa CSSSprite bakeng sa Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, CSS Sprite Generator ea Morero oa Fondue, Sprite Master Web, Le Khaled Bookmarklet.

Screenshot ea Sprite Master Web:
setsi sa marang-rang

Martech Zone ha e sebelise litšoantšo tse ka morao ho sehlooho sa eona, ka hona ha rea ​​tlameha ho sebelisa mokhoa ona ka nako ena.

2 Comments

  1. 1

    Ema ... na pokello eohle ha se "setšoantšo" (kapa "sefofane"), 'me setšoantšo se seng le se seng (kapa sehlotšoana sa litšoantšo tse fetotsoeng) ke "sprite"?

    Mohlomong lintho li 'nile tsa rehoa bocha ho tloha nakong e fetileng ha ke sebetsana le mofuta ona oa ntho empa ke ne ke ka hlapanya hore Sprite ke ntho e ileng ea qetella e bonts'itsoe, eseng tafole e kholo ea data eo e neng e huloa ho eona.

    (“Tafole ea Sprite”… e ne e se eona?)

    • 2

      Mohlomong re bua lintho tse peli tse fapaneng, Mareka. Ka CSS, o ka hlakisa hore na ke 'karolo' efe ​​ea faele ea setšoantšo eo u ka e bonts'ang u sebelisa likhokahano. Sena se o lumella ho beha litšoantšo tsa hau kaofela 'sprite' e le 'ngoe ebe u supa feela sebaka seo u lakatsang ho se hlahisa ka CSS.

U nahana eng?

Sebaka sena se sebelisa Akismet ho fokotsa spam. Ithute kamoo litlhaloso tsa hau li hlahang kateng.