Spletna stran za vse spletne pregledovalnike 1. del

Že v prejšnjih zapisih sem omenjala, da spletni pregledovalniki ne prikažejo CSS kodo na enak način. Spletni oblikovalci pa zaradi malenkosti po nepotrebnem izgubljajo čas. Kako torej zagotoviti, da bodo spletne strani prikazane v večini spletnih pregledovalnikov čim bolj podobno?

Za začetek je pametno ponastaviti CSS kodo za vse oznake, saj ima vsak izmed pregledovalnikov predefinirane nastavitve za prikaz HTML oznak. Tako imenovan CSS Reset odstrani nepotrebno oblikovanje in nam omogoči, da res začnemo iz nič.

Dva primera CSS kode:
- Eric Mayer
- Yahoo! User Interface Library

Zatem običajno pride na vrsto postavljanje oz. razporejanje elementov na spletno stran. Če si ogledate nekaj naključnih spletnih strani boste ugotovili, da se skoraj vse držijo nekih matematičnih razmerij oz. so oblikovane po sistemu mreže.

Sistem mreže omogoča večjo preglednost (tako spletnih strani kot tiskanih publikacij), obiskovalcem pa olajšamo dostop do informacij saj lahko z ustrezno razporeditvijo in poudarkom elementov na spletni strani njihove oči vodimo od bolj k manj pomembnim vsebinam.

Za uvod v sisteme mrež na spletnih straneh si preberite:

- Why use a Grid?
- Grid Based Design
- Columns and Grids
- prezentacijo Grids are Good (pdf. 8.3MB) spletnega oblikovalca Khoi Vinha.

Kako torej zagotoviti, da se bo naša mreža pravilno prikazala v različnih spletnih pregledovalnikih pri različnih resolucijah. Na pomoč nam bodo priskočili t.i. CSS frameworki.

Kaj je CSS framework?

CSS framework je skupek CSS datotek, ki vsebujejo osnovno oblikovanje html oznak, katere lahko prilagodite svojim potrebam. Pogosto je CSS framework sestavljen iz več datotek, ki omogočajo:
- ponastavitev CSS-ja (reset),
- določanje tipografije,
- določanje mrežnega sistema oz. razporeditve elementov,
- oblikovanje obrazcev,
- določanje splošnih pravil.

Z uporabo frameworka se izognemo ponavljajočemu kodiranju, pospešimo obilkovanje spletne strani ter se izognemo morebitnim težavam pri prikazu CSS oblikovanja v različnih spletnih pregledovalnikih.

V nadaljevanju serije Spletna stran za vse spletne pregledovalnike bomo preizkusili CSS frameworke Yahoo! User Interface, YAML in Blueprint.