CSS hrou CSS3, experimenty, svet v kaskádových štýloch

Ladíme stránky pre Internet Explorer 6

Komentáre sú uzatvorené.

Začnem asi skrátka. Jedna z najdôležitejších CSS vlastností, ktorá Vám skráti čas ladenia stránky pre Internet Explorer 6 je float: left. Nebojte sa napríklad floatovat každý blok stránky, ktorý susedí s iným blokom. S prípadnou kombináciou clear: both sa takáto kostra stránky nerozsype. Vyhnite sa však floatovaniu textových elementov, h1-h6, tagu P. Nadpisy by sa spolu s textom, prípadne obrázkami nalepili na seba. Opravovať by ste museli použitim clear: both a nastavením pevnej šírky, preto floatujte text len výnimočne, resp. konkrétne.

V prípade, že sa Vám layout webu nezobrazuje v IE6 správne, použite nasledovné techniky:

- Pridajte podozrivej časti kontrastnú farbu pozadia, prípadne border. Takto môžete odhaliť nekorektné zobrazovanie, väčšiu šírku, prípadne žiadne zobrazovanie elementu.

- Pridajte všetkým elementom jeden pixel široký border nastavením * {border: 1px solid red;} . Pretože chybné zobrazenie časti stránky v IE6 nemusí byť spôsobené chybou konkrétne v danom mieste, ale túto chybu môže mať na svedomí iný kus stránky, ktorý sa normálne javý ako správny, no jeho konštrukcia nie je správna.

Úvaha o používaní štýlov pre Internet Explorer

V minulosti platilo, ale plati to aj dnes, že pre ladenie stránky pre Internet Explorer 6 sa používa externé CSS s nastaveniami pre tento prehliadač. Táto technika nie je až tak celkom správna, resp. je v mnohých pípadoch zbytočná.

1. Odlišná šírka boxov v IE6

Majme box, široký 250px, s paddingom. Ak sa v IE6 zobrazuje menší, nemusíme daný box obalovať iným divom, nemusíme používať ani hacky, či vytvárať css pre IE6. Použijeme veľmi jednoduchú fintu. Ako vieme, IE6 nepodporuje vlastnosť min/max, čiže kombinácia vlastností width a max-width bude postačovať. Pre moderné prehliadače zmeníme vlastnosť WIDTH na MAX-WIDTH s ponechanou hodnotou a pre IE6 nastavíme WIDTH o čosi väčší, zvyčajne stačí prirátať použité paddingy. V podstate sa jedna o známu box model chybu, ktorá sa v minulosti riešila rôznymi hackmi, pridaním divu a pod.

2. Lepšie pozicovanie elementov

Toto platí hlavne pri umiestňovaní konkretných blokov stránky, napríklad prihlasovanie v hlavičke, navigácia v hlavičke, atď. Ak chceme v hlavičke umiestniť napríklad menšiu navigáciu do pravej časti stránky, logicky použijeme vlastnosť float: right a zarovnáme s marginom, no ak máme v hlavičke aj ďaľšie elementy, rôzne divy, atď, toto riešenie sa nemusí zdať celkom správne.

Umiestnenie navigácie do právej časti stránky s použitím float: right. Na prvý pohľad sa zdá, že riešenie je správne, no takto to vidí IE.

Menu nám uplne odskočí niekde k spodnej časti stránky. Nastavíme teda float: left a použijeme aj relatívne pozicovanie.

Riešenie:

Elementy na stránke je možné umiestnovať rôznymi spôsobmi. Experimentujte, vyberte si taký, ktorý bude fungovať aj v IE6 – odpadá použitie CSS pre tento prehliadač.

3. Peekaboo bug

Známa ‘chyba’, ktorá vlastne nie je chybou prehliadača, ale vzniká použitím zlej konštrukcie. Viac o peekaboo si môžte prečítať na stránke dera. Sami si vyskúšajte opravu v podani autora.

Dnes je to ale jednoduchšie. Skúste hlavnému divu pridať vlastnosť float: left; a texty samozrejme vložiť do tagov, ktoré sú pre ne určené. Jednoduche? Dôležitú váhu tejto vlastnosti som spomínal vyššie. Ked sa nad tým zamyslím, tak v tomto prípáde, a mne sa to stáva pri rôzných iných chybách, len IE6 upozorní na to, že použitá konštrukcia je zlá. Nejedná sa o chybu.

Konkretné priklady:

Jednoduchá vec, pomocou marginu posunieme ľavú časť stránky o pár pixelov naľavo.

IE6 – Problém nastal vdaka použitiu paddingu, resp. IE6 zle spočítal padding a šírku UL zoznamu. Ak vieme takúto situáciu predvídať, automaticky zvolíme inú konštrukciu.

Pokračujeme v opravovaní

Môžme si tiež všimnuť, že UL zoznam, pomocou ktorého je robené menu, sa šírkou nezhoduje s ostatnými prehliadačmi, nasledovný kód:

zmeníme na:

Tak, ako som písal vyššie, výstižne využijeme slabinu IE6 a použijeme ju proti nemu – neznalosť min/max vlastností.

Ostal nám ešte stred, ktorý je zle pozicovaný, ale týmto by som sa tu už nechcel zaoberať, oprava je jednoduchá. Každopádne, týmito pár príkladmi som Vám chcel ukázať alebo Vás aj trošku naviesť k myšlienke, že nie každá maličkosť sa musí riešiť použitím CSS pre Internet Explorer 6. Takýmito fintami sa dá aj zložitá stranka napísať do jedného, pekného a prehľadného CSSka. Kedže som v minulosti vyriešil aj zapeklitejšie problémy s IE6, napíšem ešte pokračovanie tohto článku, s konkretými príkladmi, prípadne sa zatiaľ môžte pýtať v komentároch.

Pár rád na záver:

• Zamyslite sa, na akej úrovni rozumiete kaskádovým štýlom. Dokážete využiť všetky ich vlastnosti?
• Vždy si dobre dopredu rozmyslite postup, akým chcete layout vytvárať.
• Ak Vám jeden postup nefunguje, existuje určite daľší. Použite ho.
• Postupujte krok za krokom. Nepreskakujte z jedného kusu stránky na druhý, a to ani v prípade, že narazíte na problém. Pekne poporiadku.
• Vytvárajte pre Firefox a Operu. dolaďujte pre Internet Explorer.

Tags: box model, internet explorer 6, max-width, peekaboo bug