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

Ico zajímavosti

29.05.2007 - PaedDr. Petr Pexa Počet zobrazení: 161744  

V předchozím článku jsme Vás seznámili s pojmy xml deklarace a DTD (Document Type Definition) a naznačili možný problém se správným zobrazením stránek, pokud DTD nebude v kódu uvedena. Tomuto tématu se budeme v tomto dílu věnovat podrobněji popisem tzv. "quirk" módu Internet Exploreru 6.

Firefox 2, Opera 9, a kupodivu již i Windows Explorer 7 používají vždy standardní zobrazovací režim webových stránek. Internet Explorer 6 však používá dva zobrazovací režimy - standardní a tzv. "quirk" nestandardní. Mezi těmito režimy se automaticky přepíná podle toho, zda je či není uvedena xml deklarace a řádek DOCTYPE. V quirk módu se jinak počítají rozměry blokových elementů - Explorer 6 interpretuje šířku elementu chybně jako celek, tedy včetně orámování (border) a vnitřního okraje (padding), naopak Firefox, Opera a Explorer 7 chápou šířku elementu správně jen jako šířku jeho obsahu.

Dále se v quirk módu zobrazují chybně rozměry in-line elementů (např. < span >) a velikost písma je zobrazována o stupeň větší.

Je-li v dokumentu uvedena xml deklarace, je Explorer 6 vždy přepnut do nestandardního quirk módu. Takovou stránku tedy nelze mít XHTML validní a současně zobrazenou shodně (ve standardním režimu) ve všech prohlížečích.

Není-li v kódu uvedena jakákoliv validní definice typu dokumentu DTD, je rovněž Internet Explorer 6 přepnut do quirk módu.

V ukázce si všimněte, že rozměry obou rámečků jsou v Exploreru 6 odlišné (druhý rámeček je již upraven pomocí CSS hacku, viz níže), v ostatních prohlížečích jsou oba rámečky shodné.

< div style="border: 20px solid red; width: 200px" >


Ve standardním módu zobrazuje Explorer 6 pouze dokumenty s DTD Transitional nebo Strict a bez xml deklarace, řádek

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

 

musí být totiž v kódu hned na začátku. V ukázce si všimněte, že rozměry obou rámečků jsou již ve všech prohlížečích včetně Exploreru 6 shodné.


XML deklaraci ale nemusíme v kódu webu uvést pouze tehdy, použijeme-li kódování utf-8, s tradičním kódováním windows-1250 musí být xml deklarace uvedena vždy, aby kód prošel validátorem bez úhony. Kódování utf-8 je pak uvedeno pouze v sekci < head > následující metainformací:

< meta http-equiv="content-type" content="text/html; charset=utf-8" />

 

Použitý HTML editor však musí uložení dokumentu v tomto kódování podporovat! Pozor tedy na známý český editor Golden, který ukládá vždy do windows-1250, doporučujeme raději používat např. editory PSPad nebo AceHTML, dokumenty je možné uložit v utf-8 i v Poznámkovém bloku. Nestačí tedy nastavit kódování utf-8 pouze v hlavičce a dokument pak uložit ve windows-1250, místo českých znaků jsou pak v prohlížeči zobrazeny nesmysly; pokud je použita čeština i v titulku stránky, v Exploreru se dokonce zobrazí jen prázdná stránka!

Shrnutí: pokud použijeme XHTML validní kód pro hlavičku webu:

< ?xml version="1.0" encoding="windows-1250"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

 

přepne se Explorer 6 vždy do quirk módu, a musíme tedy počítat s tím, že bez CSS hacku (viz následující odstavec) budou rozměry blokových prvků v tomto prohlížeči odlišné. Jak jsme již uvedli výše, Windows Explorer 7, Firefox 2 a Opera 9 vždy stránky zobrazují ve standardním módu bez ohledu na výskyt xml deklarace. DTD je ale nutné uvádět vždy, jinak mnohé nové CSS vlastnosti v prohlížečích fungují špatně, či dokonce vůbec (např. position:fixed v Exploreru 7 nebo overflow:visible v tomtéž prohlížeči a Opeře 9).

CSS hack

Nestandardní, ale funkční řešení problému quirk módu prohlížeče Internet Explorer 6 nabízí tzv. CSS hack, kdy zápis width: 200px je určen pro standardní režim a width: "240px" (resp. _width: 240px) pro quirk mód, který je naštěstí schopen tento syntakticky nesprávný zápis rozeznat a především preferovat. V hacku přičteme šířku levého a pravého rámečku (a případný vnitřní okraj) a umístíme ho za standardní deklaraci šířky, obráceně to nefunguje! Explorer 6 ve standardním módu, Explorer 7, Firefox 2 i Opera 9 naopak CSS hack nevidí a všechny objekty jsou také správně stejně široké 200px.

div { border: 20px solid red; width: 200px; width: "240px" }
div { border: 20px solid red; width: 200px; _width: 240px }


Další problematické důsledky quirk módu

V nestandardním zobrazovacím quirk módu Exploreru 6 se kromě jiného výpočtu rozměrů blokových prvků ještě chybně zobrazují rozměry řádkových (in-line) elementů a velikost písma je nastavena o stupeň větší. Obě chyby si ukážeme na příkladu řádkového elementu < span >, u kterého nastavíme výšku, šířku a velikost písma hodnotou small. Správně by měl prohlížeč u řádkových elementů rozměry ignorovat a písmo zobrazit menší (viz 1. ukázka), v quirk módu je ale vše bohužel jinak (viz 2. ukázka). Problém s velikostí písma se navíc projeví jen v CSS deklaraci, pokud použijeme ke zmenšení písma HTML element < small > < /small >, text je menší než standardní písmo i v quirk módu.

span { width: 300px; height: 50px; border: 1px solid red }
span { font-size: small }
< small > menší písmo < /small >

Aktuality