Podpora jazyků XHTML a CSS v moderních prohlížečích VI.

21.07.2008 - PaedDr. Petr Pexa Počet zobrazení: 1586  

V tomto dílu našeho seriálu, který je zaměřen na testování nových verzí prohlížečů (samozřejmě již testujeme i čerstvý Firefox 3) a volně navazuje na předchozí pátý díl, se budeme věnovat dalšímu známému problému - zobrazování barevných rámečků kolem blokových prvků webu (např. tabulek), kolem obrázků a zobrazování barevných vodorovných čar.

1. Barva u elementu < table >

Čáry v 1. tabulce (viz příklad č. 1) by měly být barevné, barva je nastavena XHTML atributem bordercolor . V Exploreru 7 a Firefoxu je barva zobrazena (všimněte si, že ale u obou prohlížečů jinak, Explorer zobrazí všechny čtyři strany stejnou barvou, ale Firefox dvojbarevně), ovšem Opera barvu čar, deklarovanou jazykem XHTML, nepodporuje vůbec (atribut bordercolor není tímto prohlížečem podporován). Ve Firefoxu je dále správně barva zobrazena jen u vnějšího rámečku tabulky, v Exploreru 7 i uvnitř tabulky kolem jednotlivých buněk.

< table border="10" bordercolor="red">

funkční ukázka - odkaz na soubor color1.htm

Aby byla barva rámečku zobrazena ve všech prohlížečích, je nutné použít CSS vlastnost border-color (viz 2. příklad). Všude je barevný jen vnější rámeček tabulky (kolem buněk barevně rámeček správně zobrazen není), v každém prohlížeči jsou ovšem použity jiné odstíny zvolené barvy pro horní/levý a dolní/pravý rámeček. Pozor, pokud ale nepoužijeme deklaraci DTD (řádek DOCTYPE v hlavičce webu, viz 3. a 4. díl tohoto seriálu), tabulka zobrazena barevně ve Firefoxu ani s touto CSS deklarací také není!

< table border="10" style="border-color:red">

funkční ukázka - odkaz na soubor color2.htm

Pokud správně použijeme i vlastnosti border-style a border-width (viz 3. příklad), má pak rámeček již všude barvu stejnou (ale proti předchozím variantám nestínovanou) a u všech prohlížečů dojde i k úplnému vypnutí vnitřních čar v tabulce (je nutné tedy nastavit tento styl i pro buňky v tabulce, viz 4. příklad). Pouze tyto dvě varianty se zobrazují ve všech prohlížečích stejně a tato deklarace platí i pro další blokové prvky webu (např. element ).

< table style="border-style:solid; border-width:10px; border-color:red">

funkční ukázka - odkaz na soubor color3.htm

 < table style="border-style:solid; border-width:10px; border-color:red">
 < td style="border-style:solid; border-width:1px; border-color:red">

funkční ukázka - odkaz na soubor color4.htm

Pokud má tabulka (či jiný objekt) čáry s deklarovanou šířkou 1px a typu dotted (tečkované), jsou ve starším Exploreru 6 zobrazeny čárkovaně (v Exploreru 7 je již tato chyba opravena), silnější čáry typu dotted jsou pak v Exploreru 7 tvořeny kosočtverci (v Opeře a Firefoxu čtverečky, viz příklad č. 5).

< table style="border-style:dotted; border-width:1px; border-color:red" >
< td style="border-style:dotted; border-width:5px; border-color:red">

funkční ukázka - odkaz na soubor color5.htm

 2.    Barva u elementu < img />

Pokud má jakýkoliv obrázek nastavený rámeček XHTML atributem border , je jeho barva v Exploreru vždy černá, ve Firefoxu a Opeře má ale stejnou barvu jako text na stránce. U levého obrázku v následujícím příkladu by tedy měl být správně rámeček i v Exploreru modrý (je ale černý). Barevné rámečky u obrázků tedy opět raději řešíme CSS vlastností border-color , pak se barva zobrazuje ve všech prohlížečích stejná (pravý obrázek).

< img src="jablko.png" border="1" />
< img src="jablko.png" style="border-style:solid; border-width:1px; border-color:red" />

funkční ukázka - odkaz na soubor color6.htm

3.    Barva u elementu < hr / >

Největší problémy s barvami nás čekají se zobrazením u vodorovných linek. Čára v následujícím příkladu by měla být barevná, jak jsme si ale již naznačili výše, Opera barvu čar v XHTML nepodporuje (není podporován kromě atributu bordercolor u tabulek ani nestandardní atribut color u čar, viz 7. příklad).

< hr size="1" color="red" width="50%" align="left" />

funkční ukázka - odkaz na soubor color7.htm

Problém se tedy pokusíme řešit jako v předchozích případech CSS vlastností border-color . Pokud je čára silnější, je v Exploreru a Firefoxu barevná celá, v Opeře je ale barevný jen její okraj, uvnitř je průhledná. Konce čáry jsou v Exploreru a Opeře rovné, ve Firefoxu oblé (viz  8. příklad).

< hr size="10" style="border-color:red" color="red" width="50%" align="left" />

funkční ukázka - odkaz na soubor color8.htm

Pokud navíc ještě použijeme XHTML atribut noshade , pak je čára v Opeře celá šedá a zmizí i barevný okraj (viz  9. příklad). Zatím jsme tedy shodné zobrazení ve všech třech prohlížečích nezajistili.

< hr size="10" noshade="noshade" style="border-color:red" color="red" width="50%" align="left" />

funkční ukázka - odkaz na soubor color9.htm

Pokud použijeme pro shodné zobrazení v Opeře kompletní CSS deklaraci i s vlastnostmi border-style a border-width (a vypustíme XHTML atribut size ), čára zase v Exploreru nemá požadovanou tloušťku! I ve Firefoxu je ale již konec čáry rovný, viz 10. příklad).

< hr style="border-style:solid; border-width:5px; border-color:red" width="50%" align="left" />

funkční ukázka - odkaz na soubor color10.htm

Pokusíme se tedy ponechat kompletní CSS deklaraci i XHTML atribut size s cílem mít konečně silnější čáru ve všech prohlížečích stejnou. V Exploreru a Firefoxu je zobrazení shodné, v Opeře se ale nastaví oba „tloušťkové" parametry současně, celá čára je silnější a má i vlastní silnější rámeček (viz 11. příklad).

< hr size="10" style="border-style:solid; border-width:5px; border-color:red" width="50%" align="left" />

funkční ukázka - odkaz na soubor color11.htm

Zkusíme tedy použít tloušťku s hodnotou 1px. Čára je konečně ve všech prohlížečích zobrazena naprosto shodně , ale je bohužel zobrazena s tloušťkou 2px (je totiž tvořena svým horním a dolním rámečkem, viz 12. ukázka).

< hr style="border-style:solid; border-width:1px; border-color:red" width="50%" align="left" / >

funkční ukázka - odkaz na soubor color12.htm

Závěr: čára se skutečnou zobrazenou tloušťkou 1px a shodně zobrazená ve všech prohlížečích být tedy barevná nemůže . Shodně lze mít zobrazenou pouze tenkou čáru šedou (viz poslední 13. ukázka) nebo barevnou čáru silnější (viz předchozí příklad).

< hr size="1" noshade="noshade" width="50%" align="left" />

funkční ukázka - odkaz na soubor color13.htm

V příštím dílu seriálu se budeme věnovat problematickému zobrazení mezer pod obrázkem v závislosti na použitém DTD (Transitional nebo Strict) a možným řešením tohoto problému, který se často projevuje např. mezerami mezi grafickými tlačítky v menu nebo mezerou pod horním bannerem webu.