Přepínání vykreslovacích režimů Internet Exploreru

22. ledna 2008 – 1. března 2011

Z války prohlížečů vzešlo mnoho odlišností v jejich vykreslovacích jádrech. Jak se web postupně standardizoval a vykreslování bylo třeba upravit, prohlížeče přidávaly další vykreslovací režimy, aby staré weby vypadaly stále stejně. Internet Explorer 9 má 4 takové režimy. Nově implementované části HTML5 jsou však dostupné jen v tom nejnovějším. V článku si ukážeme jak ovlivnit, jaký vykreslovací režim Internet Explorer použije.

Internet Explorer 9 má celkem čtyři vykreslovací režimy. První se nazývá Quirks a jedná se o staré jádro Trident II. Je určené pro nejstarší weby, intranet a filesystém. Pokud webová stránka neobsahuje doctype, je použit právě tento režim. Je výchozí pro prostředí intranet a pro html soubory otevírané z místního disku. To je důležité například pro správnou funkčnost nápověd ve formátu html zabalených do jednoho souboru s příponou chm. Quirks mode zvládne CSS1 a základní úkony s JavaScriptem.

Vedle režimu Quirks, který pokrýval funkcionalitu čtvrté a páté verze IE, přibyl v šesté verzi režim standardů. Ten se liší zejména box modelem. Ten je sice trošku nelogický, hlavní ale je, že se v něm rozměry elementů počítají ve všech prohlížečích stejně. Rozhodnutí W3 prosadit jako standard něco, s čím nepočítala většina webů, přineslo mnoho problémů. Vedle toho byla také v IE 6 rozšířena podpora CSS. Tento režim byl (pozdě ale přece) vylepšen v IE 7. Vedle oprav nepříjemných chyb přibyla užitečná poloprůhlednost obrázků ve formátu PNG.

Osmá verze IE neměla mnoho možností a přinesla dva nové vykreslovací režimy. Důležitý je hlavně jejich dopad na JavaScript. IE 7 a starší používají svůj JScript, který až na několik odchylek vychází z ECMA Script 3. Situace byla podobná jako před tím s CSS. Kdyby se tyto odchylky odstranily, rázem by přestalo fungovat mnoho webů. A tak pro režimy Quirks a IE 7 Standards zůstal engine takový, jaký byl v IE 7. Režim IE8 Almost Standards je prakticky totožný s režimem IE8 Standards až na pozicování obrázků v tabulce, které je z režimu IE7 Standards.

Devátá verze se liší od svých předchůdců nejvíce. Javascriptový engine byl upraven a sjednocen pro všechny starší vykreslovací režimy. Ze dvou režimů IE8 Almost Standards a IE8 Standards vznikl jeden hybridní režim. Také jeden režim přibyl. Stále jsou tedy čtyři. V těch starších je k dispozici javascriptový engine podle ECMA Script 3, v tom nejnovějším podle ECMA Script 5. Ten přináší hlavně větší znovu použitelnost kódu, užitečné funkce nad polem a EventListener.

Nové vymoženosti HTML5 jako video tag, SVG, CSS3 či písma ve formátu WOFF jsou dostupné jen v nejnovějším režimu. U webových stránek vyvíjených úplně od začátku to problém není, pokud uvedou <!DOCTYPE html>. Je to totiž doctype pro HTML5, který jako kouzelná hůlka zařídí, že prakticky všechny prohlížeče použijí svůj nejnovější vykreslovací režim. Horší už je to s úpravami starších stránek, ve kterých chce mít firemní management nové prvky z HTML5. V tuto chvíli je užitečné znát všechny dostupné metody, jak nejlépe udělat úpravu stránek, které se vykreslovaly v Quirks režimu, na stránky stejně vypadající v režimu IE9 Standards.

Přepínání vykreslovacích režimů

