Výhody webového dizajnu založeného čisto na CSS

CSS sa v posledných rokoch presadilo ako silný nástroj pri tvorbe webového dizajnu. Mnohí však tento štandard z dielne W3C, nepochopili, pochopili nesprávne, alebo dokonca začali zneužívať k dosiahnutiu vytúženého cieľa na úkor kvality značkovacieho jazyka ako je HTML či XHTML.

Mnohí nadšenci pre CSS, si začali užívať jeho výhody, ako je ovládanie dizajnu celého webu z jediného externého súboru, nepochopili však skutočný zámer tvorcov, tohoto mocného nástroja.

Doba pred CSS

V polovici deväťdesiatych rokov, keď web nabral komerčný rozmer a začali sa tvoriť graficky pútavé komerčné weby s cieľom zisku, začal sa nekontrolovane rozširovať počet a použitie HTML značiek, s cieľom dosiahnuť pútavé grafické efekty a dizajn. To boli počiatky webdizajnu ako takého.

Neskôr nastúpili na scénu Java Script a Flash ako ďalšie obľúbené technológie. V tejto dobe zúrila tzv. "vojna prehliadačov", z ktorých každý vytváral a implementoval tie "svoje" značky, ktoré boli vzájomne nekompatibilné a tak tvorcovia webov boli nútení vytvárať viacero verzií webov a obrovské súbory s množstvom formátovacích značiek HTML (ako boli: b, i, u, font a podobne) a layoutom tvoreným pomocou tabuliek vnorených do seba aj v niekoľkých úrovniach. Sémantická hodnota jednotlivých značiek prestala byť zohľadňovaná a začali byť zneužívané iba na prezentačné účely (napr.: veľké tučné písmo pri nadpisoch).

Prezentačné značky dokázali aj strojnásobiť veľkosť HTML súboru. Takéto opachy sa dlho načítavali a niekedy sa ani nezobrazili v niektorých najmä starších prehliadačoch a o prístupnosti pre znevýhodnených používateľov ani nehovoriac. Dizajnéri museli tvoriť zvlášť verziu pre tlač, pre PDA či textovú pre vyhľadávače.

Takéto webiská boli nákladné a neefektívne ich údržba sa stala nočnou morou pre mnohých webmasterov zamestnaných pre tento účel na plný úväzok. Recode či úprava dizajnu trvala aj dni či týždne. Preťažené servery, vyradení používatelia iného či staršieho prehliadača či iného operačného systému, alebo pomalšieho pripojenia do internetu boli každodennou (dnes už nemyslitelnou) realitou.

Vznik a cieľ CSS

V tej dobe si ľudia vo W3C, povedali, že s touto katastrofálnou situáciou treba čosi robiť a tak uzreli svetlo sveta kaskádové štýly - CSS.
Prvá verzia CSS bola zverejnená v decembri 1996 a revidovaná v januári 1999. Druhá verzia, ktorá podstatne rozšírila a doplnila vlastnosti prvej, bola prvýkrát publikovaná v máji 1998. Doplňujúca verzia 2.1 ešte viac rozširuje a doplňuje možnosti CSS a zároveň opravuje chyby vo verzii 2. V štádiu príprav a testovania je verzia 3, ktorá je však ešte len hudbou budúcnosti, hoci sú už pokusy v niektorých prehliadačoch o jej čiatočnú implementáciu.

Zámerom autorov tejto normy bolo, je a bude oddelenie základnej štruktúry obsahu webového (X)HTML dokumentu od jeho prezentácie v konkrétnom používateľskom agentovi - prehliadači, čítačke, tlačiarni a podobne. O jeho výhodách v tomto kontexte viac popíšem nižšie.

Nepochopené a zneužité CSS

Ako CSS začalo naberať na popularite, mnohí weboví dizajnéri začali využívať jeho výhody ako je napríklad ovládanie dizajnu celého webu z jediného externého súboru - tzv. štýlového predpisu (stylesheetu) a zamenili vyznačovanie štruktúry dokumentu pomocoou klasických štrurálnych značiek (ako sú: h1-h6, address, p, ul, ol, li, dl, dt, dd a iných...) za nesémantickú značku div či span, ktorú naštýlovali podľa potreby pomocou CSS odvolávajúc sa na premnné atribúty class či id napr.: <div class="nadpis1">Jurkova stránka</div>. Takéto weby stratili sémantickú čiže informačnú hodnotu a stali sa neprehľadnými a takmer či ťažko použitelnými pre robotov vyhľadávačov či asistívne technológie pre znevýhodnených používateľov, textové prehliadače a podobne. A čo najviac stojí na zamyslenie je smutná skutočnosť, že autori takýchto webov si myslia, že ich webové sídla sú prístupné a optimalizované pre vyhľadávače a čudujú sa, keď sa neumiestnia na popredných pozíciách vo vyhľadávačoch.
O správnom písaní kódu stránok sa dočítate v ďalších článkoch tohoto blogu.

