Ladíme pro Internet Explorer
Obsah
Související
Protože různé verze Internet Exploreru interpretují ten samý kód často velmi odlišně, je obtížné dosáhnout jednotného vzhledu stránky ve všech prohlížečích. Existují však cesty, jak upravit kód pro Internet Explorer tak, aby zobrazoval stránky podobně jako ostatní desktopové prohlížeče držící se standardů.
Režim zpětné kompatibility
Jednou z možných zkratek na těchto cestách je ujednotit v IE vykreslovací režim. Přesněji vzato, vynutit si přepnutí IE do režimu zpětné kompatibility alias quirku (z anglického quirks mode). Tím se úspěšně zbavíme novinek z pozdějších verzí, například nepůjde vycentrovat stránku přes margin.
I když přepnutí do quirku není samospásné, může značně zjednodušit práci se stylováním dokumentu. Ve všech verzích IE totiž stránka bude vypadat stejně a budeme se potýkat jen se starými známými chybami. Jak se však do něj dostat? Stačí mít tenhle DOCTYPE:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN“>
Ovšem pokud chceme mít v quirku jen Internet Explorer, správným řešením bude použít HTML 4 Strict a umístit na začátek kódu komentář. Vypadalo by to nějak takto:
<!– začátek HTML kódu –>
<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN“>
<html>
…
U XHTML se ani není třeba obtěžovat pofidérním komentářem. Dáme prohlížečům naprosto běžný XHTML kód i s XML prologem. IE 6 XML prolog nezná a nechá se „shodit“ do quirku. Sedmičková verze ve standardním režimu, přestože zejména její zacházení s plovoucími či pozicovanými prvky budí značné rozpaky, nemá již tolik zásadních implementačních chyb, takže není vyloženě nezbytné se k ní chovat jako k předešlým, navíc bychom se zbavili řady užitečných věcí, například podpory fixního pozicování. Nicméně ta možnost, přivést IE 7 XML prologem do quirku, tady existuje. Spočívá v použití tabulátoru, kterým v XML prologu nahradíme mezeru. Dokumentuje to následující ukázka:
<?xml version=“1.0″ encoding=“utf-8″?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
…
A jak nejjednodušeji zjistit, v jakém módu se stránka nachází? K dispozici je ukázkový bookmarklet. Stačí jej přidat do Oblíbených a ve vhodnou chvíli použít.
Podmíněné komentáře
Následující sdělení zobrazí jen Internet Explorer, který dokáže vyhodnotit v komentáři nestandardní podmínku if IE, ostatní prohlížeče vidí jen normální HTML komentář, jehož obsah se ignoruje.
<!–[if IE]>Internet Explorer je nejlepší!<![endif]–>
Podmínka se nutně nemusí vztahovat na všechny verze IE, lze si vybrat konkrétní verzi:
<!–[if IE 5]>Používáte IE 5. Výborná volba!<![endif]–>
Verze 5.5 by se musela zadat jako 5.5000. Toto čtyřmístné rozpětí za tečkou je nutné pokaždé, když podmiňovaná verze není celé číslo.
Pro efektivnější použití jsou k dispozici zvláštní operátory, které se v podmínce kladou za if. Právě ty z podmíněných komentářů dělají skutečně mocný nástroj oproti různým více či méně spolehlivým skriptům.
| operátor | význam |
|---|---|
! |
negace |
lt |
menší než |
lte |
menší nebo rovno |
gt |
větší než |
gte |
větší nebo rovno |
Následující kód způsobí, že daný skript se načte jen tehdy, když je užitá verze IE menší než šestková:
<!–[if lt IE 6]><script type=“text/vbscript“ src=“virus.vbs“></script><![endif]–>
Následující oznámení Internet Explorer nezobrazí, neboť vidí jen jeden velký podmíněný komentář s podmínkou if !IE, kdežto ostatní prohlížeče vidí dva prázdné uzavřené komentáře, jeden na začátku, druhý na konci, a to, co je mezi nimi, nemají důvod nezobrazit.
<!–[if !IE]> –>Jsi moudrý, že nepoužíváš Internet Explorer<!– <![endif]–>
CSS hacky
CSS není v prohlížečích implementováno zcela shodně, nejvýraznější originalitu vykazuje bezkonkurenčně Internet Explorer. Oněch odlišností se přirozeně využívá k individualizacím uvnitř CSS kódu, nejčastěji pro různé verze IE, k nápravě chyb či nedostatků. CSS hacků je spousta, některé jsou známé více, některé méně. Některé jsou vyloženě nebezpečné a třeba u klientů na mobilních zařízeních může netypická CSS konstrukce vyvolat vážné potíže, dle některých svědectví dokonce i zhroucení celého zařízení.
CSS hacky mohou mít rozličnou podobu, pracovně si je rozdělíme alespoň do čtyř skupin.
Něco ze syntaktických hacků
Syntaktické hacky se příliš nedoporučuje používat. Jednak se pak kodér nemůže pochlubit validním kódem, ale především zde existuje teoretické nebezpečí, že některý prohlížeč takový zápis nebude umět odpovídajícím způsobem zpracovat.
div.box {_width: 10em; #min-height: 10em}
Mít na začátku podtržítko nebo spojovník je vyhrazeno jen proprietárním vlastnostem nebo proprietárním klíčovým slovům, mřížka není povolena vůbec. Internet Explorer proto tyto znaky přehlížel a deklaraci zpracoval. Ovšem specifikace hovoří v tom smyslu, že vadné deklarace se mají ignorovat celé. Mírná změna přišla až se sedmou verzí. IE 7 ve standardním režimu dovoluje vlastnostem začínat na podtržítko či pomlčku. Vlastnost, která začíná podržítkem, například _cursor, však nezná, a tudíž ji nepřijme. Další znaky nenáležící do alfanumerické množiny jako !@#$%^&<>©/ ale před názvem vlastnosti stále nevidí, takže se dá použít například *cursor.
Je-li na konec deklarace připojeno !important, neměla by takováto deklarace být přepsatelná obyčejnými deklaracemi následujícími po ní. Pro vývojáře IE tato zapeklitost představuje nesmírnou obtíž, kterou se jim doposud nepodařilo uspokojivě vyřešit. Velkého úspěchu dosáhli v IE 7, kde !important už funguje, jenže…
div.box {color: brown !important; color: violet !important!; color: orange !hack}
Kdyby IE dostál specifikacím, ignoroval by poslední dvě deklarace a zvolil hnědé písmo. IE však uzná úplně všechny. Pro IE 7 bude určující ta prostřední, protože také obsahuje !important (dalšího vykřičníku na konci si IE 7 nevšimne, všiml by si jen písmen nebo číslic) a jakožto druhá má vyšší prioritu než první. Nižší verze IE na !important nedbají (na ! important však ano), takže aplikují tu poslední deklaraci; !hack (lze použít i jiný výraz s vykřičníkem na začátku) je bohužel nezastaví.
| Zápis | Interpretace | Funguje |
|---|---|---|
>div |
*>div |
IE7 |
div* |
div * |
IE |
Využití (ne)podpory
Tento typ CSS hacků je založený na zaostávání IE za jinými prohlížeči v implementaci CSS. Lze však předpokládat, že některé z těchto hacků ztratí v další verzi IE svou účinnost.
div.box {mar\gin: 20px; padding/**/: 15px}
Deklarace v předchozím řádku jsou samozřejmě v pořádku. CSS umožňuje escape sekvence i komentáře. IE 5 (u deklarace odsazení i IE 5.5) je však jiného názoru a obě deklarace pro něj nebudou platit. Náprava byla učiněna až v šesté verzi IE.
@import „non-trident.css“ all
IE zatím nepodporuje selektor média u pravidla @import, takže uvedený příklad vyhodnotí celý jako chybný a zavrženíhodný.
| Zápis | Platnost |
|---|---|
body>div |
IE7(S), Opera, Firefox*, Safari, Konqueror |
* html div |
IE7(Q), IE6 a menší |
*+html div |
IE7(S), Opera |
div[class] |
Opera, Firefox*, Safari, Konqueror |
(S) – standardní režim; (Q) – režim zpětné kompatibility
* – nejen Mozilla Firefox, ale i ostatní prohlížeče s jádrem Gecko
Speciální vlastnosti a hodnoty
Jejich výhodou je, že budou s největší pravděpodobností fungovat i v budoucích verzích prohlížeče. Některé mohou být později i standardizovány, příkladem budiž overflow-x a overflow-y. Rozhodně je potřeba zmínit vlastnost behaviour, pomocí níž lze prvku podsunout soubor se skriptem. Skript pracuje s definovanými událostmi, na něž reaguje. Pro IE má takovýto soubor příponu .htc. Trochu jinou úlohu má dynamická hodnota expression (viz následující příklad), kterážto sice také využívá JavaScript, ale permanentně se vyhodnocuje.
width: expression((document.getElementById(„elementID“).offsetWidth > 200) ? „200px“ : „auto“);
Užitečnou věcí v IE je podpora záporných hodnot pro z-index. Dá se tím napozicovat pseudopozadí, stačí jen najít vhodný obrázek.
Workaroundy
Nejedná se v pravém slova smyslu o hacky. Nevyužívají již obskurních nebo do budoucna nejistých konstrukcí, ale požadovaného cíle dosáhnou oklikou. Asi nejznámějším takovým workaroundem je matrjoška, avšak lze najít spoustu dalších, dosti známý je třeba trik na stylování horizontální čáry.
A tady je zase recept na vystouplé tlačítko: border: 2px solid; border-color: barva1 barva2 barva2 barva1;, když nevyhovuje obvykle příhodnější border: 2px outset barva.
Centrování bloků není v IE jednoduchou záležitostí, neboť ve starých verzích (a quirku) chybí podpora pro margin: 0 auto. Nadřazenému elementu se musí proto nadefinovat text-align: center (bude to platit pro text i bloky), avšak zároveň se nesmí zapomenout obsah centrovaného bloku explicitně znovu zarovnat doleva.
Postup
S vyjmenovanými pomůckami lze poměrně snadno napravit i docela velké nesrovnalosti. Obvykle se postupuje tak, že se připraví kód podle standardů, zkontroluje se v takzvaně alternativních prohlížečích (Firefox, Opera, Safari a další), případně se ještě trochu doladí. Poté přicházejí na řadu úpravy pro IE. Obzvláště pokud ladíme i pro vymírající pětkové verze, vyplatí se využít quirku, ale není to nijak zásadní krok. Zato se pravděpodobně nevyhneme použití podmíněných komentářů nebo CSS hacků. Podmíněné komentáře se uplatňují hlavně v souvislosti s kaskádovými styly. Do komentáře se vloží odkaz na sanační CSS soubor a podmínka bude detekovat patřičnou verzi IE.
<!–[if lte IE 7]><link rel=“stylesheet“ type=“text/css“ href=“quirk.css“><![endif]–>
Podmíněné komentáře jsou spolehlivé a přehledné řešení. Mohou být doplněny nebo i nahrazeny hacky, workaroundy. Užitečný, byť zdaleka ne kompletní, seznam vážných chyb IE i s návrhy na jejich optimální řešení sestavil Jaroslav Polakovič.
V zájmu webdesignérů beze sporu je „ohýbat“ kód co nejméně. K tomu může dopomoci větší pečlivost hned na začátku při strukturování kódu. Tam, kde chybí logika, jednoduchost a validita se většinu času jen ladí, ladí a nadává na špatné prohlížeče.
Odkazy a zdroje
- About Dynamic Properties (MSDN)
- CSS Hacks – The good, the bad, and the ugly – Conditional Comments – Hammond, David (JavaScript Kit)
- CSS Hacks – The good, the bad, and the ugly – In-CSS hacks – Hammond, David (JavaScript Kit)
- CSS Hacks – The good, the bad, and the ugly – Unrecommended hacks – Hammond, David (JavaScript Kit)
- DOCTYPE a režimy prohlížečů – Staníček, Petr (WellStyled.com, 31. 5. 2004)
- Implementační chyby v prohlížečích – chybné rozměry boxů – Bien, Jan (Interval.cz, 9. 1. 2004)
- Kouzlo s podmíněným komentářem – Grudl, David (La Trine, 14. 4. 2006)
- Návrat modrého é (Lupa, 11. 10. 2006)
- O šířce prvku, Mozille a matrjošce – Staníček, Petr (Pixylophone, 26. 8. 2003)
- Podmíněné komentáře v Internet Exploreru – Růžička, Pavel (Interval.cz, 18. 1. 2002)
- Quirks mode and strict mode – Koch, Peter-Paul (QuirksMode.org)
- Syntax and basic data types (W3C, 19. 7. 2007)
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Martin Zvarík
Srp 29, 2009 v 13:06Mám IE 6 a interval.cz je rozhozený… zkuste tenhle článek aplikovat ;)
Adam Todt
Pro 5, 2009 v 0:36Martin Zvarík: Tak zkuste ten 2 verze stary prohlizec aktualizovat, je to jako jezdit po dalnici na kole.