Dajbych.net


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

, 8 minut čtení

Z války pro­hlí­žečů vze­šlo mnoho od­liš­ností v je­jich vy­kres­lo­va­cích já­drech. Web po­stupně stan­dar­di­zo­val a vy­kres­lo­vání pro­hlí­žečů bylo třeba upra­vit. Aby staré weby vy­pa­daly stále stejně, přibývaly v pro­hlí­že­čích další vy­kres­lo­vací re­žimy. In­ter­net Ex­plo­rer 9 má ta­kové re­žimy 4. Nově im­ple­men­to­vané části HTML5 jsou však do­stupné jen v tom nej­no­věj­ším. V článku si uká­žeme jak ovliv­nit, který vy­kres­lo­vací re­žim In­ter­net Ex­plo­rer pro stránky po­u­žije.

In­ter­net Ex­plo­rer 9 má cel­kem čtyři vy­kres­lo­vací re­žimy. První se na­zývá Quirks a jedná se o staré já­dro Tri­dent II. Je ur­čené pro nej­starší weby, in­tra­net a fi­le­systém. Po­kud we­bová stránka ne­ob­sahuje doctype, je po­u­žit právě tento re­žim. Je výchozí pro prostředí in­tra­net a pro html sou­bory ote­vírané z míst­ního disku. To je dů­le­žité na­pří­klad pro správ­nou funkč­nost ná­po­věd ve for­mátu html zabale­ných do jed­noho sou­boru s pří­po­nou chm. Quirks mode zvládne CSS1 a zá­kladní úkony s Ja­vaScrip­tem.

Ve­dle re­žimu Quirks, který po­krý­val funk­ci­o­na­litu čtvrté a páté verze IE, při­byl v šesté verzi re­žim stan­dardů. Ten se liší zejména box mo­de­lem. Ten je sice trošku ne­lo­gický, hlavní ale je, že se v něm roz­měry ele­mentů po­čítají ve všech pro­hlí­že­čích stejně. Roz­hod­nutí W3 pro­sa­dit jako stan­dard něco, s čím ne­po­čítala vět­šina webů, při­neslo mnoho problé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 ne­příjem­ných chyb při­byla uži­tečná po­lo­prů­hled­nost ob­rázků ve for­mátu PNG.

Osmá verze IE ne­měla mnoho mož­ností a při­nesla dva nové vy­kres­lo­vací re­žimy. Dů­le­žitý je hlavně je­jich do­pad na Ja­vaScript. IE 7 a starší po­u­ží­vají svůj JScript, který až na ně­ko­lik od­chylek vy­chází z ECMA Script 3. Si­tuace byla po­dobná jako před tím s CSS. Kdyby se tyto od­chylky od­stra­nily, rá­zem by pře­stalo fun­go­vat mnoho webů. A tak pro re­žimy Quirks a IE 7 Stan­dards zů­stal en­gine ta­kový, jaký byl v IE 7. Re­žim IE8 Al­most Standards je prak­ticky to­tožný s re­ži­mem IE8 Stan­dards až na po­zi­co­vání ob­rázků v tabulce, které je z re­žimu IE7 Stan­dards.

De­vátá verze se liší od svých před­chůdců nej­více. Ja­vascrip­tový en­gine byl upra­ven a sjed­no­cen pro všechny starší vy­kres­lo­vací re­žimy. Ze dvou re­žimů IE8 Al­most Stan­dards a IE8 Stan­dards vznikl je­den hyb­ridní re­žim. Také je­den re­žim při­byl. Stále jsou tedy čtyři. V těch star­ších je k dis­po­zici ja­vascrip­tový en­gine podle ECMA Script 3, v tom nej­no­věj­ším podle ECMA Script 5. Ten při­náší hlavně větší znovu po­u­ži­tel­nost kódu, uži­tečné funkce nad po­lem a Event­Lis­te­ner.

Nové vy­mo­že­nosti HTML5 jako vi­deo tag, SVG, CSS3 či písma ve for­mátu WOFF jsou do­stupné jen v nej­no­věj­ším re­žimu. U we­bo­vých strá­nek vy­víje­ných úplně od za­čátku to problém není, po­kud uve­dou <!DOCTYPE html>. Je to totiž doctype pro HTML5, který jako kou­zelná hůlka za­řídí, že prak­ticky všechny pro­hlí­žeče po­u­žijí svůj nej­no­vější vy­kres­lo­vací re­žim. Horší už je to s úpra­vami star­ších strá­nek, ve kterých chce mít fi­remní ma­nage­ment nové prvky z HTML5. V tuto chvíli je uži­tečné znát všechny do­stupné me­tody, jak nej­lépe udě­lat úpravu strá­nek, které se vy­kres­lo­valy v Quirks re­žimu, na stránky stejně vy­pa­dající v re­žimu IE9 Stan­dards.

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

