CSS sprites
XHTML in CSS
Če ste domači z koncepti web designa, potem že poznate osnove uporabe CSS. CSS sprites nam omogoča uporabo ene same grafike, v katero je vključenih več slik razporejenih v mrežo. Na spletni strani pa se prikazuje le željen del te datoteke. Tako potrebujemo le en HTTP zahtevek in celotna grafika spletnega mesta nam je takoj na voljo.
Ta tehnika je zelo uporabna, ko imamo pred seboj dizajn bodoče spletne strani, katerega navigacija pa vsebuje slike, piktograme ali netipične fonte, ki jih uporabniki spletnega mesta nimajo nameščenih na svojih računalnikih.
Včasih smo to rešili enostavno tako, da smo celotno grafiko razrezali na več manjših slik katere smo umestili v stran. Nato smo dodali povezave in stvar je bila rešena. Danes pa je to popolnoma nesprejemljivo. Spodaj je opisanih nekaj težav s katerimi se srečamo, v kolikor ne upoštevamo W3C standardov pri izdelavi netekstovne oz. grafične navigacije.
- Iskalniki in screen reederji ne znajo prebrati teksta v sliki, kar posledično pomeni težavo v rangiranju strani kot tudi v sami dostopnosti strani slepim in slabovidnim uporabnikom.
- Večja poraba pasovne širine, kar je še posebno kočljiva stvar, v kolikor ima stran veliko obiska.
- Daljše nalaganje spletnega mesta.
Uporabi slikovne navigacije se je načeloma dobro izogibati, čeprav lahko z pametno rabo CSS stvar naredimo povsem dostopno in uporabno. V prvem primeru lahko vidite osnovno rešitev, v drugem pa nadgradnjo in implementacijo sprites grafike.
HTML, KI GA BOMO OBLIKOVALI:
<code><ul><br />
<li><a id="jagoda_ena" href="#">Jagoda 1</a></li><br />
<li><a id="jagoda_dva" href="#">Jagoda 2</a></li><br />
</ul></code>
Osnovna navigacija brez sprites tehnike
CSS:
ul {
margin:0;
padding:0;
list-style:none;
}
ul li {
margin:0;
padding:0;
float:left;
}
ul li a {
height:93px;
width:100px;
display:block;
text-indent:-1000px;
}
a#jagoda_ena {background:transparent url(slike/jagoda_1_c.gif) top left no-repeat;}
a#jagoda_ena:hover {background:transparent url(slike/jagoda_1_g.gif) top left no-repeat;}
a#jagoda_dva {background:transparent url(slike/jagoda_2_c.gif) top left no-repeat;}
a#jagoda_dva:hover {background:transparent url(slike/jagoda_2_g.gif) top left no-repeat;}
Zgornji primer je načeloma povsem dostopen in uporaben, vendar pa se takšna stran dlje nalaga.
Razlog za to leži v tem, da je vsaka slika pomeni svoj HTTP zahtevek. Konkretno: brskalnik pošlje zahtevek na strežnik, ta pa vrne nazaj sliko. In to se ponavlja, dokler se ne naložijo vse slike, ki jih kličemo preko CSS. To podaljšuje čas nalaganja spletne strani, kar jo naredi manj učinkovito.
Druga težava je ta, da so v našem primeru (glej demo) štiri posamezne slike težje (23KB) kot slika, v katero smo združili vse slike (15KB) kar še dodatno upočasni nalaganje strani. Razlike so v tem primeru seveda zanemarljive, vendar predstavljajte si obsežne strani, ki imajo na dan več tisoč obiskov. Ko seštejemo prenos podatkov in porabo pasovne širine se to ne pozna le na času prenosa temveč tudi na denarju, ki ga moramo nameniti porabi večje pasovne širine.
Navigacija narejena z uporabo sprites tehnike
Tega problema se lotimo z uporabo tehnike CSS sprites. Trik je v tem, da namesto slik za različna stanje linkov vse slike združimo v eno samo. Posameznim tagom pa z id selektorji določamo položaj slike.
CSS:
.ul {<br />
margin:0 0 20px 0;<br />
padding:0;<br />
list-style:none;<br />
}<br />
.ul li {<br />
margin:0;<br />
padding:0;<br />
float:left;<br />
}<br />
.ul li a {<br />
height:93px;<br />
width:100px;<br />
display:block;<br />
background:transparent url(slike/jagoda.gif) no-repeat;<br />
text-indent:-1000px;<br />
}<br />
a#sprites_ena {background-position: 0 -93px;}<br />
a#sprites_ena:hover {background-position: 0 0;}<br />
a#sprites_dva {background-position:-100px -93px;}<br />
a#sprites_dva:hover {background-position:-100px 0;}
