Je to již déle než tři roky, kdy byla veřejnost informována o přerušení vývoje Internet Exploreru. Oficiálně započalo období stagnace. A to by mělo za pár dnů skončit. Co to znamená pro webdesignéry?
Strach. Představa, že se nám na trhu vyloupne nový významný hráč, je svým způsobem děsivá. Od roku 2003 sice mnoho lidí nadává na zaostalost vykreslovacího jádra Exploreru 6, ale ve skutečnosti je většina webmasterů s existujícími problémy smířena a umí je řešit/obejít tak, že návštěvník nezávisle na použitém prohlížeči spokojeně mlčí. Ani těch pár procent uživatelů Exploreru 5 není stávajícími stránkami nuceno k modernizaci. Dnešní průměrný webmaster není nekompromisní válečník, ale zlenivělý pacifista.
A teď tomuto lenochovi zaťuká na dveře jeho starý známý v novém obleku, se zbrusu novou povahou a žádá si trochu pozornosti. Nutno podotknout, že návštěva to není zase tak nečekaná. Kdybyste se v létě 2003 zeptali Microsoftu, kdy vydá Explorer 7, obdrželi byste odpověď „přeci v roce 2005, společně s Longhornem“.
Nejzásadnější změny v pojetí CSS souvisí se standardním vykreslovacím režimem:
<?xml něco>.V quirk režimu je také pár drobných změn, které mohou působit problémy, ale vesměs jde o drobnosti související s opravou skutečně nechtěných vykreslovacích chyb. Řešil-li třeba někdo doposud chybu dvojitého marginu nešikovným hackem, kdy Explorerům podstrkoval žádanou hodnotu vydělenou dvěma, narazí na problém: tutéž hodnotu si vezme i sedmička, ale nevynásobí ji, jelikož dvojitý margin ani v quirku nefunguje.
Obecně však platí, že stránky užívající quirk režim jsou mnohem méně ohroženy novými verzemi prohlížečů. Narazíte-li v Exploreru 7 na rozsypaný layout, je skoro jisté, že užívá standardní režim, a pravděpodobně také začíná XML deklarací, s jejíž pomocí autor ladil pro quirk režim Exploreru 6.
Následující tabulka znázorňuje vliv <!doctype> deklarace na vykreslovací režimy v různých prohlížečích:
| Začátek kódu | Explorer 6 | Explorer 7 | Ostatní | |
|---|---|---|---|---|
| (A) | <!doctype html> | Standard | Standard | Standard |
| <html> … | ||||
| (B) | <?xml nepoužívám> | Quirk | Standard | Standard |
| <!doctype html> | ||||
| <html> … | ||||
| (C) | <!-- → | Quirk | Quirk | Standard |
| <!doctype html> | ||||
| <html> … | ||||
| (D) | <html> … | Quirk | Quirk | Quirk |
Pro pořádek ještě podotýkám:
<!doctype html> můžete nahradit za libovolný <!doctype> odkazující na Strict DTD nebo na Transitional DTD s rozepsanou URL. Stručný tvar uváděný v tabulce vyhovuje současným návrhům HTML 5.<!doctype html> můžete nahradit za <!doctype> Transitional DTD bez rozepsané adresy.<?xml nepoužívám> můžete nahradit za libovolnou procesní instrukci začínající na řetězec „xml “ (včetně mezery). Například <?xml version="1.0"?> <!-- --> můžete nahradit za téměř cokoliv. Například <?xml version="1.0"?>, kde čtveřice mezer reprezentuje tabulátor.To se nám to krásně zamotává. Není divu, on totiž <!doctype> jako přepínač režimů není nic víc než obskurní hack. Navzdory vžitým pověrám nemá tato zvyklost prohlížečů nic společného s W3C doporučeními, neexistuje žádné „správné“ nebo „špatné“ přepínání. Deklarace <!doctype> má jediný oficiální účel: odkázat obecný SGML parser (typicky validátor) na DTD. I dokument bez ní (či s jinou) musí fungovat a prohlížeč není oproštěn od povinnosti dodržovat veškeré požadavky aktuální HTML specifikace.
Z nastalé situace vyplývá, že máte-li v Exploreru 7 potíže se svojí stránkou typu (B) a nechcete pátrat po příčinách, mohl by pomoci triviální zásah — přejít na typ ©.
Pojďme si společně projít novinky. Změny vztahující se výhradně ke standardnímu režimu značím [S].
filter: AlphaImageLoader() nebyla odebrána.min/max – width/ height.overflow.width a height se již nezvětšují podle potřeby.:hover na (víceméně) všech elementech.:hover u pomocí hover.htc nezlobí.float konstrukcí.input[type="text"] potrefí i <input> bez uvedeného atributu type.input[value="něco"] nezohledňuje uživatelskou změnu hodnoty prováděnou uživatelem. Stejně jako Mozilla a Opera.input[type].<html> je sourozencem čehosi, funguje selektor * + html <!doctype>, který se však v DOMu (nejen sedmičky) tváří jako komentář. Podivnost.<html> není považován za prvního potomka, stejně jako v Mozille a na rozdíl od Opery.<!doctype>).<html> je stylován nezávisleji na <body>.font-family.dotted okraje vypadají jako tečkované, nikoliv jako čárkované.<select>.z-index.<abbr>.XMLHttpRequest .ActiveXObject("Microsoft.XMLHTTP") nebyla odebrána.Vývojáři odstranili ze standardního režimu podporu řady slavných CSS hacků. Element <html> již nadále nemá rodiče, takže je v souladu s CSS 2 ignorován selektor * html. Zpětná esc\apovací lomítka a /* komentáře */ uvnitř deklarací jsou rovněž interpretovány stejně jako v jiných prohlížečích.
Podtržítkový hack Petra Písaře také Explorer 7 mine. Zotavovací mechanismus při nabourané gramatice zůstal ovšem stejný jako v šestce, takže můžeme snadno najít celou rodinu syntaktických hacků. Jak tento mechanismus funguje: CSS parser nasává postupně stylopis, znak po znaku a v každém momentě má nějakou sestavu povolených znaků. Nasaje-li znak v danou chvíli nepovolený, ignoruje ho. Takže máme-li takovýto zápis:
<style>
menu { _width: 500px; }
</style>
… postupuje Explorer 6 tak, že podtržítko přehlédne, jelikož podle jím očekávané gramatiky není dovolené na začátku názvu vlastnosti. Název vlastnosti začne až znakem „w“, což říkají i specifikace CSS 1.0 a CSS 2.0. Daný řádek nevyhovuje gramatice a žádná dokončená specifikace nedefinuje, co s ním má prohlížeč udělat. Ignorovat musí dle CSS 2.0 totiž jen takové deklarace, jejichž název vlastnosti je neznámý či hodnota je neplatná. Takže stylopis jako celek sice je vadný, ale prohlížeč nepochybí, pokud vadu přehlédne. Nepochybí ani, pokud se z nečekaného znaku zblázní, jak se prý kdysi stávalo v Safari.
Explorer 7 dovoluje vlastnostem začínat na podtržítko či pomlčku, což prý pochytil ze současného návrhu gramatiky CSS 2.1. Výše uvedený řádek vnímá jako pokus o nastavení vlastnosti „_width“, kterou nezná, a tudíž deklaraci ignoruje. Před název vlastnosti ale stále můžeme nacpat spoustu jiných zakázaných znaků, které bude ignorovat:
<style>
menu { !@#$%^&*<>()[]/=width: 500px; }
</style>
Takovýto syntaktický průjem v sedmičce projde. I ve starších Explorerech funguje vykřičníkový hack, zavináčový, mřížkový, dolarový, procentový, stříškový, ampersandový, hvězdičkový, většínežkový, menšínežkový a tak dále. Krása. Hlavně ten rovnítkový je sexy, primitivní jednočárové hacky jsou už jen králíkům pro smích.
Podle zmíněné zotavovací logiky Explorer zbaští i následující pokažený předpis, jelikož znak „}“ nebere jako součást selektoru:
<style>
} menu { width: 500px; }
</style>
Zde je přehled syntaktických ošklivostí a jejich interpretací:
| Původní stylopis: | h1 { _margin: 0px } h2 { =margin: 0px } h3 { (color: red } h4 { );color: blue } ; h5 { float: left } |
|---|---|
| Explorer 6 vidí: | h1 { margin: 0px } h2 { margin: 0px } h3 { color: red } h4 { color: blue } h5 { float: left } |
| Explorer 7 vidí: | h1 { } h2 { margin: 0px } h3 { color: red } h4 { color: blue } h5 { float: left } |
| Mozilla vidí: | h1 { } h2 { } h3 { } h4 { } |
| Opera vidí: | h1 { } h2 { } h3 { } h4 { color: blue } |
| CSS 1 a 2 nařizují: | h1 { /* nedefinováno */ } h2 { /* nedefinováno */ } h3 { /* nedefinováno */ } h4 { /* nedefinováno */ } /* nedefinováno */ |
| CSS 2.1 (WD 04/2006) nařizuje: | h1 { } h2 { } h3 { color: blue } h4 { } /* nedefinováno */ |
Doporučuji „prefixové“ hacky nepoužívat. Ani pro hackování starších Explorerů. Jejich teoretická spolehlivost je mnohem nižší než u strukturálních hacků (třeba * + html) či podmíněných komentářů.
Pozor, chvíle napětí. V testu Acid2 nový prohlížeč Microsoftu…
… zjevně neuspěje. Co všechno se testuje a jak se k požadavkům staví Explorer:
min/max- width/height, fixní pozicování — podporuje.:hover mimo odkaz — podporuje.data: — nepodporuje. Proto čelo a brada nejsou žluté a chybí oči.<object> — podporuje. HTTP kód 404 nepovažuje za důvod k degradaci (říká HTML 4, že by měl?). Druhý důvod chybějících očí.:before a :after — nepodporuje. Proto zlobí nos.display — nepodporuje. Proto visí z brady cosi černého (seznam).inherit u všech CSS vlastností — nepodporuje. Proto se smajlík neusmívá.<link rel="appendix stylesheet"> — nepodporuje. Proto je široširé okolí smajlíka červené.Do poslední skupiny by autoři testu mohli zařadit i prověřování méně známých HTML konstrukcí: třeba zda je zápis <em/obsah/ interpretován stejně jako <em> obsah </em>. Či zda prohlížeč korektně vnímá <hr/> jako <hr>>. Pak by testem neprošlo nic. Žádný rozšířený prohlížeč nemá kompletní podporu HTML 4. Ku prospěchu všech svých uživatelů ani Explorer v tomto ohledu nevybočuje.
Acid2 je tak trochu vybíravý. Sestavili jej Ian Hickson a Håkon Wium Lie. Oba dva tou dobou pracovali pro firmu Opera Software ASA, Håkon v ní dodnes sedí v křesle technického ředitele. Není divu, že v soutěži, jejíž zadání (jakkoliv férové) navrhli její lidé, předstihla své dva největší konkurenty. Kdyby test sestavoval Bill Gates či jiný vysoce postavený orgán Microsoftu, Microsoft by se také mohl přetrhnout, aby uspěl dříve než konkurence.
Ke kuriózní (na WaSPu nedokumentované) úpravě kódu Acidu došlo koncem ledna 2006. Do té doby obsahoval i tyto tři zákeřné komentáře: <!-- -- ---> ERROR <!- ------ >. Každý vyhovující prohlížeč by jim měl porozumět. Hickson nejprve toto pravidlo sedm let prosazoval a letos se rozhodl, že ho raději změní.
Co by bylo fajn, kdyby nový Explorer ještě podporoval:
<canvas> . (Existují různé implementace pomocí JS.)box-sizing na přepínání box modelů.:focus .vw avh z návrhu CSS 3.Některá z těchto přání snad vyplní Explorer 8. Nepřeruší-li Microsoft vývoj, můžeme další novou verzi čekat do dvou let.
Finální verze Internet Exploreru 7 vyjde tento měsíc. Díky zařazení mezi automatické aktualizace vysoké priority zřejmě získá během krátké doby významný tržní podíl. Všechny příjemné inovace již známe. Doufejme, že nepříjemných a nečekaných bude minimum.
Optimalizujete už nyní svůj web pro IE 7?