Jak už bylo zmí­něno, uve­dení <!DOCTYPE html> na prv­ním řádku stránky pře­pne pro­hlí­žeč do nej­no­věj­šího vy­kres­lo­va­cího re­žimu. Kon­krétní vy­kres­lo­vací re­žim lze také zvo­lit za­slá­ním http hla­vičky X-UA-Com­pa­ti­ble. Avšak po­zor, fun­guje až od osmé verze IE. Hod­noty hla­vičky X-UA-Com­pa­ti­ble po­pi­suje ná­sle­dující tabulka:

X-UA-Com­pa­ti­ble Vy­kres­lo­vací re­žim
IE=5 Quirks
IE=7 IE7 Stan­dards
IE=8 IE8 Stan­dards
IE=9 IE9 Stan­dards
IE=Emula­teIE7 Roz­hodne se tak, jak by to udě­lal IE7
IE=Emula­teIE8 Roz­hodne se tak, jak by to udě­lal IE8
IE=Emula­teIE9 Roz­hodne se tak, jak by to udě­lal IE9
IE=edge Po­u­žije nej­no­vější do­stupný
IE=5; IE=8 Po­u­žije vyšší do­stupný z uve­de­ného se­znamu

Po­kud z ně­jakých dů­vodů nejde za­slat HTTP hla­vičku ze ser­veru, lze vyu­žít http-equiv meta tag.

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

IE 6 je na­pro­gra­mo­ván tak, že <?xml> de­kla­race shodí pro­hlí­žeč do Quirks re­žimu. U IE 7 už tomu tak není. Stránka, která po­sílá HTTP hla­vičku con­tent-type s hod­no­tou ap­pli­cation/xhtml+xml , je v IE 9 vy­kres­lena v nej­no­věj­ším re­žimu a nejde se ani pře­pnout do re­žimu star­šího.

CSS jen pro určitou verzi IE

Od In­ter­net Ex­plo­reru 5 mů­žou vý­vo­jáři po­u­ží­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 ver­zím a pro­hlí­že­čům se je­vila jako ko­men­tář. Po­u­ží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 po­u­žít i výrazy „větší než“ a „menší než“. Pří­klady opět uvádí tabulka:

Con­di­ti­o­nal com­ment Verze IE
<!--[if IE 6]> Jen verze 6.
<!--[if gt IE 6]> Verze no­vě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 oprav­ných CSS kó­dech je ob­čas nutné po­u­žít klau­zuli !im­por­tant, která za­jistí, že ne­bude hod­nota CSS vlast­nosti pře­psána. Pod­mí­něné ko­men­táře se dají vyu­žít na­pří­klad k si­mulaci po­si­tion: fi­xed pro IE 6. Velmi sil­nou zbraní jsou také dy­na­mické CSS vlast­nosti do­stupné jen v re­ži­mech Quirks a IE7 Stan­dards.

Přepínání box modelu

V CSS3 je jedna uži­tečná vlast­nost box-si­zing. Na­sta­ve­ním její hod­noty na bor­der-box lze do­cí­lit toho, že se ve­li­kost ele­mentu bude po­čítat stejně, jako v Quirks re­žimu In­ter­net Ex­plo­reru. Fun­guje to v re­ži­mech IE8 Stan­dards i IE9 Stan­dards a do­konce i v pro­hlí­že­čích Opera od verze 7 a Konque­ror od verze 3.3.2. Ve Fi­re­foxu je nutné po­u­žít -moz-box-si­zing a v Sa­fari a Chrome pak -web­kit-box-si­zing. Hod­nota vlast­nosti zů­stává stejná.

Web se vy­víjí a jeho stan­dardy stále zpřes­ňují. Stan­dard totiž není pro­hlá­šen za ho­tový, do­kud ne­e­xis­tují dvě ne­zá­vislé im­ple­men­tace a velká sada testů. Tím se je­jich im­ple­men­tace ve we­bo­vých pro­hlí­že­čích roz­chází a je třeba je upra­vo­vat. HTML, CSS, DOM mají své vlastní ver­zo­vání, EC­MAScript do­konce spra­vuje úplně jiná or­ga­ni­zace. To nej­stá­lejší, co bylo, byl Quirks re­žim. U něj byla jis­tota, že se stránky správně zob­razí na nej­šir­ším spek­tru různých za­ří­zení. Proto jsou pro něj na­psány mi­li­ony strá­nek. Vě­řím, že jeho roli v ná­sle­dují­cích le­tech po­stupně pře­vezme HTML5.