Faatelevaveina Lou Nofoaga ma CSS Sprites

'upega tafaʻilagi failautusi

Ou te tusi e uiga i le itulau saosaoa teisi i luga o lenei '' upega tafaʻilagi ma o se taua vaega o le auiliiliga ma faʻaleleia matou faia i luga o matou tagata 'upega tafaʻilagi. E ese mai le masiʻi atu i 'auʻaunaga mamana ma faʻaaoga mea faigaluega pei o Fesoʻotaʻiga Faʻasalalauga Faʻatonu, e i ai le numera o isi polokalame metotia e mafai ona faʻaaogaina le averesi web developer.

O le tulaga mo le uluai Cascading Style Sheet ua silia ma le 15 tausaga le matua i le taimi nei. CSS o se taua taua i le atinaʻeina o le upega tafaʻilagi aua na vavaeʻeseina mea mai le mamanu. Vaʻai i lenei blog ma soʻo seisi ma le tele o le faʻaigoaina o le eseʻesega e naʻo totonu o le faapipiʻiina sitaili. E taua foi Stylesheets aua e teu i le lotoifale i totonu o se cache i totonu o lau browser. O lona iʻuga, a o asiasi atu pea tagata i lau 'upega tafaʻilagi, latou te le o aumaiaina i lalo se laiga i taimi taʻitasi… naʻo le itulau i totonu.

Tasi le elemeni o le CSS e masani ona le faʻaaogaina CSS Sprites. A asiasi se tagata faʻaaoga i lau 'upega tafaʻilagi, oe ono le iloa latou te le o faia naʻo le tasi le talosaga mo le itulau. Latou faia tele talosaga… Se talosaga mo le itulau, mo soʻo se laupepa sitaili, mo soʻo se faʻapipiʻiina faila JavaScript, ma ata taʻitasi. Afai e i ai sau autu o loʻo i ai le faʻasologa o ata mo tuaʻoi, faatautaiga faʻamau, talaʻaga, faʻamau, ma isi. Faʻatele ile faitau afe o tagata asiasi ma e mafai ona sefulu sefulu afe talosaga na fai i lau server!

Lenei, i le isi, faʻatelegese lau '' upega tafaʻilagi. A 'Upega tafaʻilagi lemu mafai ona i ai se aafiaga taua i luga o le faamau ma liua mea na faia e lau aofia. O se metotia e faʻaaogaina e tagata fai upega tafailagi o loʻo faʻaaogaina uma ai ata i totonu o le faila e tasi… ua taʻua o le sprite. Nai lo le faia o se talosaga mo au faila faila uma, o lenei ua na o le manaʻomia lava ona tasi le talosaga mo le tasi sprite ata!

E mafai ona e faitau e uiga i ai faʻafefea CSS Sprites galue i CSS-togafiti or Smashing Magazine's CSS Sprite pou O laʻu manatu e le o le faʻasino ia te oe pe faʻafefea ona faʻaaoga, na o le fautuaina oe ia mautinoa o lau atinaʻe 'au faʻaofi latou i totonu o le' upega tafaʻilagi. O le faʻataʻitaʻiga o loʻo saunia e CSS Tricks o loʻo faʻaalia mai ai ni ata se 10 e 10 talosaga ma faʻaopopo i le 20.5Kb. Pe a potopoto i se tasi sprite, e 1 talosaga ole 13kb lena! O le talosaga alu malaga ma taimi tali mo 9 ata ua leai nei ma le aofaʻi o faʻamatalaga ua faʻaititia e sili atu i le 30%. Faʻatele e ala i le numera o tagata asiasi i luga o lau '' upega tafaʻilagi ma o le a e matua seleina nisi punaoa ese!

lalolagi lautelele apu pa faʻataʻitaʻi o se lelei faʻataʻitaʻiga. E tofu ia faʻamau ma ni nai setete… pe o oe i luga o le itulau, aveese le itulau, poʻo gutu luga o le faʻamau. CSS faʻauigaina le faʻamaopoopoina o le faʻamau ma maua ai le itulagi o le saʻo tulaga i le tagata faʻaaoga suʻesuʻega. O nei setete uma ua faʻapipiʻi faʻatasi i se tasi ata - ae faʻaalia itulagi i lea itulagi pei ona faʻamaoti mai i le sitaili pepa.

Afai e fiafia au atinaʻe i mea faigaluega, e iai tone i fafo e mafai ona fesoasoani ia latou, e aofia ai ma Tapasa CSS faʻavae, Talosaga Talosaga mo ASP.NET, CSS-Spriter mo Ruby, Tusitusiga CSSS mo Photoshop, SpritePad, Sprite Faʻatonu, SpriteCow, Faʻafanua, Polokalama Fondue's CSS Sprite Generator, Sprite Master Upega tafa'ilagi, Ma le SpriteMe Lomitusi.

Matagofie o Sprite Master Upega tafa'ilagi:
'upega tafaʻilagi failautusi

Martech Zone e le faʻaaogaina talaaga i tua i lona autu, o lea tatou te le tau faʻaaogaina ai lenei metotia i lenei taimi.

2 Faamatalaga

  1. 1

    Faatali… pe le o le aoina atoa ea o se “ata” (po o se “vaalele”), ma o ata laiti taitasi (po o se vaega laiti o ata i le tulaga o ata ola po o ni suiga fegalegaleai) o se “sprite”?

    Masalo o mea ua toe faʻaigoaina talu mai le taimi mulimuli na ou taulimaina ai lenei ituaiga mea ae na mafai ona ou tauto o le Sprite o le elemene na iu lava ina faʻaalia, ae le o le laulau faʻamaumauga tele na toso mai ai.

    (“Sprite table”… a ea?)

    • 2

      Atonu e lua mea eseese tatou te talanoa ai, Mareko. Faatasi ai ma le CSS, e mafai ona e faʻamaonia po o fea 'vaega' o se faila ata e faʻaalia i le faʻaogaina o faʻamaopoopo. Ole mea lea e mafai ai ona e tu'u uma au ata ile 'sprite' e tasi ona fa'asino lea ile vaega e te mana'o e fa'aali ile CSS.

O le'a sou manatu?

O lenei 'upega tafaʻilagi e faʻaaogaina le Akismet e faʻaitiitia le spam. Aoao pe faapefea ona faʻasoa lau faʻamatalaga faʻamatalaga.