CSS Sprites in optimizacija strani

Luka — Tue, 14 Sep 2010 20:14:29 +0000

Ko se lotimo optimizacije spletne strani je ena izmed stvari na seznamu tudi zmanjšanje HTTP zahtevkov (HTTP Requests). En izmed načinov, kako zmanjšati število teh zahtevkov je tudi zmanjševanje števila slik na spletni strani. Ampak to ne pomeni, da bo dejansko število slik manjše in bo stran manj zanimava – z uporabo CSS Sprites tehnike prikažemo več slik kot eno samo.

Zgodovina CSS Sprites

Izraz Sprite izhaja iz starih časov računalniške grafike in video iger, ko so zadevo uporabili tako, da so v pomnilnik namesto ene velike slike naložili več manjših, računalnik pa je potem prikazoval te posamezne kose. Manj podatkov kot se je prenašalo iz pomnilnika, hitreje je delovalo. Na podobnem principu delujejo tudi CSS Sprites, le da tukaj več manjših slik združimo v eno veliko, tako da namesto 10 slik naložimo le eno.

Na spletu je nekaj časa veljalo, da je slike bolje razrezati in prikazovati v več kosih, kar pa ne drži popolnoma. S tem se je dosegla le navidezna pohitritev nalaganja, saj so se delčki slike prikazovali hitreje. Ampak ta princip deluje le navidezno, v resnici ta tehnika ni hitrejša. Vsak uporabnik namreč z obiskom spletne strani sproži HTTP zahtevke za slike, priložene datoteke, itd. Odvisno od verzije HTTP protokola in brskalnika, ki se uporablja, pa lahko le ta v povprečju naenkrat prenaša le dva do štiri zahtevke. Več kot je zahtevkov, daljša je vrsta.

Kako se lotiti CSS Sprites

Torej, princip je preprost. Čim več slik želimo združiti v eno samo, saj s tem privarčujemo na številu HTTP zahtevkov, kar pomeni tudi krajši čas nalaganja spletne strani.

Vzemimo za primer vrstico nekaj ikon, ki jih uporabljamo za prikaz povezav do socialni omrežij. Imamo 7 ikon velik 24px X 24px, s skupno velikostjo 10,0KB.

Ikone za povezavo na socialna omrežja

Koda našega menija v HTML bi izgledala takole:

Če želimo ta meni prikazati s tehniko CSS Sprite, je naša prva naloga, da teh 7 ikon združimo v eno sliko. Najlažje to naredite s Photoshopom ali podobnim programom. Slike postavite eno poleg druge, lahko naredite tudi nekaj px razmika med njimi, da bodo bolj pregledne.

Primer ikon pripravljenih za delo s CSS Sprites

Ko imamo sliko v celoti sestavljeno lahko naredimo HTML, koda pa gre tako:

Primerjava med klasično tehniko in CSS Sprites

Lahko se na lastne oči prepričate, da vidne razlike med eno in drugo tehniko ni. Prihranili pa smo 6 HTTP zahtevkov, poleg tega je tudi sprite slika velika 9,50KB, torej smo prihranili tudi na skupni velikosti datotek. Ponavadi se razlika v velikosti pozna še malo bolj.

Posebnosti in slabosti Spritov

Ena izmed težav Spritov je ta, da niso primerni za ponavljanje. Ponavljanje je namreč možno doseči le v eno dimenzijo, po osi X ali Y, v obe hkrati pa žal ne gre. Zato je tehnika CSS Sprites najbol primerna za posamezne grafične bloke, recimo ikone, kot uporabljeno v primeru.

CSS Sprites da ali ne?

Seveda, kjerkoli je možno! Zmanjšanje števila HTTP zahtevkov je verjetno ena najlažjih možnosti optimizacije. Morda se vam bo na začetku zdelo veliko dela, ampak ko se boste sistema enkrat navadili boste ugotovili, da niti ni tako zamudno opravilo. Osebno se gradnje strani lotim najprej na klasičen način, na koncu pa vse slike združim v sprite, kar je morda malo zamudno (dvojno delo), ampak je tako enostavneje delati vmesne popravke. Če malo pogooglate boste našli tudi razne CSS Sprites generatorje, ki jim samo posredujete slike, oni pa jih sami zložijo v vrstni red.

CSS3 novosti

Luka — Mon, 26 Jul 2010 10:16:28 +0000

CSS3