Jak už bylo zmíněno, uvedení <!DOCTYPE html> na prvním řádku stránky přepne prohlížeč do nejnovějšího vykreslovacího režimu. Konkrétní vykreslovací režim lze také zvolit zasláním http hlavičky X-UA-Compatible. Avšak pozor, funguje až od osmé verze IE. Hodnoty hlavičky X-UA-Compatible popisuje následující tabulka:

IE=5	Quirks režim
IE=7	IE7 Standards režim
IE=8	IE8 Standards režim
IE=9	IE9 Standards režim
IE=EmulateIE7	Rozhodne se tak, jak by to udělal IE7
IE=EmulateIE8	Rozhodne se tak, jak by to udělal IE8
IE=EmulateIE9	Rozhodne se tak, jak by to udělal IE9
IE=edge	Použije nejnovější dostupný vykreslovací režim
IE=5; IE=8	Použije vyšší dostupný režim z uvedeného seznamu

Pokud z nějakých důvodů nejde zaslat HTTP hlavičku ze serveru, lze využít http-equiv meta tag.

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

IE 6 je naprogramován tak, že <?xml> deklarace shodí prohlížeč do Quirks režimu. U IE 7 už tomu tak není. Stránka, která posílá HTTP hlavičku content-type s hodnotou application/xhtml+xml, je v IE 9 vykreslena v nejnovějším režimu a nejde se ani přepnout do režimu staršího.

CSS jen pro určitou verzi IE

Od Internet Exploreru 5 můžou vývojáři používat podmíněné komentáře. Slouží k tomu, aby se určitá část HTML kódu interpretovala jen v určité verzi IE a ostatním verzím a prohlížečům se jevila jako komentář. Používá se to hlavně pro opravné CSS kódy.

<!--[if IE 6]>
<link rel="stylesheet" href="style.ie6.css" />
<![endif]-->

V podmínce komentáře nemusí být jen určité verze, ale dají se použít i výrazy „větší než“ a „menší než“. Příklady opět uvádí tabulka:

`<!--[if IE 6]>`	Jen verze 6.
`<!--[if gt IE 6]>`	Verze novější než 6.
`<!--[if gte IE 7]>`	Od verze 7.
`<!--[if lt IE 8]>`	Verze starší než 8.
`<!--[if lte IE 7]>`	Do verze 7.

V těchto opravných CSS kódech je občas nutné použít klauzuli !important, která zajistí, že nebude hodnota CSS vlastnosti přepsána. Podmíněné komentáře se dají využít například k simulaci position: fixed pro IE 6 . Velmi silnou zbraní jsou také dynamické CSS vlastnosti dostupné jen v režimech Quirks a IE7 Standards.

Přepínání box modelu

V CSS3 je jedna užitečná vlastnost box-sizing. Nastavením její hodnoty na border-box lze docílit toho, že se velikost elementu bude počítat stejně, jako v Quirks režimu Internet Exploreru. Funguje to v režimech IE8 Standards i IE9 Standards a dokonce i v prohlížečích Opera od verze 7 a Konqueror od verze 3.3.2. Ve Firefoxu je nutné použít -moz-box-sizing a v Safari a Chrome pak -webkit-box-sizing. Hodnota vlastnosti zůstává stejná.

Web se vyvíjí a jeho standardy stále zpřesňují. Standard totiž není prohlášen za hotový, dokud neexistují dvě nezávislé implementace a velká sada testů. Tím se jejich implementace ve webových prohlížečích rozchází a je třeba je upravovat. HTML, CSS, DOM mají své vlastní verzování, ECMAScript dokonce spravuje úplně jiná organizace. To nejstálejší, co bylo, byl Quirks režim. U něj byla jistota, že se stránky správně zobrazí na nejširším spektru různých zařízení. Proto jsou pro něj napsány miliony stránek. Věřím, že jeho roli v následujících letech postupně převezme HTML5.

Článek byl sepsán pro Zdroják.

Všechny díly seriálu Vykreslovací režimy Internet Exploreru:

Internet Explorer 10 se dvěma novými vykreslovacími režimy
Přepínání vykreslovacích režimů Internet Exploreru