Módy prohlížečů

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éž Opera, 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.

Standardní mód

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).

Nestandardní QUIRK mód

Také se tomu říká režim zpětné kompatibility. Používají ho všechny verze Internet Exploreru (kromě šestky se striktním doctype) a Opera bez striktního DOCTYPE.

V čem jsou rozdíly

Patrně jich bude víc, ale za podstatné považuji tři:

• jinak počítají šířku a výšku (boxmodel)
• jinak zobrazují velikost písma (quirk mód má písmo o stupeň větší)
• quirk mód dovoluje nastavovat rozměry řádkovým prvkům

Počítání šířky

Ří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.

Velikost písma

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ší.

Řádkové prvky

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.

Příklady rozdílů módů

Standardní režim vykreslování

Quirk režim vykreslování

Hackování šířky a výšky

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).

Hack s uvozovkami

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í.

Hack s podtržítkem

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.

Hack s important a poznámkou

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šší.

A další

Hacků na boxmodel existují desítky, ale připadají mi většinou málo použitelné.

Vizte též

Doctype

Odkazy

Pixy: módy prohlížečů v závislosti na doctype