Dajbych.net


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

, 7 minut čtení

Z války proh­lížečů vzešlo mnoho odlišností v je­jich vykreslo­vacích já­drech. Web pos­tupně stan­dardi­zo­val a vykreslování proh­lížečů bylo třeba upravit. Aby staré weby vy­padaly stále ste­jně, přibývaly v proh­lížečích další vykreslo­vací režimy. In­ter­net Ex­plorer 9 má takové režimy 4. Nově im­ple­men­to­vané části HTML5 jsou však dos­tupné jen v tom ne­jnovějším. V článku si ukážeme jak ovlivnit, který vykreslo­vací režim In­ter­net Ex­plorer pro stránky použije.

In­ter­net Ex­plorer 9 má celkem čtyři vykreslo­vací režimy. První se nazývá Quirks a jedná se o staré já­dro Tri­dent II. Je určené pro ne­js­tarší weby, in­tranet a filesys­tém. Pokud we­bová stránka neob­sahuje doc­type, je použit právě tento režim. Je vý­chozí pro prostředí in­tranet a pro html soubory otevírané z míst­ního disku. To je důležité napřík­lad pro správ­nou funkčnost nápověd ve for­mátu html za­balených do jed­noho souboru s příponou chm. Quirks mode zvládne CSS1 a zák­ladní úkony s JavaScriptem.

Ve­dle režimu Quirks, který pokrý­val funk­cion­al­itu čtvrté a páté verze IE, přibyl v šesté verzi režim stan­dardů. Ten se liší ze­jména box modelem. Ten je sice trošku ne­l­og­ický, hlavní ale je, že se v něm rozměry el­e­mentů počítají ve všech proh­lížečích ste­jně. Rozhod­nutí W3 prosa­dit jako stan­dard něco, s čím nepočí­tala většina webů, při­neslo mnoho prob­lémů. Ve­dle toho byla také v IE 6 rozšířena pod­pora CSS. Tento režim byl (pozdě ale přece) vylepšen v IE 7. Ve­dle oprav nepří­jem­ných chyb přibyla užitečná polo­průh­led­nost obrázků ve for­mátu PNG.

Osmá verze IE neměla mnoho možností a při­nesla dva nové vykreslo­vací režimy. Důležitý je hlavně je­jich dopad na JavaScript. IE 7 a starší použí­vají svůj JScript, který až na něko­lik od­chylek vy­chází z ECMA Script 3. Si­tu­ace byla podobná jako před tím s CSS. Kdyby se tyto od­chylky od­s­tranily, rázem by přestalo fun­go­vat mnoho webů. A tak pro režimy Quirks a IE 7 Stan­dards zůstal en­gine takový, jaký byl v IE 7. Režim IE8 Al­most Standards je prak­ticky to­tožný s režimem IE8 Stan­dards až na poz­i­cování obrázků v tab­ulce, které je z režimu IE7 Stan­dards.

De­vátá verze se liší od svých před­chůdců ne­jvíce. Javascrip­tový en­gine byl upraven a sjed­no­cen pro všechny starší vykreslo­vací režimy. Ze dvou režimů IE8 Al­most Stan­dards a IE8 Stan­dards vznikl je­den hy­bridní režim. Také je­den režim přibyl. Stále jsou tedy čtyři. V těch starších je k dis­pozici javascrip­tový en­gine po­dle ECMA Script 3, v tom ne­jnovějším po­dle ECMA Script 5. Ten přináší hlavně větší znovu použitel­nost kódu, užitečné funkce nad polem a EventLis­tener.

Nové vy­moženosti HTML5 jako video tag, SVG, CSS3 či písma ve for­mátu WOFF jsou dos­tupné jen v ne­jnovějším režimu. U we­bových stránek vyví­jených úplně od začátku to prob­lém není, pokud uve­dou <!DOC­TYPE html>. Je to totiž doc­type pro HTML5, který jako kouzelná hůlka zařídí, že prak­ticky všechny proh­lížeče použijí svůj ne­jnovější vykreslo­vací režim. Horší už je to s úpravami starších stránek, ve kterých chce mít firemní man­age­ment nové prvky z HTML5. V tuto chvíli je užitečné znát všechny dos­tupné me­tody, jak ne­jlépe udělat úpravu stránek, které se vykreslo­valy v Quirks režimu, na stránky ste­jně vy­pada­jící v režimu IE9 Stan­dards.

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

