Skoro každý si všimnul, že sposta stránek vypadá v různých prohlížečích různě. Do značné míry za tu různost mohou vykreslovací režimy, kterým se také říká módy. Pokud to zjednoduším, tak prohlížeče založené na jádře gecko, zejména Mozilla, používají standardní vykreslovací režim. Taktéž Konqueror a Safari. Internet Explorer používá nestandardní quirk režim, třebaže se ve verzi IE 6 dá standardní režim simulovat pomocí určitých doctype. Opera jak kdy, také podle doctype.
Blokový model vykreslování podle specifikace. Používají je Mozilla (+ odvozeniny), Opera (s určitým DOCTYPE) a Internet Explorer 6 (se striktním DOCTYPE).
Také se tomu říká "režim zpětné kompatibility" nebo "kompatibilní režim". Používají ho všechny verze Internet Exploreru (kromě šestky se striktním doctype) a Opera bez striktního DOCTYPE.
Patrně jich bude víc, ale za podstatné považuji tři:
Říká se tomu také boxmodel. Specifikace říká (a standardní mód to respektuje), že do rozměrů prvků se nepočítá rámeček (border) a vnitřní okraj (padding):
Oproti tomu quirk mód (a zejména Internet Explorer) do šířky počítá border i padding:
Protože Internet Explorer byl prvním prohlížečem se slušnou podporou CSS, nestandardní boxmodel se hodně rozšířil. To je i důvod, proč je hodně starších webů hnusných v Mozille a proč konzervativní kodéři mají rádi tabulky -- nepochopili rozdíly boxmodelů a nenaučili se je hackovat.
V různých režimech jsou jinak chápána klíčová slova pro velikost písma middle, large, small apod. Zjednodušeně lze říci, že Internet Explorer v nestandardním módu kreslí všechno o jeden stupeň větší.
Standardní mód nedovoluje (zcela logicky) zadávat řádkovým prvkům rozměry (např. odkazům, tagu span apod.), občas mi to chybí. Nestandardní mód to dovoluje a občas to vede k podivným efektům.
Ve standardním vykreslovacím módu se do šířky a výšky nezapočítává border (rámeček) a padding (vnitřní okraj). V nestandardním módu se do šířky a výšky border i padding počítá. Aby bylo zaručeno stejné (nebo alespoň podobné) vykreslení stránky v Internet Exploreru 5 (vždy quirk mód) a v Mozille (standardní mód), musí se kód ohackovat. Stejné hacky se dají použít i pro velikost písma (font-size).
Můj oblíbený, ale nevalidní hack spočívá v použití uvozovek kolem quirk hodnot:
.prvek {padding-left: 20px; width: 300px; width: "320px";}
první hodnota 300px je pro standardní režim, druhá hodnota v uvozovkách je pro nestandardní režim. Internet Explorer 6 ve standardním módu hodnotu v uvozovkách nevidí.
Používá se stejně jako uvozovkový hack na odlišení standardních a nestandardních módů prohlížečů.
prvek {padding-left: 20px; width: 320px; w\idth: 300px;}
Zpětné lomítko před nějakým vnitřním písmenkem zápisu vlastnosti způsobí, že standardní módy (Mozilla, Explorer 6 se standardním doctype, Opera se standardním doctype) vlastnost vidí a nestandardní módy (starší Explorery, Explorer 6 bez standardního doctype) takto zapsanou vlastnost nevidí.
Pozor, zpětné lomítko nesmí být před písmenky a b c d e f, potom to nefunguje.
Pokud se před jménem css vlastnosti uvede podtržítko (např. _height), Internet Explorer ho nevidí a vlastnost interpretuje, jako by byla zapsána bez podtržítka. Jiné prohlížeče (správně) interpretují vlastnost jako neznámou. Zápis hacku by pak vypadal takto:
.prvek {padding-left: 20px; width: 300px; _width: 320px;}
Narozdíl od hacku s uvozovkami jde pravděpodobně o validní zápis. Internet Explorer ve standardním módu vlastnost _width vidí, a proto je tento hack použitelný spíše jenom v tom případě, kdy stránka bude v nestandardním (quirk) módu.
Výška 18 pixelů pro standardní mód a 24px pro nestandardní mód se dá udělat takhle:
.prvek {height:18px !important; height /**/:24px;}
totéž funguje pro šířku a všechny ostatní vlastnosti. Je to validní zápis a z validních zápisů je asi nejjednodušší.
Pokud máte starý design odladěný pro quirk mód Internet Exploreru, je nerychlejší řešení optimalizace pro Mozillu nastavit
* {-moz-box-sizing: border-box}
Více o -moz-box-sizing.
Hacků na boxmodel existují desítky, ale připadají mi většinou málo použitelné.
Stačí na začátku html souboru napsat doctype s určitou syntaxí. Popíšu způsob, který používám pro přepínání módů v Internet Exploreru. Když dám dokument bez doctype nebo s chybným doctype, tak je v quirk módu. Stejně tak je v quirk módu je dokument s následujícím doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Takže to je quirk. A teď doctype, při němž Internet Explorer 6 přepne do standardního módu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Určitě vidíte, že rozdíl je tam v tom "Transitional". Doctypů se standardním vykreslováním je víc. Výše zmíněné přepínání funguje i pro Operu.
Další zajímavost Internet Exploreru 6 je ta, že když doctype není zcela na začátku dokumentu (třeba je před ní xml deklarace), tak přepínání módů nefunguje. Teď rychle si nevzpomínám, jak se to řeší.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.