CSS Sprites

Sveiki,

turbūt daugelis esat girdėjęs ir žinot apie CSS sprites ir kam jie skirti, tad čia plačiai apie tai nekalbėsiu. Man užtat kilo klausimas ar apsimoka sudėti absoliučiai visus tinklalapio paveiksliukus į vieną sprite ir jį naudot visur, kur reikia?

Kaip jūs manot, ar tai pasiteisina? Ar geriau naudot tik siaurose vietose? Nes tarkim jeigu jis būtų vienas didelis, tai jį vistiek reikėtų iššaukinėt per css atskirai kiekviename apibrėžime. Ar galbūt galima kažkaip kitaip sutvarkyt, kad užtektų tik bg paveiksliuko poziciją nurodyt?

Padiskutuokim, pasidalinkim mintimis apie tai.

Pasiteisina nebent krovimo greičiu atžvilgiu - tau koduot greičiau nuo to nebus. Nežinau, ar galima iškart visiems užmesti tą background, nebent:

#vienas, .du, .trys {
...
}

O po to jau tvarkai prie kiekvieno jiems pozicijas. Na, dar būtų galima į ką nors kaip LESS ar SASS pasižiūrėti :)

Pasiteisina nebent krovimo greičiu atžvilgiu - tau koduot greičiau nuo to nebus. Nežinau, ar galima iškart visiems užmesti tą background, nebent:

#vienas, .du, .trys {
...
}

O po to jau tvarkai prie kiekvieno jiems pozicijas. Na, dar būtų galima į ką nors kaip LESS ar SASS pasižiūrėti :)

Blem, pats tai nepagalvojau, jog galima gi vieną apibrėžimą visiems div'ams įdėt su vien tik background-image nustatymu :D

O dėl kodavimo greičio, tai žinau, kad greičiau nebus, man tai net nelabai ir rūpi. Man įdomu ar tikrai pasiteisina puslapio krovimo greičiu. O kadangi galima (lyg to būčiau nežinojęs) iššaukti tą paveiksliuką vieną kartą, tai http užklausų turėtų sumažėt. Bet vat įdomu ar tai tikrai taip pasiteisina ir ar apsimoka visą css perrašinėti dėl rezultatų? Gal kas turit patirties?

CSS sprites tikrai apsimoka, jei į jį sudėsi paveiksliukus, kurie svetainėje naudojami nuolatos / kiekviename puslapyje ir yra retai keičiami. Pavyzdžiui, Gmail sudėta, atrodo, viskas išskyrus logotipą.

Darbui pasilengvinti - spriteme.

Karpyti dizainą reikia su fireworks cs5, tada tiek psd tiek png tiks.

Aisku pirmenybe png.

Pasidarome, kad ir savo rezoliucijos transparent img ir dėliojame visus img i ji ikonas, backgroundus ir t.t.

Kuom gerai sprite, greiciau kraunasi, nereikia laukti hoveriu, preloadinti ikonu..

Kuom fireworks gerai? Deliojant paveiksiukus visada matomos jo koordinates, tai rasant css tereikia -x -y naudoti background'e ir viskas.

Sudetingiau tik su repeat'ais ir besitampancio ilgio elementais.

Fiksuoto aukscio ir plocio deti i kruva visiskai salia vienas kito,

o kitus deliotis pagal kampus krastus paliekant jiems vietos i ta puse kur reikes ir t.t.

Nu cia labai trumpai kaip tai pasidaryti lengviau.

Man patinka http://spritegen.website-performance.org/, kuris iš karto sugeneruoja CSS su koordinatėmis kiekvienam paveiksliukui.

Galėjot ir ankščiau šią temą sukurti, nes praeitą savaitę turėjau per photoshop daryt savo css sprites ir viską rankiniu būdu į css surašyt.. :D