Testovací stránka - HTML a CSS

Testování problematických (X)HTML a CSS prvků na webových stránkách (komplet)

: zaměřeno na podporu v IE6, IE7, Firefox 2 a Opera 9

Poznámka: úvodem se nemohu nezmínit o mírném zklamání z IE7. Přestože byly avizovány velké změny především v podpoře CSS2, jak se sami můžete dále přesvědčit, podpora většiny kritických prvků je téměř stejná jako v IE6. Jediné, co začalo fungovat, jsou PNG obrázky s alfa průhledností, vlastnost overflow a konečně i vlastnost position:fixed, ta ale pouze v případě, že je uvedena v hlavičce stránky DTD deklarace!
Zatím zde najdete celkem 58 testů, které jsou tematicky rozděleny do dalších samostatných testovacích souborů. Pro méně zkušené webmastery jsou všechny CSS příklady v jednodušších in-line stylech.

Stránka má nastavený přechodový efekt (funguje jen v IE, následující řádky musí být v <head> </head>).

<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=12)" /> <meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=12)" /> <meta http-equiv="Site-Enter" content="revealTrans(Duration=3.0,Transition=12)" /> <meta http-equiv="Site-Exit" content="revealTrans(Duration=3.0,Transition=12)" />
Stránka má nastavené fixované pozadí CSS vlastností background-attachment:fixed (OK i ve Firefoxu, kde nefunguje HTML varianta <body bgproperties="fixed">). Pozadí je navíc ve Firefoxu zobrazeno i v elementech <object> se soubory txt, html a s průhlednými gif a png, v Opeře jen s gif a png obrázky, u txt a html je pozadí bílé, stejně jako v IE, kde se pozadí v elementech <object> nezobrazuje nikde (viz tento testovací soubor.

<body style="background-image:url(pozadi.gif); background-attachment:fixed">
Stránka má nastavené okraje CSS vlastností margin. HTML atributy "leftmargin" a "topmargin" totiž fungují jen v IE a Opeře, "marginwidth" a "marginheight" jen ve Firefoxu a protože se zobrazují zrcadlově stejné, nelze nastavit jiný levý a pravý, resp. jiný dolní a horní okraj.

Problematická HTML varianta:
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0">

Ideální CSS varianta:
<body style="margin:0px 20px 10px 10px">, hodnoty jsou v pořadí horní, pravý, dolní a levý okraj.
Stránka má tzv. alternativní styly. V IE6 ani IE7 nefungují, v Opeře a Firefoxu je jejich seznam v menu Zobrazit/Styl. Následující řádky musí být v <head> </head>.

<link rel="stylesheet" type="text/css" href="pozadi.css" /> <link rel="stylesheet" type="text/css" href="pozadi.css" title="Grafické pozadí" /> <link rel="alternate stylesheet" type="text/css" href="bezpozadi.css" title="Bílé pozadí" /> <link rel="alternate stylesheet" type="text/css" href="bezpozadi2.css" title="Žluté pozadí" />
Celá stránka má CSS vlastností cursor nastavený vlastní kurzor jako ukazovátko myši (měl by být zobrazen symbol psacího pera). Lze použít předefinované kurzory, nebo vlastní obrázky ve formátu cur. Obrázky fungují ale jen v IE, v ostatních prohlížečích jen kurzory předdefinované (v tomto odstavci bude zobrazen kurzor help). V tomtéž prvku také nesmíme definovat kurzory oba současně (i když to CSS syntaxe povoluje), v IE a Opeře se zobrazí prioritní předdefinovaný kurzor help, ale ve Firefoxu jen defaultní systémová šipka!

<body style="cursor: url(image.cur)">
<div style="cursor: help)">
V adresním řádku by měla být zobrazena favicon ikona (obrázek favicon.ico, 16x16px, max. 256 barev, exportovaný do formátu ico), Opera, Firefox a IE7 OK, v IE6 funguje pouze tehdy, když je stránka v Oblíbených položkách. Následující řádek musí být v <head> </head>.

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Měly by být barevně zobrazeny rolovací pásy (ve Firefoxu nefunguje, v IE OK, v Opeře ale jen bez DOCTYPE deklarace!):

Jednodušší varianta:

<html style="scrollbar-base-color:blue"> <body style="scrollbar-base-color:blue">

Varianta s detailním nastavením jednotlivých prvků rolovacích pásů:

<html style="scrollbar-face-color: #004080; scrollbar-highlight-color: #004080; scrollbar-shadow-color: #004080; scrollbar-3dlight-color: #ffff3f; scrollbar-arrow-color: #ffff3f; scrollbar-track-color: #007fbf; scrollbar-darkshadow-color: #000000"> <body style="scrollbar-face-color: #004080; scrollbar-highlight-color: #004080; scrollbar-shadow-color: #004080; scrollbar-3dlight-color: #ffff3f; scrollbar-arrow-color: #ffff3f; scrollbar-track-color: #007fbf; scrollbar-darkshadow-color: #000000">

Element <bdo> </bdo>, zrcadlově otočený text (otočený text), již všude OK.

<bdo dir="rtl">otočený text</bdo>

CSS vlastnost unicode-bidi, zrcadlově otočený text (otočený text), pro text všude OK, v IE a Firefoxu funguje např. i u vlastnosti overflow (příklad níže).

<span style="unicode-bidi:bidi-override; direction:rtl">otočený text</span>

CSS vlastnost writing-mode pro vertikální zápis textu: funguje jen v IE.

<span style="writing-mode: tb-rl">text vertikálně</span>
<span style="writing-mode: tb-rl; filter: flipv() fliph()">text vertikálně</span>

text zobrazený vertikálně shora dolů text zobrazený vertikálně zdola nahoru

Element <blink> </blink> (blikání). Nefunguje v IE, Firefox OK, u Opery ale text nebliká, pokud je použité jakékoliv formátování (tučné písmo, kurzíva, podtržení apod.) Pro tento efekt lze použít i CSS deklaraci text-decoration: blink.

<div style="text-decoration: blink">Tento text by tedy měl také blikat</div>.

Tento text by tedy měl ve Firefoxu a Opeře také blikat, neproporcionální písmo v Opeře nikoliv.

Element <marquee> </marquee> (rolující text)

Funguje již všude celkem dobře, pouze Firefox nepodporuje atributy width a height pro nastavení velikosti prostoru, ve kterém text roluje a je tedy nutné použít i CSS deklaraci.

<marquee width="400" style="width:400px" bgcolor="lightblue"> </marquee>

Element <Q> </Q> - uvozovky, nefunguje v IE6 ani IE7 , v Opeře jsou zobrazeny americké (programátorské) rovné uvozovky a správně oboje nahoře, ve Firefoxu jsou ale někdy zobrazeny uvozovky české (typografické) oblé a tím pádem nesprávně také oboje nahoře (zahajovací uvozovky oblé by měly být dole).

Pseudotřída :hover je určena pro změnu vzhledu prvku najetím myši na prvek. Byla původně navržena (a používá se především) na změnu barvy či aktivaci podtržení u odkazů s vypnutým podtržením. Pro odkazy funguje dobře ve všech aktuálních prohlížečích.

a {text-decoration: none} a:hover {text-decoration: underline; color:red}

Odkaz bez podtržení s měnící se barvou a podtržením

V CSS2 je tato pseudotřída ovšem povolena i pro jiné elementy než <a> (např. <td>, <span>, apod.), ve Firefoxu, Opeře a IE7 je podporována dobře, v IE6 nikoliv.

td:hover {background-color: red} span:hover {color: red}

aaaaa bbbbb

aaaaa bbbbb

Text měnící barvu najetím myši

Barva u elementu <hr /> - první čára by měla být barevná, Opera barvu čar ale v HTML vůbec nepodporuje (nefungují atributy "color", resp. tabulkový "bordercolor", viz 1. ukázka a následující testování barev v tabulkách), nutno řešit CSS vlastností border-color (2. ukázka).
Pokud je čára <hr /> silnější, je v IE a Firefoxu barevná celá, v Opeře je barevný jen její okraj, uvnitř je průhledná (pokud ovšem použijeme HTML atribut "noshade", pak je čára v Opeře šedá). Konce čáry jsou v IE a Opeře rovné, ve Firefoxu oblé, viz 2. a 3. ukázka.
Pokud použijeme pro správné zobrazení v Opeře kompletní CSS deklaraci i s vlastnostmi border-style a border-width (a vypustíme atribut "size"), čára zase v IE nemá požadovanou tloušťku (a i ve Firefoxu je konec čáry rovný, viz 4. ukázka).
Pokud tedy ponecháme kompletní CSS deklaraci i HTML atribut "size" s cílem mít konečně silnější čáru ve všech prohlížečích stejnou, v IE a Firefoxu je zobrazení shodné, v Opeře se ale nastaví oba parametry, celá čára je silnější a má i vlastní silnější rámeček (viz 5. ukázka).
Shodně zobrazenou lze tedy mít ve všech prohlížečích barevnou čáru pouze s deklarovanou tloušťkou 1px, čára je ale zobrazena s tloušťkou 2px (je tvořena svým horním a dolním rámečkem, viz 6. ukázka). Čára se skutečnou zobrazenou tloušťkou 1px a shodně zobrazená ve všech prohlížečích být tedy barevná nemůže (viz poslední 7. ukázka).

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

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

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

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

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

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

7. <hr size="1" noshade="noshade" width="50%" align="left" />
Barva čar v tabulkách: v IE a Firefoxu OK (i když u obou prohlížečů jinak, IE zobrazí všechny 4 strany stejnou barvou, Firefox dvojbarevně, viz 1. tabulka), Opera barvu čar ale v XHTML nepodporuje vůbec (není podporován atribut "bordercolor"). Barvu rámečků je tedy nutné řešit CSS vlastností border-color (viz 2. tabulka). Ve Firefoxu je barva v první tabulce (XHTML deklarace) jen u vnějšího rámečku, v IE i uvnitř, u druhé tabulky (CSS deklarace) jsou všude barevné jen vnější rámečky. V každém prohlížeči jsou také použity jiné odstíny zvolené barvy pro horní/levý a dolní/pravý rámeček. Pokud ale nepoužijeme deklaraci DTD (DOCTYPE ..), druhá tabulka zobrazena barevně ve Firefoxu není!
Pokud použijeme i vlastnosti border-style a border-width (viz 3. tabulka), má pak rámeček všude stejnou barvu a u všech prohlížečů dojde k vypnutí vnitřních čar v tabulce (je nutné tedy nastavit styl i pro buňky v tabulce, viz tabulka čtvrtá, pouze tyto dvě varianty se tedy zobrazují ve všech prohlížečích stejně).
Pokud má tabulka (či jiný objekt) čáry s šířkou 1px a typu dotted (tečkované), jsou v IE6 zobrazeny čárkovaně (v IE7 již opraveno), silnější čáry typu dotted jsou v IE tvořeny kosočtverci (v Opeře a Firefoxu čtverečky, viz tabulka pátá).

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

aaaaa bbbbb

aaaaa bbbbb

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

aaaaa bbbbb

aaaaa bbbbb

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

aaaaa bbbbb

aaaaa bbbbb

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

aaaaa bbbbb

aaaaa bbbbb

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

aaaaa bbbbb

aaaaa bbbbb
Podpora CSS vlastností margin a padding: vlastnost margin (měla by nastavit vnější okraj bloku) funguje všude dobře pro <table>, ale nefunguje nikde pro element <td>, nelze ji tedy použít pro nastavení vzdálenosti mezi jednotlivými buňkami v tabulce. Zde je nutné zatím stále používat XHTML atribut "cellspacing" v elementu <table>. Jistou možnost nabízí ale nová CSS vlastnost border-spacing (viz dále), ale ta zase nefunguje v Internet Exploreru.
Vlastnost padding (vnitřní okraj bloku) funguje všude dobře pro <td>, nefunguje ale v IE pro element <table>, aby bylo možné nastavit vnitřní okraje tabulky. Ve Firefoxu a Opeře se vnitřní okraj tabulky zobrazí, ale nikoliv mezi jednotlivými buňkami.

<table style="margin:30px; padding:20px"> <td style="margin:50px; padding:20px">

a a

a a

Vlastnost margin ale můžeme u tabulek (bloků) s pevně danou šířkou použít např. na jejich umístění na střed stránky, což ale funguje bohužel jen ve Firefoxu, Opeře a IE7 (nefunguje v IE6, nepodporuje totiž hodnotu auto):

<table style="margin: 0px auto; width: 200px">

aaaaa bbbbb

aaaaa bbbbb

Pokud tedy chceme mít tabulku umístěnou na střed ve všech prohlížečích, je nutné použít následující deklaraci (<div> a jeho vlastnost text-align umístí tabulku na střed v IE6, text-align v <table> zarovná na střed obsah všech buněk):

<div style="text-align: center"> <table style="margin: 0px auto; width: 200px; text-align: center"> … obsah tabulky … </table> </div>

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border-spacing: nefunguje v IE (ani v IE7!), mezeru mezi buňkami tedy musíme stále řešit i HTML atributem "cellspacing" (viz druhá tabulka).

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

aaaaa bbbbb

aaaaa bbbbb

<table cellspacing="10" style="border-style:solid; border-width:1px; border-color:black; border-spacing:10px">

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border-collapse: již všude OK (zlobilo v Opeře 7), vlastnost spojí rámečky sousedních buněk.

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

aaaaa bbbbb

aaaaa bbbbb

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

aaaaa bbbbb

aaaaa bbbbb

Podpora CSS vlastnosti border:hidden pro vypnutí konkrétního okraje buněk: tabulka musí mít deklarovaný border-collapse, nefunguje přesto nikde (mezi buňkami v 1. řádku by neměla být dělící čára).

<table style="border-collapse: collapse; border-style:solid; border-width:1px; border-color:black"> <td style="border-left: hidden; border-style:solid; border-width:1px; border-color:black"> <td style="border-right: hidden; border-style:solid; border-width:1px; border-color:black">

aaaaa bbbbb

aaaaa bbbbb

"colspan"

"rowspan"

"target"

<table style="border-collapse: collapse; border-style:solid; border-width:1px; border-color:black"> <tr> <th colspan="2" style="border-style:solid; border-width:1px; border-color:black"> <th> </tr> <tr> <td style="border-style:solid; border-width:1px; border-color:black"> <td> <td style="border-style:solid; border-width:1px; border-color:black"> <td> </tr> </table>

aaaaa
aaaaa	bbbbb

Podpora CSS vlastnosti empty-cells: nefunguje v IE (ani v IE7!), vlastnost zobrazí rámeček i u prázdných buněk.

<table style="border-style:solid; border-width:1px; border-color:black"> <td style="empty-cells:show; border-style:solid; border-width:1px; border-color:black">

bbbbb

aaaaa

Podpora CSS vlastnosti text-align pro zarovnání čísla v buňce na desetinné znaménko: nefunguje nikde.

td { text-align: "," }

11,22 bbbbb

111,222 aaaaa

Podpora CSS vlastnosti table-layout (rychlejší zobrazení tabulek díky určení počtu sloupců v 1. řádku tabulky). Tato vlastnost by měla řešit známou nevýhodu tabulkového layoutu webu, kdy se vzhledem k nutnosti načtení celého kódu web zobrazí (na rozdíl od CSS-div layoutu) později, protože o počtu sloupců webu může teoreticky rozhodnout až počet buněk v posledním řádku tabulky (v návrhu atributů elementu <table> byl proto i atribut cols="pocet_sloupcu", ale žádný prohlížeč ho nepodporuje).
Hodnota fixed vlastnosti table-layout respektuje zadané rozměry buněk prvního řádku tabulky a z těchto buněk se vypočítají šířky sloupců. Na rozměry buněk dalších řádků (a především na jejich obsah) se nebere ohled. Díky tomu může prohlížeč tabulku vykreslovat rychleji a nemusí čekat na natažení celé tabulky. Aby table-layout dobře fungoval, je potřeba zadat tabulce pevnou šířku. Tuto skvělou vlastnost již dobře podporují všechny prohlížeče (nefungovala ve starších verzích Opery), kupodivu i IE6!

<table style="table-layout:fixed; width:300px; border-collapse:collapse; border-style:solid; border-width:1px; border-color:black"> <tr> <td style="width:100px; border-style:solid; border-width:1px; border-color:black"> <td> <td style="width:200px; border-style:solid; border-width:1px; border-color:black"> <td> </tr> <tr> <td style="width:400px; border-style:solid; border-width:1px; border-color:black"> <td> <td style="width:400px; border-style:solid; border-width:1px; border-color:black"> <td> </tr> </table>

aaaaaa

bbbbb

ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj

Podpora CSS vlastnosti table layout (rychlejší zobrazení tabulek díky určení počtu sloupců v 1. řádku tabulky). Tato vlastnost by měla řešit známou nevýhodu tabulkového layoutu webu, kdy se vzhledem k nutnosti načtení celého kódu web zobrazí (na rozdíl od CSS-div layoutu) později, protože o počtu sloupců webu může teoreticky rozhodnout až počet buněk v posledním řádku tabulky.

Podpora CSS vlastnosti overflow:

Overflow: none (CSS1 varianta), text by měl přetékat rámeček a i přes následující objekty na stránce, ve Firefoxu 2 a konečně i v IE7 OK. V Opeře 9 ale tato vlastnost funguje jen s libovolnou deklarací DTD (bez ní nikoliv), IE6 a Opera 7 nadefinovaný box automaticky zvětší na výšku a text nepřetéká.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: none">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: visible (CSS2 varianta), podpora stejná jako u overflow: none.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: visible">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: hidden, text je oříznut podle velikost rámečku, všude OK.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: hidden">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: scroll, v rámečku jsou vždy zobrazeny rolovací pásy, všude OK. IE zobrazí rolovací pásy dokonce i barevně jako na celé stránce. Tento efekt funguje i v Opeře 9, ale pouze v případě, že není použita DTD deklarace.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: scroll">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto, v rámečku jsou zobrazeny rolovací pásy jen pokud jsou potřeba, všude OK.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto s rolovacím pásem vlevo, nefunguje v Opeře, ve Firefoxu ano, ale celý rámeček se přesune na pravou stranu obrazovky, v IE OK.

<div style="border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto; unicode-bidi:bidi-override; direction:rtl">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto, rolovací pás je vlevo (verze pro Firefox). Vlastností margin: 0px auto 0px 0px je upraveno zobrazení rámečku vlevo, nastavení okrajů margin: 0px auto by zobrazilo rámeček uprostřed obrazovky.

<div style="margin: 0px auto 0px 0px; border-style:solid; border-width:1px; width: 200px; height: 86px; overflow: auto; unicode-bidi:bidi-override; direction:rtl">

dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Podpora pseudoelementů p:first-line a p:first-letter.
Tento odstavec by měl mít zleva odsazení, modrý první řádek a měl by mít první písmeno 2x větší (správná iniciála to ale není, tu je lepší řešit CSS vlastností float:left, viz následující příklad). Funguje již celkem dobře všude, odsazení je ale nutné řešit standardní deklarací prvku, např. <p style="text-indent:2em"> (následující odstavec), protože deklarace pomocí pseudoelemenu p:first-line {text-indent: 2em} záhadně nikde nefunguje (tento odstavec), barva (p:first-line {color: blue}) a první písmeno (p:first-letter {font-size: 200%}) fungují dobře.

Tento odstavec by měl mít zleva odsazení, modrý první řádek a měl by mít první písmeno 2x větší (správná iniciála to ale není, tu je lepší řešit CSS vlastností float:left, viz následující příklad). Funguje již celkem dobře všude, odsazení je ale nutné řešit standardní deklarací prvku, např. <p style="text-indent:2em"> (tento odstavec), protože deklarace pomocí pseudoelemenu p:first-line {text-indent: 2em} záhadně nikde nefunguje (předchozí odstavec), barva (p:first-line {color: blue}) a první písmeno (p:first-letter {font-size: 200%}) fungují dobře. V IE je ovšem odsazení mnohem větší než v Opeře a Firefoxu, je to způsobeno hodnotou 2em, kterou IE nastaví podle prvního zvětšeného písmene. Někdy se mi ve Firefoxu ale první písmeno v tomto odstavci nezvětší při prvním načtení stránky, zkuste stránku aktualizovat, pak už je vše v pořádku.

Tento odstavec by měl mít na začátku typograficky správnou iniciálu. Tento efekt nejlépe vyřešíme CSS vlastností float:left a nastavením velikosti písma a řádkování.
Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu. Tento odstavec by měl mít na začátku iniciálu.

<span style="float:left; margin: 3px 5px 0px Opx; font-size: 4em; line-height: 83%">T</span>ento odstavec by měl mít na začátku ...

Efekt stínu (CSS vlastnost text-shadow). V testovaných prohlížečích dlouho nefungoval, podporoval ho pouze applovský prohlížeč Safari. Nedávno jsem ale s potěšením zjistil, že verze Opery 9.5x již tento efekt podporuje také! V IE lze stín řešit filtrem (viz příklad níže).

<h3 style="text-shadow:#007fff 5px 5px 5px"></h3>
Nápis se stínem

Obrázek formátu PNG s alfa průhledností (musí být vidět jen jablko bez šedého pozadí, Opera a Firefox OK, nefunguje v IE6, v IE7 ale konečně ano!).

Poznámka: pokud má jakýkoliv obrázek nastavený rámeček HTML atributem "border", je jeho barva v IE vždy černá, ve Firefoxu a Opeře má ale stejnou barvu jako text na stránce. U prvního obrázku by tedy měl být rámeček modrý (simulováno vložením obrázku do elementu <font>). Barevné rámečky u obrázků tedy raději řešíme CSS vlastností border-color, pak barva funguje dobře všude (druhý obrázek).

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

Filtry: grafika s alfa průhledností, nastavená filtrem alpha. Všechny filtry fungují jen v IE a pouze na blokové prvky, ve Firefoxu a Opeře je pro efekt průhlednosti podporována vlastnost opacity (ta ale zase nefunguje v IE).
Hodnoty parametru style: 0 (jednotný přechod), 1 (lineární přechod), 2 (radiální přechod) a 3 (obdélníkový přechod).

<img style="filter:alpha(finishopacity=10,style=2); opacity: 0.4)" src="grafika.gif" alt="Grafika s alfa filtrem" />



<div style="width:400px; height:75px; filter:alpha(finishopacity=2,style=1); opacity: 0.4">   <h1>průhlednost u textu</h1> </div>

průhlednost u textu
Filtr shadow (efekt stínu): v <div> trochu zlobí, obrázek se stínem má oříznutý horní okraj, v buňce tabulky je stín OK (v obou případech je nastavena velikost bloku o 30px větší než je velikost obrázku). U textu je stín zobrazen dobře, vše je ale opět funkční jen v IE.

<div style="filter:shadow(color=#339933, direction=45); width:220px; height:220px">   <img src="grafika.gif" alt="Grafika s filtrem shadow" /> </div>

<div style="filter:shadow(color=#880000, direction=45); width:400px; height:50px">   <h1>stínovaný text</h1> </div>

stínovaný text
<table>   <tr>     <td style="filter:shadow(color=#339933, direction=45); width:220px; height:220px">       <img src="grafika.gif" alt="Grafika s filtrem shadow" />     </td>   </tr> </table>

<table>   <tr>     <td style="filter:shadow(color=#880000, direction=45)">       <h1>stínovaný text</h1>     </td>   </tr> </table>

stínovaný text

Podpora vlastnosti position: fixed je připravena v tomto testovacím souboru, v Opeře a Firefoxu OK, nefunguje v IE6. V IE7 je tato vlastnost konečně podporována také, ale pouze v případě, že je uvedena v hlavičce stránky DTD deklarace.

Testování podpory směrování odkazů do rámečku typu <object> je připravena v tomto testovacím souboru, v Opeře a částečně ve Firefoxu OK, nefunguje v IE6 ani v IE7.

Podpora zobrazení XML souborů a vlastností display: table, table-row a table-cell je připravena v tomto testovacím souboru, v Opeře a Firefoxu vše OK, IE6 a IE7 zobrazují XML soubory, ale vlastnosti display: table, table-row a table-cell podporovány nejsou.

Podpora pravidla @import (CSS2 varianta pro připojení deklarace kaskádových stylů v externím souboru) je připravena v tomto testovacím souboru, v Opeře a Firefoxu OK, v IE6 a IE7 jen částečná v syntaxi bez specifikace výstupního zařízení.

Ukázka podpory tiskových stylů (pravidla @page, @media) je připravena v tomto testovacím souboru, nejlepší podpora je v Opeře, minimální v Exploreru 6 i 7, trochu zklamaný jsem z Firefoxu, kde je podpora stejná jako v IE.

41 bodů

Opera 9

Internet Explorer 8

Safari 3

Firefox 3

Internet Explorer 7

Internet Explorer 6

19 bodů

18 bodů

celkové výsledky

60 bodů