Módy prohlížečů

proč psát na začátek stránky !doctype

Všechny prohlížeče mají

Jak se to liší:

Standardní i quirk režimy se dají nastavit pomocí určitých zápisů doctype uvedených úplně na začátku HTML dokumentu. Zjednodušeně řečeno platí toto:

Například zápis

<!doctype html>

uvede stránku do standardního módu.

Rozdíly módů ve všech prohlížečích

Quirk mód se od standardního liší v tomto:

V quirk módu:

Firefox v quirku odmítá načíst externí stylopis s jinou příponou než .css.

Jak přepínat módy

Stačí na začátku html souboru napsat doctype s určitou syntaxí. Více se tím zabývám v článku o doctype.

Standardní mód

Jde o režim vykreslování, který se snaží co nejvíc chovat podle specifikace W3C.

Začátek kódu stránky se striktním doctype vypadá třeba takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01">
<html>...

nebo též naštěstí prostě

<!doctype html>
<html>...

Vůbec nic tedy nezkazíte, pokud budete každou svou HTML stránku začínat zápisem <!doctype html>. Chytří čtenáři mohou namítnout, že to je doctype, který se vztahuje k HTML 5. Naštěstí jeho použití i na předchozí verze HTML nezpůsobí ve vykreslování stránky vůbec žádnou újmu.

QUIRK mód

Quirk mód záměrně porušuje pravidla W3C. Možná to dělá kvůli tomu, aby umožnil správné zobrazení starých stránek. Quirk mód se někdy označuje jako adaptivní režim, protože se prohlížeč jakoby adaptuje na staré časy, kdy se stránky kódovaly jinak.

Jak už jsem zmínil, do quirk módu se dá přepnout prostě tím, že se žádné doctype neuvede. Do quirk módu také přepínají všechna starší zápisy doctype, které obsahují slovo "transitional".

V čem bývaly rozdíly módů v Internet Exploreru 6

Dá se říct, že quirk mód v IE 6 a starších byl ještě další, třetí mód, který byl ještě více "quirk".

Tato historická kapitola probírá, v čem se liší módy v Exploreru 6 a starších. Nechávám ji zde hlavně kvůli tomu, aby bylo zřejmé, co už neplatí, pokud tyto informace najdete v jiných zdrojích. Zajímavá je také pro autory, kteří i po letech používají editor FrontPage 2003 (třeba já). FrontPage 2003 také v režimu wysiwyg editace používá starý quirk mód.

Za podstatné považuji v quirk módu Internet Exploreru 6 tři rozdíly oproti standardu:

Právě kvůli nepodpoře moderních vychytávek CSS 2 a CSS 3 v Internet Exploreru dnes skoro nemá smysl používat záměrně quirk mód.

Počítání rozměrů, např šíř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):

standardní boxmodel s oddělenými vlastnostmi

Oproti tomu quirk mód v Internet Exploreru 4, 5 a 6 do šířky počítal border i padding:

nestandardní boxmodel počítá do šířky i padding a border

Protože Internet Explorer 4 byl prvním prohlížečem se slušnou podporou CSS, používání nestandardního boxmodelu mezi autory hodně rozšířilo. Pokud byste rádi počítali padding a border do šířky, jako to dělaly první explorery, prostudujte si CSS vlastnost box-sizing, která přesně tohle umožňuje.

Připomínám, že v nových Explorerech (např. IE 9) se i v quirk módu do šířky padding ani border nepočítá. Chová se tedy standardně.

Velikost písma

V různých režimech bývala jinak chápána klíčová slova pro velikost písma middle, large, small apod. Zjednodušeně lze říci, že Internet Explorer 6 v quirk módu kreslil všechno o jeden stupeň větší. Např. Internet Explorer 9 i v quirk módu kreslí velikosti písem normálně (jen je nedědí do tabulky).

Řá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 v IE 6 to dovoloval a občas to vedlo k podivným efektům.

Příklady rozdílů módů v Exploreru 6

Standardní režim vykreslování

Quirk režim vykreslování

Meta přepínání v IE 8

<meta http-equiv="X-UA-Compatible" content="IE=8">

(Tohle ještě budu muset testovat.) Píše se, že tenhle meta tag umí přepnout IE 8 do ještě standardnějšího módu, než do jaký je v IE 7. Pravděpodobně by se tímhle meta tagem dalo simulovat chování v IE 7 a IE6 změnou hodnoty parametru (ale kdo by to chtěl?)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tohle by mělo způsobit, že se stránka vždycky přizpůsobí nejnovějšímu dostupnému módu.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.