Návrat modrého é

Autor: 29

Chamurappi 11. 10. 2006

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?

Doba čtení: 10 minut

51 názorů

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“.

Vykreslovací režimy

Nejzásadnější změny v pojetí CSS souvisí se standardním vykreslovacím režimem:

Funguje poměrně hodně doposud nepodporovaných vlastností a selektorů.
Nově jsou některé vlastnosti interpretovány podle stávajícího návrhu CSS 2.1.
Nefungují nejznámější CSS hacky.
Explorer se do standardního režimu přepne i tehdy, začíná-li stránka na <?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.

Chcete podpořit svoji oblíbenou službu na českém Internetu? Rádi byste dali provozovatelům webů najevo, že jim fandíte? Pak neváhejte a hlasujte v anketě Křišťálová Lupa 2006! Až do 31. října 2006 můžete ovlivnit, které projekty si budou přebírat ocenění pro vítěze pro tento rok. Navíc získáte roční licenci k bezpečnostnímu balíku od společnosti AEC a můžete vyhrát i některou z 50 hodnotných cen.

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:

Vliv `<!doctype>` deklarace na vykreslovací režimy prohlížečů
	Začátek kódu	Explorer 6	Explorer 7	Ostatní
(A)	<!doctype html>	Standard	Standard	Standard
(A)	<html> …	Standard	Standard	Standard
(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.
Neuvedený <!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"?>
Komentář  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 ©.

Nové hračky

Pojďme si společně projít novinky. Změny vztahující se výhradně ke standardnímu režimu značím [S].

Alfakanál PNG obrázků.
Stále zlobí gamma korekce, obrázky bývají tmavší. Pro stejný vzhled napříč prohlížeči je třeba odstranit „gAMA“ chunk.
Podpora starého užvaněného řešení pomocí filter: AlphaImageLoader() nebyla odebrána.
[S] CSS vlastnosti min/max – width/ height.
Podpora výpočtů pomocí expression() nebyla odebrána.
[S] Upravená CSS vlastnost overflow.
Rozměry width a height se již nezvětšují podle potřeby.
CSS pseudotřída :hover na (víceméně) všech elementech.
Podpora HTC behaviorů nebyla odebrána, emulace :hover u pomocí hover.htc nezlobí.
Můžete jednodušeji vytvářet nepřístupná hover menu, na nichž si uživatel bez myši neškrtne.
Upraveno fixní pozadí.
Nyní je fixní vzhledem k oknu, nikoliv vzhledem k samotnému elementu.
Fixní pozicování
Vylepšení absolutního a relativního pozicování.
Procentuální rozměry jsou vypočítávány lépe.
Lepší plavecké schopnosti — opravy float konstrukcí.
Všechny slavné chyby popsané v Explorer Exposed! byly opraveny, až na jednu, která se již zobrazuje jinak špatně než dříve.
Vzniklo pár nových nečekaných chyb, třeba Zmizík.
[S] CSS selektor přímého potomka.
[S] CSS selektory atributů.
Na rozdíl od Mozilly a Opery bere v úvahu i výchozí hodnoty atributů, tedy input[type="text"] potrefí i <input> bez uvedeného atributu type.
V případě selektoru input[value="něco"] nezohledňuje uživatelskou změnu hodnoty prováděnou uživatelem. Stejně jako Mozilla a Opera.
Nefunguje výběr elementů podle existence některých atributů. Zejména (možná pouze) u formulářů, paradoxně zrovna input[type].
Selektor pro mezerami oddělené hodnoty považuje za mezery všechny bílé znaky, nikoliv jen mezery. Stejně jako v Mozille a na rozdíl od Opery.
[S] CSS 3 selektory atributů.
[S] CSS selektor nejbližšího následujícího sourozence.
Element <html> je sourozencem čehosi, funguje selektor * + html
To cosi je komentář. Či spíše <!doctype>, který se však v DOMu (nejen sedmičky) tváří jako komentář. Podivnost.
Takže pozor: I komentáře se chovají jako předcházející sourozenci.
[S] CSS selektor libovolného následujícího sourozence.
Rovněž bere komentáře jako sourozence.
[S] CSS pseudotřída :first-child.
Element <html> není považován za prvního potomka, stejně jako v Mozille a na rozdíl od Opery.
Prvním potomkem je totiž v Exploreru komentář (resp. <!doctype>).
[S] Element <html> je stylován nezávisleji na <body>.
Chytřejší vlastnost font-family.
Místo znaků, které v jednom zadaném písmu nejsou, se pokusí zobrazit znaky z dalšího zadaného písma, nikoliv čtverečky.
Doopravdy tečkovaný okraj.
Jednopixelové dotted okraje vypadají jako tečkované, nikoliv jako čárkované.
Umravněný <select>.
Necpe se drze na výsluní před všechny elementy, vždy ctí z-index.
Element <abbr>.
Konečně se můžeme pořádně pohádat, co je akronym a co zkratka.
Nativní JS třída XMLHttpRequest .
Nefunguje prototypování.
Podpora pro ActiveXObject("Microsoft.XMLHTTP") nebyla odebrána.
Podpora pro mezinárodní doménová jména (IDN).

Standardy, standardy, hacky, standardy, hacky a hacky

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í:

Syntaktické „ošklivosti“
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ářů.

Kyselý obličej Acid2

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:

Užitečné věci, po nichž (téměř) všichni webmasteři touží:
Alfakanál PNG — podporuje.
Kompatibilnější interpretace plovoucích a pozicovaných prvků — zlepšil se, trošku.
Vlastnosti min/max- width/height, fixní pozicování — podporuje.
Pokročilé selektory — podporuje.
Pseudotřída :hover mimo odkaz — podporuje.
Užitečné věci, po nichž bytostně prahne jen hrstka lidí, zbytek je nezná či nepotřebuje:
Pseudoprotokol data: — nepodporuje. Proto čelo a brada nejsou žluté a chybí oči.
Korektní fallback elementu <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čí.
Pseudoelementy :before a :after — nepodporuje. Proto zlobí nos.
Tabulková rodina hodnot display — nepodporuje. Proto visí z brady cosi černého (seznam).
Hodnota inherit u všech CSS vlastností — nepodporuje. Proto se smajlík neusmívá.
Neužitečné věci, po nichž ani pes neštěkne:
Korektní HTML komentáře — nyní testovanou konstrukci podporuje.
Korektní ukončení odstavce tabulkou — nepodporuje. Proto je na vrchu hlavy tmavá skvrna (nenápadný hold Gorbačovovi).
Přístup k nevalidnímu stylopisu podle CSS 2.1 (CR 02/2004) — viz výše zmíněná pitva hacků. Proto má smajlík růžovou bradu.
Separátní interpretace vztahů odkazů, třeba <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í.

Nesplněná přání

Co by bylo fajn, kdyby nový Explorer ještě podporoval:

Stylování všech elementů, včetně těch, které oficiálně nezná. Příklad:
Nativní element <canvas> . (Existují různé implementace pomocí JS.)
CSS 3 vlastnost box-sizing na přepínání box modelů.
CSS pseudotřídu :focus .
Prototypování HTML elementů v JavaScriptu.
Jednotkyvw avh z návrhu CSS 3.
Příznivce vektorové grafiky by potěšila nativní podpora SVG. Nyní si v Exploreru musí vystačit s původním VML.

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.

Závěr

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.