Návrat modrého é
Chamurappi – 11. 10. 2006 6:30
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“.
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:
| 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. - 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 (C).
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
widthaheightse již nezvětšují podle potřeby. - CSS pseudotřída
:hoverna (víceméně) všech elementech. - Podpora HTC behaviorů nebyla odebrána, emulace
:hoveru 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
floatkonstrukcí. - 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 atribututype. - 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é
dottedokraje 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í:
| 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
:hovermimo 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
:beforea:after— nepodporuje. Proto zlobí nos. - Tabulková rodina hodnot
display— nepodporuje. Proto visí z brady cosi černého (seznam). - Hodnota
inheritu 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-sizingna přepínání box modelů. - CSS pseudotřídu
:focus. - Prototypování HTML elementů v JavaScriptu.
- Jednotky
vwavhz 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.
<style>
footer { border-top: 2px solid #C00; }
</style>
<body>
Tento element pochází z HTML 5:
<footer>© Etemenanki Unlimited</footer>
</body>
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.
Workshop uživatelského testování použitelnosti
- Dokonalý web sám od sebe nikdo nevymyslí.
- Otestujte své řešení se skutečnými uživateli.
- Naučíme vás, jak testovat rychle, levně a efektivně.
- Během testování může moderátor udělat desítky chyb - vyvarujte se jich
Anketa
Optimalizujete už nyní svůj web pro IE 7?
Související texty
- Závody prohlížečů pokračují: MSIE brzdí, Firefox zrychluje 26. 6. 2006
- Předvolební weby politických stran mají řadu nedostatků 17. 5. 2006
- Jaké služby můžeme čekat od obecních webů? 13. 4. 2006
- Internet Explorer 7: dostupný a testovaný 26. 1. 2006
Reklama
Další články v rubrice Webdesign
Vodafone_CZ na 
Vodafone_CZ: @Milan_Dasek Dobrý den,
pro nás je důležité, jak jsme na tom ve srovnání s našimi tuzemskými... více: http://cli.gs/zbmpg
18. 3. 11:50
Vodafone_CZ: @Kasp1k Dobrý den.
V současnosti probíhají jednání mezi Vodafone a Google na globální úrovni. Jakmile... více: http://cli.gs/UeLAH
18. 3. 11:41
Vodafone_CZ: @adamkopp Dobrý den,
Optimalizace prostřednictvím služby Bez obav funguje v podstatě jako dodatečná... více: http://cli.gs/gmJVD
18. 3. 11:38
