Testování problematických (X)HTML a CSS příkazů pro hlavičku a tělo stránky
(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)
- 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, IE7 a Safari nefungují, v IE 8, 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 či animované ani. 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, Opeře a Safari 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, IE7 a IE8 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" />
- Mohly 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">
pepe © 2006