Kedže som doma a mám chvíľu čas, využijem ho a oprášim načaté články, ktoré som kedysi začal písať. Nebude ich veľa, nebudú sa pýšiť odborným podaním, sú to iba také moje malé poznámky z mojich skúseností pasívnej tvorby webu.
Čo robiť, keď sa nám layout nezobrazuje tak, ako by sme chceli a my v ňom žiadnu chybu nevidíme? Čo robiť, keď si už nevieme rady?
Je to na zamyslenie. Ale predsa, skúsme si vytvoriť nejaký obraz niekoho, kto s kaskádovými štýlmi pracuje a chybuje, pretože o tom je tento članok. O chybovosti a o omyloch. Nuž teda, ako dlho s nimi pracuje? Podnietili ho štandardy k tomu, aby sa začal venovať webdesignu alebo už nejaké skúsenosti má? Aj to sú otázky, ktoré mi vŕtajú hlavou.
Priznávam, najčastejšie sa s nekorektnými postupmi stretávam u mladých webdesignerov, ale nájdu sa aj väčšie firmy, nad ktorých prácou krútim hlavou. Prečo je to tak? Ako je možné, že mladý človek svoju prácu nezvládne a skúsená firma odflákne? Je medzi tým rozdiel? Ale aby som nepredbiehal, posuňme sa ďalej.
V prípade, keď si už s problémovým layoutom nevieme rady, môžeme podozrivým elementom privlastniť farbu pozadia. Tak môžeme zistiť, že niektorý blok stránky sa zobrazí nekorektne, prípadne sa nezobrazí vôbec. Na túto jednoduchú možnosť veľa kóderov zabúda. Keď som s kaskádovými štýlmi začínal a zlyhala aj táto technika, kód som vyňal do nového súboru a ladil som iba problémové miesto.
div.box {
margin-left: 25px;
margin-top: 15px;
padding-bottom: 6px;
margin-right: 12px;
background-color: white;
float: left;
font-family: Arial;
font-size: 0.8em;
margin-right: 25px;}
Aj niektorí „skúsení“ kóderi si svoju prácu dokážu nabaliť problémami, ktorým by jeden neveril.
Dávajte si takisto pozor, aby ste farbu pozadia nemali definovanú v html, aj v css. Podobné problémy trápia začínajúcich webdesignerov dosť často.
Slovíčko hack sa s veľkým boomom objavilo medzi webdesignérmi niekedy v roku 2004. Ten, kto mal vo svojom cssku nejaký ten hack pre daný prehliadač, bol považovaný za menšieho guru, lebo sa vyznal a rozumel tomu. Hackovať bolo pomerne moderné.
Preto, aby prehliadač pochopil kaskádové štýli, musí ich mať v sebe zaimplementované. každy prehliadač implementuje css trochu inak. Niektorý lepšie (Firefox, Opera), iný zase horšie (Internet explorer 6 a nižší). Pokiaľ webdesignér testuje svoj layout v rôznych prehliadačoch, je veľmi pravdepodobné, že sa výsledky budú odlišovať. Pokiaľ chce tento rozdiel zmenšiť, použije hack, resp. podstrčí potrebnú hodnotu iba danému prehliadačú, pričom ostatné túto hodnotu zaignorujú. Najčastejšie sa hackuje Internet Explorer a pre jednotlivé verzie existujú jednotlivé hacky, ale tie teraz nejdem rozoberať. Všeobecne známi je napríklad podtržník:
div.test {
width: 100px;
_width: 110px;}
V krátkosti objasním, že Firefox s Operou zobrazia div s rozmerom 100px, pričom Internet Explorer si ponechá hodnotu 110px. Hacky nie sú štandardné a validátor ich väčšinou považuje za chybu v kóde.
Je to však nutné? Hack je vo väčšine prípadov problémom ľudí, nie prehliadača. Zbytočný hack vzniká v takom prípade, kedy sa webdesigner snaží dať dokopy nelogické časti stránky. Ak vytvára nekorektným spôsobom napríklad hlavičku stránky, je možné, že ostatné časti layoutu na túto pasáž budú reagovať nepredvídatelne a nezachovajú sa tak, ako to webdesigner očakáva. V tvorcovi to následne vyvolá zmätok a namiesto toho, aby sa zamyslel nad akousi „kompatiblitiou“ jednotlivých celkov, vrhne sa do hackovania konkrétneho problému. To je veľmi zlé riešenie. Pamätajte na to, že napríklad position: absolute a float, či clear k sebe nepasujú.
Existuje validné riešenie, ktorým dokážeme prehliadače oblbnúť, ale ja ho neuznávam. Našťastie si vystačím aj bez neho. Môže vypadať takto:
<!--[if lte IE 6] />
<link href="ie.css" type="text/css" rel="stylesheet" />
<![endif]-- />
Táto definícia platí iba pre internet explorer 6, ostatné prehliadače ju preskočia a načítajú defaultné css. Takto môžme zamädzíť odlišné zobrazovanie stránky. Kedy ale prístúpiť k tomuto menšiemu zlu?
Máme málo času, tlačí nás termín alebo jednoducho nepoznáme iné riešenie?
Na internete som narazil na stránku jedného elitného webdesignéra. Tvorca použil css pre Internet Explorer a css pre zvyšok. Svoj problém mohol riešit efektívnejšie, no on si zvolil to menšie zlo. Navrhol layout, ktorý pozicoval v ľavej časti stránky, približne 300px od vrchu. Väčšine elementov priradil position: absolute; a následne musel každý prvok pozicovať v správnej výške, aby výsledok pôsobil celistvo. Hodnoty Internet Exploreru a hodnoty ostatných browserov sa samozrejme líšili. Preto sa tu naskytá otázka. Aký to má zmysel? Myslím, že tvorca celkom zabudol na vlastnosti float, clear: left;. Prácu by si tak niekoľkonásobne uľahčil.
Ľudia si vytvárajú problémy sami. V tomto prípade tu hrá rolu nevedomosť.
Viktor Čech 2002 - 2007, hlavná stránka, nahor