Nekompatibilita podpory CSS v prehliadačoch = nočná mora pre kóderov

Najväčším problémom webového dizajnu je dodnes nekompatiblita implementacie - podpory CSS v jednotlivých prehliadačoch, čo má za následok odlišné zobrazovanie identickej stránky v rôznych prehliadačoch. Tento nepríjemný fenomén sa stal nočnou morou pre webových kóderov či dizajnérov. Je to pozostatok "vojny prehliadačov" z deväťdesiatych rokov minulého storočia. Je spôsobený nekompatibilitou jadier prehliadačov. Kým väčšina prehliadačov používa jadro Gecko, napr.: Mozilla, Opera, Konqueror a iné, prehliadač Internet Explorer od firmy Microsoft (ďalej len MSIE alebo IE), má svoje vlastné jadro, ktoré sa od jadra Gecko podstatne líši. Typický príklad je tzv.: "obdĺžnikový model", kedy dochádza k odlišnému sčítavaniu paddingu (vnútorného odsadenia) a borderu (rámčeku objektu) - (Viac o tomto bugu a jeho riešení popíšem v inom článku.)

Reakciou na túto nepriaznivú situáciu bolo, že mnohí začali tvoriť stránky len pre jeden prehliadač, resp. jeho najrozšírenejšiu verziu (typicky: "MSIE 6 pre Windows"), alebo siahli po propietárnych riešeniach - záplatách (typicky: "tabuľkový layout"). Našli sa aj takí, ktorí prišli na to, ako túto nekompatibilitu obísť (napr.: dosť známy Tantekov "Box model hack").
Vývoj však napreduje a prehliadač "MSIE 7 pre Windows" opravuje mnohé chyby svojho predchodcu "MSIE 6 pre Windows". Takže svitá na lepšie časy a vyzerá to tak, že raz sa webové kódenie stane naozaj hračkou a to aj vďaka webovým štandardom z dielne W3C a projektu: Web Standards Project.

Výhody správneho používania CSS na tvorbu a ovládanie dizajnu webov

Výhod je veľmi veľa, dovoľte mi spomenúť aspoň tie najzásadnejšie. Prísnym oddelením vrstvy štruktúry obsahu webového dokumentu od vrstvy prezentácie pomocou technológie CSS docielite:

• zefektívnenie a zjednodušenie ovládania dizajnu webu

  to, čo kedysi trvalo hodiny, dni, či týždne , je dnes otázkou niekoľkých minút maximálne hodín) - čas sú peniaze ;-)

• flexibilta a variabilita

  na jeden a ten istý štruktúrovaný webový (X)HTML dokument sa dá aplikovať viacero alternatívnych dizajnových variácii tzv.: skinov, alebo módov)

• jeden dokument slúži všetkým

  jeden a ten istý identický dokument, s identickou url adresou sa dá pripraviť pre rôzne výstupy pomocou typov médií: výstup pre obrazovku, tlačiareň, PDA, hlasový syntetizér, a podobne.)

• nezávislosť na dizajne (autorovom návrhu)

  ľudia ktorí majú pomalé pripojenie do internetu, či ich grafika rozptyľuje, alebo autorov návrh nevyhovuje ich špecifickým potrebám), si môžu štýly vypnúť, alebo aplikovať vlastné štýly vyhovujúce ich špecifickým potrebám (typicky: slabozrakí ľudia si môžu vytvoriť vlastný štýlový predpis s väčším písmom či kontrastnejšími farbami - túto vlastnosť využívam aj ja nakoľko sám trpím slabozrakosťou)

• zvýšenie prístupnosti a použitelnosti webu a tým aj následné zlepšenie pozície vo výsledkoch vyhľadávania (Robme weby pre ľudí nie pre vyhľadávače!)
• zníženie zaťaženia serverov a zníženie nákladov na webhosting
• a mnoho ďalších

Benefitmi, úskaliami, ako aj konkrétnymi riešeniami problémov webového dizajnu pomocou (X)HTML a CSS sa budem podrobnejšie zaoberať v budúcich článkoch na tomto blogu.