CSS3 prinaša kup novosti na področje spletnega oblikovanja in skupaj s HTML5 naj bi predstavljala pravo spletno revolucijo. Na kratko vam bomo predstavili, kaj vse lahko že danes naredite na svojih straneh samo z uporabo CSS3 standardov pri oblikovanju spletnih strani. Trenutno je največji problem to, da CSS3 podpirajo le novejši brskalniki, v starejših verzijah pa je spletna stran vseeno dobro vidna, le da je prikazana brez novosti. Trenutno (julij 2010) je CSS3 podprt v brskalnikih Firefox, Safari, Konqueror in Opera.

Obrobe (border)

En izmed večjih napredkov se je zagotovo zgodil pri možnostih obrobljanja, ki jih označujemo z angleško besedo border. Poleg starih možnosti, lahko sedaj pri obrobah nastavljamo tudi okrogle robove (border radius), sence robov (box-shadow), večbarvne robove (border color) in slike kot ozadje robov (border image).

Pred tem je bilo potrebno za tako oblikovanje uporabiti sliko kot ozadje. Ta novost bo zagotovo prihranila ogromno časa pri razvoju, poleg tega pa se s tem zaradi neuporabe slikovnega materiala zmanjša tudi število HTTP zahtevkov (HTTP requests) in količina prenešenih podatkov, kar lahko pri grafično bogati strani pomeni kar nekaj kB manj za vsak prikaz strani.

Ozadja (background)

Pri ozadjih je najbolj dobrodošla novost uporaba večih ozadjih hkrati (multiple backgrounds), kar omogoča, da enemu elementu določimo več slikovnih oz. barvnih ozadij, ne da bi za to morali uporabiti več divov. Ozadja pri pisanju CSS kode enostavno ločimo z vejico.

Barve (color)

Poleg heksadecimalnega (hexadecimal) načina, lahko sdaj barve določamo tudi na HSL, HSLA in RGBA način

HSL (Hue, Saturation, Lightness) je določen s tremi vrednostmi. Najprej določimo odtenek (hue), po principu barvnega kolesa, kjer 0 ali 360 predstavlja rdečo, 120 zeleno in 240 modro. Številke vmes predstavljajo odtenke. Določimo tudi intezivnost (saturation) in sicer v procentih, kjer 100% pomeni polno barvo. Svetlost (lightness) prav tako določimo v procentih in sicer 0% pomeni črno, 100% belo, 50% pa povprečno vrednost.

HSLA je precej podoben HSL načinu, vendar nam omogoča nastavljanje še četrte vrednosti, motnosti (opacity) preko Alpha kanala (Alpha Channel)

RGBA tako kot HSLA pri HSL načinu omogoča nastavljanje RGB barv z dodatno možnostjo nastavljanja motnosti.

Učinki besedila (text effects)

Sence besedila (text shadow) so bile predstavljene že pri CSS2, a je sedaj CSS3 končno omogočil enostavno dodajanje senc brez uporabe Photoshopa ali drugih grafičnih programov. Sence se nastavljajo zelo enostavno, naredite pa lahko tudi večbarvne!

Druga novost na tem področju, ki tudi prihrani kar nekaj dela in omogoča oblikovanje brez programiranja je tekstovna prekoračitev (text overflow). To možnost uporabimo kadar želimo prikazati le nekaj znakov besedila in da se besedilo konča na za uporabnika bolj logičen način na koncu dodamo tropičje ali podoben znak, ki nakauje da gre le za povzetek. Ta problem se je prej reševal na bolj zamuden in potraten programerski način v PHPju, JavaScriptu ali drugem jeziku na katerem je bila stran osnovana.

Prelom besed (word wrap) prelomi dolge besede, da se nadaljujejo v naslednji vrstici. Prej so besede, daljše od širine kvadrata kjer so se nahajale rade uhajale čez rob.

CSS oblikovanje

Če potrebujete pomoč pri oblikovanju spletnih strani se lahko obrnete na našo oblikovalsko ekipo, ki je dobro seznanjena z novostmi. Nekaj zadev iz novega standarda CSS3 pa smo tudi že uporabili na strani Poslusaj.net.

Za vse tiste, ki ste pripravljeni že sedaj stopiti v korak s časom in svoje nove strani oblikovati v skladu z novimi standardi pa v kratkem pripravljamo prav poseben popust. Za več informacij nas lahko kadarkoli kontaktirate.

Hue, Saturation, Lightness

Spletni Studio » Oblikovanje