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

26.01.2007 - PaedDr. Petr Pexa Počet zobrazení: 3569  

V uplynulém roce byly zveřejněny nové verze nejpoužívanějších internetových prohlížečů Firefox 2, Opera 9 a zejména dlouho očekávaný Windows Explorer 7. Téměř každá nová verze má většinou implementovanou lepší podporu nových jazyků, určených pro tvorbu webových stránek a tím je zajištěno, že lze využívat nové efekty a funkce, které se staly společnými pro tyto prohlížeče.

Tímto článkem zahajujeme seriál, zaměřený na otestování podpory takových problematických prvků a upozornit tak na ty, které zatím standardně podporovány nejsou. Tak Vám pomůžeme zajistit, aby se Vaše webové stránky zobrazovaly ve všech prohlížečích shodně a také splňovaly schválené standardy.

Testování problematických prvků pro hlavičku a tělo stránky

V 1. díle seriálu se budeme zabývat podporou příkazů, které zajišťují určitý efekt na celé webové stránce a umisťují se proto buď v hlavičce stránky (element < head>), nebo se nastavují jako atributy či vlastnosti základního elementu < body>.

Okraje stránky

V jazycích HTML a XHTML existují pro nastavení okrajů webové stránky nestandardní příkazy leftmargin, topmargin, marginwidth a marginheight.

 

Zásadním problémem těchto atributů je, že první dva fungují pouze v Internet (resp. Windows) Exploreru a Opeře, druhé dva zase pouze v prohlížečích, založených na jádře Gecko, tedy např. Mozille, Firefoxu či Netscape. Ani jeden z nich navíc neodpovídá standardu jazyka XHTML, takže jejich použitím nelze zajistit validitu stránek. Řešením tohoto faktu je tedy deklarace pomocí jazyka CSS a jeho vlastností margin . Pomocí tzv. in-line stylů pak deklarujeme okraje přímo na stránce atributem style:

 

Výhodnější je ale použít deklaraci v externím připojeném souboru:

 

Hodnoty jsou v obou případech v pořadí horní, pravý, dolní a levý okraj, je možné také použít speciální vlastnosti pro jednotlivé okraje: margin-top, margin-right, margin-bottom a margin-left .

Fixované pozadí stránky

V jazycích HTML a XHTML existuje pro nastavení tzv. fixovaného pozadí (tedy pozadí, které se při rolování stránkou neposouvá) opět nestandardní atribut bgproperties .

Tato varianta opět nefunguje všude stejně, není podporována např. prohlížečem Firefox. Řešení opět nabízí jazyk CSS a jeho vlastnost background-attachment.

 

resp.

Vlastní kurzor v CSS2

Jazyk CSS ve své druhé verzi nabízí možnost deklarace vlastních obrázků jako ukazovátka myši vlastností cursor.

 

resp.

 

Lze použít předefinované kurzory, nebo obrázky ve formátu *.cur . Obrázky ale fungují jen v Internet Exploreru, ve všech testovaných prohlížečích jen kurzory předdefinované (viz tabulka). V tomtéž prvku také nesmíme definovat oba typy kurzorů současně (i když to CSS syntaxe povoluje), v Exploreru a Opeře se zobrazí alespoň prioritní předdefinovaný kurzor, ve Firefoxu ovšem jen defaultní kurzor systémový.

Přehled kurzorů si můžete prohlédnout v příloze této stránky.

Alternativní styly

V CSS2 je možné vytvořit více vzhledově odlišných verzí jedné webové stránky a umožnit tak uživateli zvolit tu nejoptimálnější. Tyto verze připojíme ke stránce atributem rel="alternate stylesheet" elementu < link > a uživatel si je může vybrat v nabídce Zobrazit/Styl prohlížečů Opera a Firefox. V Internet Exploreru 6 ani novém Windows Exploreru 7 ale tyto prvky bohužel nefungují.

Element < link > je také možné použít pro vložení ikony do adresového řádku prohlížeče, tomuto efektu byl již nedávno věnován samostatný článek.

 

Přechodový efekt a barevné rolovací pásy

Na závěr tohoto prvního dílu se ještě zmíníme o dvou nestandardních efektech, které ovšem fungují pouze v prohlížeči Explorer. Prvním z nich je tzv. Transition efekt, který se zobrazuje při načítání stránky či při přechodu na stránku jinou.

Těchto efektů je celkem 23 a jejich seznam najdete na www.ebtx.com/comp/webefx.htm.

Druhým prvkem je efekt obarvení rolovacích pásů prohlížeče, a to nejen v celém okně, ale např. i v textovém poli u formulářů či objektů s nastavenou vlastností overflow:scroll. Je možné použít jednodušší variantu s jedinou vlastností scrollbar-base-color nebo variantu s detailním nastavením barev jednotlivých částí rolovacího pásu. Pokud ovšem zapomeneme v hlavičce stránky na DTD deklaraci (což ovšem odporuje standardu jazyka XHTML), fungují tyto efekty kupodivu i v Opeře 9, s DOCTYPE řádkem již nikoliv.