Jak už bylo zmíněno, uve­dení <!DOC­TYPE html> na prvním řádku stránky přepne proh­lížeč do ne­jnovějšího vykreslo­vacího režimu. Konkrétní vykreslo­vací režim lze také zvolit zasláním http hlav­ičky X-UA-Com­pat­i­ble. Avšak po­zor, fun­guje až od osmé verze IE. Hod­noty hlav­ičky X-UA-Com­pat­i­ble popisuje násle­du­jící tab­ulka:

X-UA-Com­pat­i­bleVykreslo­vací režim
IE=5Quirks
IE=7IE7 Stan­dards
IE=8IE8 Stan­dards
IE=9IE9 Stan­dards
IE=Em­u­lateIE7Rozhodne se tak, jak by to udělal IE7
IE=Em­u­lateIE8Rozhodne se tak, jak by to udělal IE8
IE=Em­u­lateIE9Rozhodne se tak, jak by to udělal IE9
IE=edgePoužije ne­jnovější dos­tupný
IE=5; IE=8Použije vyšší dos­tupný z uve­deného sez­namu

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

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

IE 6 je napro­gramován tak, že <?xml> deklarace shodí proh­lížeč do Quirks režimu. U IE 7 už tomu tak není. Stránka, která posílá HTTP hlav­ičku con­tent-type s hod­no­tou ap­pli­ca­tion/xhtml+xml , je v IE 9 vykreslena v ne­jnovějším režimu a ne­jde se ani přep­nout do režimu staršího.

CSS jen pro určitou verzi IE

Od In­ter­net Ex­ploreru 5 můžou vývo­jáři použí­vat pod­míněné ko­men­táře. Slouží k tomu, aby se určitá část HTML kódu in­ter­pre­to­vala jen v určité verzi IE a ostat­ním verzím a proh­lížečům se jevila jako ko­men­tář. Používá se to hlavně pro opravné CSS kódy.

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

V pod­mínce ko­men­táře ne­musí být jen určité verze, ale dají se použít i výrazy „větší než“ a „menší než“. Přík­lady opět uvádí tab­ulka:

Con­di­tional com­mentVerze IE
<!--[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 !im­por­tant, která za­jistí, že neb­ude hod­nota CSS vlast­nosti přep­sána. Pod­míněné ko­men­táře se dají využít napřík­lad k sim­u­laci po­si­tion: fixed pro IE 6. Velmi sil­nou zbraní jsou také dy­nam­ické CSS vlast­nosti dos­tupné jen v režimech Quirks a IE7 Stan­dards.

Přepínání box modelu

V CSS3 je jedna užitečná vlast­nost box-siz­ing. Nas­tavením její hod­noty na bor­der-box lze docílit toho, že se ve­likost el­e­mentu bude počí­tat ste­jně, jako v Quirks režimu In­ter­net Ex­ploreru. Fun­guje to v režimech IE8 Stan­dards i IE9 Stan­dards a dokonce i v proh­lížečích Opera od verze 7 a Kon­queror od verze 3.3.2. Ve Fire­foxu je nutné použít -moz-box-siz­ing a v Sa­fari a Chrome pak -we­bkit-box-siz­ing. Hod­nota vlast­nosti zůstává ste­jná.

Web se vyvíjí a jeho stan­dardy stále zpřesňují. Stan­dard totiž není proh­lášen za ho­tový, dokud ne­ex­is­tují dvě nezávislé im­ple­men­tace a velká sada testů. Tím se je­jich im­ple­men­tace ve we­bových proh­lížečích rozchází a je třeba je upravo­vat. HTML, CSS, DOM mají své vlastní ver­zování, EC­MAScript dokonce spravuje úplně jiná or­ga­ni­zace. To ne­jstále­jší, co bylo, byl Quirks režim. U něj byla jis­tota, že se stránky správně zo­brazí na ne­jširším spek­tru různých zařízení. Proto jsou pro něj nap­sány mil­iony stránek. Věřím, že jeho roli v násle­du­jících letech pos­tupně převezme HTML5.