Dajbych.net


Novinky v Internet Exploreru 10

, 18 minut čtení

In­ter­net Ex­plorer 10 umí rozdělit text od­s­tavce do sloupců a slova au­to­mat­icky rozdělit po­dle slovníku pře­jatého z Mi­crosoft Of­fice. Dokáže poz­i­co­vat el­e­menty po­dle Gridu ste­jně jako ve WPF. Pod­poruje databá­zové uk­ládání dat i otevřené spo­jení se serverem. Nechybí ani API pro uk­ládání a otevírání souborů. Min­ulá gen­er­ace měla jako záruku mul­ti­plat­form­nosti POSIX. Dnešní má HTML5.

In­ter­net Ex­plorer 10 je we­bový proh­lížeč, je­hož já­dro ren­deruje ne­jen we­bové stránky, ale i Metro-style ap­likace. Jeho vývoj plynule pokračuje z předešlé verze. Po prvních dvou Plat­form Pre­view desítky se ob­jevila třetí ve Win­dows De­vel­oper Pre­view. Finální verze bude vy­dána společně s Win­dows 8 na podzim roku 2012. Většina funkcí je však vývo­jářům dos­tupná již dnes.

Flash

In­ter­net Ex­plorer má zabu­dovaný Adobe Flash Player. Jeho im­ple­men­tace je oproti ref­erenční výkonově op­ti­mal­i­zo­vaná a upravená pro po­hodlné ovládání dotyky. Vy­chází z desk­topové im­ple­men­tace, ne z mo­bilní podm­nožiny. Přesto bude pod­porován i na zařízeních s pro­ce­sory ARM. Mi­crosoft pomáhal Adobe od­s­tranit řadu bezpečnos­t­ních zran­itel­ností a náchyl­ností k pádu, kterými Flash tr­pěl. Tato im­ple­men­tace je použita i v Aeru, kam se již ne­musí in­stalo­vat sep­arátní plug-in.

Zatímco v Aeru půjde Flash na všech stránkách, v Metru jen a pouze na těch, které jsou uve­deny v Com­pat­i­bil­ity View Listu. Aby byl web zařazen do to­hoto sez­namu, musí ob­sah stránky ve Flashi reago­vat na dotyk, musí dobře pra­co­vat s kláves­nicí zo­brazenou na dis­pleji a nesmí provádět složité výpočty, aby se šetřila ba­terie zařízení.

API

Animation Frames

Ani­mace, které se odehrá­vají pos­tup­nou změ­nou poz­ice el­e­mentu vyvolanou přes set­Time­out mají tu nevýhodu, že se velká část změn ne­musí ani vykres­lit. Zbytečně se tak vytěžuje CPU a vy­bíjí ba­terie. Proto se zavádí me­toda re­ques­tAn­i­ma­tion­Frame která se liší od set­Time­out přede­vším tím, že čas vy­buzení závisí na frekvenci dis­pleje zařízení. Navíc v pří­padě něko­lika an­i­mací současně může proh­lížeč všechny změny provést naráz. A pokud není záložka ak­tivní, an­i­mace se vůbec ne­provádí.

File Reader

Práce se soubory zna­me­nala vždy upload souboru na server. To už ne­musí platit, pro­tože pře­tažením souboru do okna proh­lížeče nebo přes in­put typu text je možné ze souboru číst v tex­tovém nebo binárním režimu.

var file = document.getElementById('file').files[0]; var reader = new FileReader(); reader.onload = loaded; reader.readAsText(file, 'UTF-16'); function loaded(evt) { var fileString = evt.target.result; }

File Saving

Ob­jekty reprezen­tu­jící soubory jako File či Blob bude možné snadno uložit do počí­tače. Do teď je možné uk­lá­dat soubory jen jako ob­s­loužení poža­davku s hlav­ičkou, kterou proh­lížeč neumí otevřít. Nyní je možné uložit jako sou­bor data, která ani ne­musí být na serveru, ale pouze v paměti proh­lížeče.

Gesture Events

Win­dows se stará o vešk­eré výpočty sou­vise­jící s gesty a posky­tuje rov­nou je­jich výsledky. Lze se tedy přih­lásit přímo k od­běru událostí pro gesta MS­Ges­ture­Tap, MS­Ges­ture­Dou­ble­Tap a MS­Ges­ture­Hold. Pro složitější zpra­cování gest slouží události MS­Ges­tureStart, MS­Ges­tureChange a MS­Ges­tureEnd. Ty posky­tují přesné údaje o hyb­nosti, úhlu otočení nebo vek­toru po­sunu.

document.addEventListener("MSGestureChange",logGesture,false); var log = document.getElementById("log"); function logGesture(event) { var gesture = "Translation: " + event.translationX + "px, " + event.translationY + "px<br>"; gesture += "Scale: " + event.scale + "x<br>"; gesture += "Rotation: " + event.rotation*360/Math.PI + " deg<br>"; gesture += "Velocity: " + event.velocityX + ", " + event.velocityY; log.innerHTML = gesture; }

Hit Testing

Web De­vel­oper Tools umožňují kliknutím na prvek stránky zo­brazit jeho zdro­jový kód. Vi­sual Stu­dio to bude umět také, jen s tím rozdílem, že ukáže zdro­jový kód, který generuje HTML přís­lušného prvku. Aby to fun­go­valo se všemi proh­lížeči, je snaha toto API stan­dardi­zo­vat.

IndexedDB

Z původ­ních plánů zvolit re­lační databázi SQL­Lite za hlavní databázi HTML5 naštěstí sešlo a zvítězil rozum­nější ná­pad vy­brat ob­jek­tovou databázi In­dexedDB. Není proto nutné složitě mapo­vat data na ob­jekty, pro­tože databáze uk­ládá javascrip­tové ob­jekty přímo. Místo tab­ulek se použí­vají ob­ject stores. Slouží ale ke ste­jnému účelu. Ste­jně jako re­lační kole­gové mají také in­dexy, in­dex­u­jcí vlast­nosti nebo me­tody ob­jektů. Každý ob­jekt má svůj jed­noz­načný iden­ti­fiká­tor. Ten se nas­tavuje v in­dexu vlast­ností key­Path. Dotaz na data vy­padá ně­jak takto:

var oRequestDB = window.indexedDB.open("Library"); oRequestDB.onsuccess = function (event) { db1 = oRequestDB.result; if (db1.version == 1) { txn = db1.transaction(["Books"], IDBTransaction.READ_ONLY); var objStoreReq = txn.objectStore("Books"); var request = objStoreReq.get("Book0"); request.onsuccess = processGet; } };

Nic jako LINQ bo­hužel pod­porováno není, a tak se musíme smířit s dota­zováním na konkrétní ob­jekt (jako v přík­ladu výše), fil­trací, nebo iterováním in­dexem.

Page Visibility

Nová událost vis­i­bil­i­ty­change ob­jektu doc­u­ment je užitečná napřík­lad v pří­padě, kdy uži­va­tel přehrává video a přepne na ji­nou záložku. V tu chvíli je možné na událost zareago­vat a přehrávání videa pozas­tavit, aby se zbytečně nezatěžo­val server, když uži­va­tel video ste­jně nev­idí.

Pointer Events

Události pro myš i dotyk byly sjed­no­ceny do čtyř zák­lad­ních událostí MS­Poin­t­erOver, MS­Poin­t­er­Out, MS­Poin­t­er­Hover a MS­Poin­t­er­Can­cel pro ztrátu kon­taktu (což se s myší nikdy nemůže stát, leda je­jím vy­po­jením z USB). Kvůli zpětné kom­pat­i­bil­itě proh­lížeč vyvolá ještě od­poví­da­jící události pro myš. Pro zjištění, zda proh­lížeč pod­poruje gesta, ex­is­tuje vlast­nosti win­dow.nav­i­ga­tor.ms­Poin­t­er­En­abled.

Multi-File Upload

Jak známo, di­a­log pro otevření souboru může sloužit k výběru buď jed­noho, nebo více souborů. Pro web však nešel více­souborový režim použít. I na to myslí speci­fikace HTML5 a zavádí je­den in­put na více souborů:

<form action="#" method="post" enctype="multipart/form-data"> <input name="uploads[]" type="file" multiple> <input type="submit"> </form>

Resource Timing

Toto API slouží k přes­nému měření doby, která uběhla mezi načítáním sle­dovaných částí stránky (napřík­lad obrázků).

WebSockets

HTTP je pro­tokol pro we­bové stránky, ne we­bové ap­likace. Klient si řekne o data a server mu je pošle. Není možné, aby server plynule posílal data klien­tovi, nebo naopak. Prob­lém sice jde do určité míry obe­jít, ale způ­sobuje velké složi­tosti na straně serverových clus­terů.

Web­Socekts je pro­tokol, který byl navržen pro současný web. Počítá s fire­wally a proxy, pod­poruje TCP i SSL a už samotný pro­tokol se stará o to, aby bylo obous­tranné spo­jení udržováno živé po­mocí Ping/Pong. Má to i tu výhodu, že se server dozví o tom, že klient ztratil spo­jení. Pro­tože proxy pro­jde jen HTTP pro­tokol, je spo­jení nava­zováno ne­jprve HTTP pro­tokolem a až později do­jde k přep­nutí na Web­Sockets. Každá zpráva v pro­tokolu má určen typ přenášených dat (text, Blob, atd.).

var url = "ws://domain.com/ocr/handler.ashx"; var websocket = new WebSocket(url); websocket.onmessage = function(event) { if (event.data instanceof String) { var text = event.data; } } if (socket.readyState == WebSocket.OPEN) { var canvas = document.getElementById('canvas'); websocket.send(canvas.msToBlob()); }

Na straně serveru ve jmen­ném pros­toru Mi­crosoft.Web.Web­Sockets je třída Web­SocketHan­dler, ze které lze podědit vlastní Gen­ric Han­dler a po­hodlně ob­s­luho­vat pro­tokol Web­Sockets.

Web Workers

Pro­tože je vešk­erý JavaScript vykonáván v UI vlákně, je nevhodný pro náročné výpočty. Ostatně pro ně ani nebyl navržen. Pro výpočty na pozadí slouží Web Work­ers. Aby však nebylo nutné řešit velmi nároč­nou syn­chro­nizaci mezi více vlákny a DOM, nemá kód vykoná­vaný na pozadí k DOM přístup. Jed­iná šance ovlivnit DOM je poslat zprávu do UI vlákna a z něj požadovanou změnu provést.

XmlHttpRequest Level 2

Přibyly události on­load­s­tart, on­progress, on­abort, on­error, on­load, on­time­out a on­loadend, které mají zpří­jem­nit současné zjišťování, co že se to vlastně po vyvolání události on­readys­tat­e­change stalo. Další novinkou je možnost nas­tavit time­out i jedn­oduše zjis­tit průběh odesílání poža­davku k serveru. Aby bylo možné snadno přenášet soubory, je možné odesílat i ob­jekty typu Ar­ray­Buffer, Blob, File a For­m­Data. Dále je možné nas­tavit, aby byl poža­davek anonymní. V tom pří­padě se neb­u­dou odesílat re­fer­rer, ori­gin, ani cre­den­tails. Navíc je možné odesílat data i na server v jiné doméně.

CSS3

3D Transforms

Trans­for­mace nemá vliv na ro­zložení stránky. Oz­načování textu, ste­jně jako for­mulářové prvky, reagují stále ste­jně i po je­jím použití. Po rotaci kolem ně­jaké osy jde určit i hloubka per­spek­tivy. Vy­bavu­jete si film Star Wars a žlutý text na jeho začátku? Není to nic, co by nešlo udělat po­mocí CSS3 3D trans­for­mací. El­e­ment video se překryje od­s­tavcem, který se otočí kolem osy X a zároveň se nas­taví poměrně velká hloubka per­spek­tivy. Jak na po­sun textu se dočtete pod nad­pisem Tran­si­tions.

Animations

Na rozdíl od Tran­si­tions, které jsou vykonány hned, jak se změní CSS hod­nota, přiřazuje se an­i­maci přes vlast­nost -ms-an­i­ma­tion-name jméno, po­mocí kterého se spouští přes JavaScript. An­i­mace má klíčové rámce, ve kterých se defin­uje vždy určitá CSS vlast­nost. Rychlost an­i­mace v závis­losti na čase se dá defi­no­vat vlastní funkcí jako Bezierova křivka, takže k tomu stačí jen 4 čísla.

Background & Borders

Vlast­ností back­ground-clip a je­jími hod­no­tami bor­der-box a con­tent-box lze určit, jestli bude rá­mování el­e­mentu průh­ledné vůči barvě pozadí nebo barvě el­e­mentu.

Content Flow

Pokud ně­jaký el­e­ment, typ­icky obrázek, zasahuje do el­e­mentu s tex­tem, text ho obteče. Ne, že by obrázky nešly tex­tem obtékat již nyní. Ale v pří­padě, kdy máte více sloupců a obrázek širší, než slou­pec, už tuto vlast­nost potře­bu­jete.

Exclusions

Obtékaný text vždy počítá s obtékáním ve tvaru ob­dél­níka. Obtékání di­voče­jších tvarů je ale mimo zásady do­bré ty­pografie. Nicméně to jde. Je možné defi­no­vat prázdný div, kterému se určí tvar, ve­likost a na­točení. Po jeho umístění se do textu vymezí oblast pro obtékání.

Flexbox

Flexbox slouží pro jedn­oduché ro­zložení prvků, které mají zabírat celý pros­tor a přizpů­sobo­vat se jeho ve­likosti. Dá se dobře použít napřík­lad pro zo­brazení ikon složek nebo souborů. Ap­likuje se nas­tavením hod­noty box vlast­nosti dis­play. Následně jde nas­tavit dalších osm vlast­ností sou­vise­jících s flexboxem. Všechny mez­ery mezi jed­notlivými boxy jsou ro­zloženy rovnoměrně jak ve svis­lém, tak i vodorovném směru.

Gradients

Vlast­nost back­ground-im­age vždy měla jedi­nou mys­litel­nou hod­notu url s parame­trem směřu­jícím k obrázku. Pro­tože velká část obrázků stránky jsou jen gra­di­enty, lze nyní místo url použít i hod­notu -ms-lin­ear-gra­di­ent a parame­try gra­di­ent určit. Pod­pora průh­led­nosti už je samozře­j­mostí. Pre­fix je zatím nutný, pro­tože pra­covní skupina speci­fikace má stále zapotřebí měnit výz­nam pořadí parametrů.

Grid Layout

Máte rádi sys­tém poz­i­cování prvků z WPF ap­likací a štve vás, že to ne­jde použít i pro HTML? Tak už to jde. V pod­s­tatě jde snadno docílit toho, co se dříve řešilo tab­ulkami. Rozřezat oblast a určitým sloupcům či řád­kům nas­tavit buď stálou ve­likost v pix­elech, nebo ve­likost závise­jící na ve­likosti celé oblasti.

Hyphenation

In­ter­net Ex­plorer 10 bude umět rozdělení textu do sloupců. S tím sou­visí i dělení slov, které IE10 pod­poruje i au­to­mat­icky. Posky­tuje ho služba Win­dows pro práci s tex­tem, která byla pře­jeta od Mi­crosoft Of­fice. Pokud tedy nas­tavíte <html lang="cs">, bu­dou česká slova dělena správně po­mocí slovníku, který se nacházel v Mi­crosoft Of­fice. Příznivce LaTeXu určitě potěší, že je možné určit i ne­jvyšší počet řádků, na kterých se po sobě může nacházet rozdělené slovo. Osamo­cená pís­mena jsou pod kon­trolou také.

Multi-column Layout

V roce 1996 bylo možné v Nets­cape 3 použít tag MUL­TI­COL (tenkrát bylo ještě zvykem psát tagy velkými pís­meny) a rozdělit tak text do více sloupců. Nyní je možné v IE10 po­mocí CSS docílit téhož. Navíc je ale možné nas­tavit au­to­mat­ický počet sloupců, což je dnes pro zařízení s ne­jrůznější ve­likostí dis­pleje velmi užitečné. Vykreslení svislé čáry mezi sloupci, která je od­děluje, je záleži­tostí jed­iné CSS vlast­nosti col­umn-rule. Hod­no­tou bal­ance vlast­nosti col­umn-fill lze nas­tavit ste­j­nou výšku všech sloupců.

Panning

Pokud se nas­taví over­flow na scroll, lze po­mocí vlast­nosti -ms-over­flow-style nas­tavo­vat, jak se má rolování pro­jevo­vat. Hod­nota -ms-au­to­hid­ing-scroll­bar nas­taví scrollbary tak, že bu­dou viditelné jen pokud je kur­zor poblíž nich. Hod­nota auto zviditelní scroll­bary v In­ter­net Ex­ploreru a schová jev Metro style ap­likaci. Posou­vání ob­sahu gestem je po­v­oleno vždy.

Regions

Pro ro­zložení textu stylem známým z ča­sopisů slouží re­giony. Jedná se o v pod­s­tatě o over­flow: hid­den s tím, že ob­sah, který už přetéká a je skrytý, se zo­brazí v jiném el­e­mentu. Dá se tak docílit plynulého přetékání textu přes něko­lik el­e­mentů.

Transitions

Jak bylo zmíněno u 3D Trans­forms, posou­vání žlutého textu ve filmu Star Wars jde defi­no­vat velmi snadno. Stačí změnit ně­jakou vlast­nost CSS a určit, za jak dlouho se pro­jeví a jakou rychlostí vůči času má děj probíhat. Konkrétně tedy po změně hod­noty trans­late3d vlast­nosti -ms-trans­form3d el­e­mentu s vlast­ností -ms-tran­si­tion se bude změna provádět plynule, takže se bude celý text po­malu posou­vat hlouběji do ves­míru.

Text Shadow

Je jedna z ne­jžá­danějších funkcí. Patří však mezi ty ne­jvíce prob­lem­at­ické. Všechny verze In­ter­net Ex­ploreru až do verze 8 vykreslo­valy přes GDI+. Verze 9 však vykres­luje přes Di­rectX, ste­jně jako WPF. A vzpomeňme na vývoj WPF, kde ne­jvětší prob­lém byl právě vykreslování písem. Byla to jed­iná věc, která prak­ticky bránila WPF použí­vat, až do doby kdy bylo vykreslování písem pře­sunuto přímo do Di­rectX pod názvem Di­rectWrite. Ani to však nes­tačilo. Text Shadow v po­jetí CSS umí hodně a tomu všemu se musel Di­rectWrite přizpů­so­bit. Stínu lze totiž nas­tavit svislý i vodorovný od­stup, in­ten­z­itu, ostrost a co se týče barvy, jde defi­no­vat gra­di­ent něko­lika barev. Není proto divu, že vše tr­valo tak dlouho. Čekání ale stálo za to. Vše se totiž odehrává na GPU.

Snap Points

Pro ob­sah, který přetéká el­e­ment, jdou nas­tavit záchytné body, mezi kterými se bude ob­sah posou­vat. Lze to využít přede­vším k zo­brazení sady obrázků, které jsou umístěny vodorovně za se­bou, a není užitečné, aby byla zo­brazena půlka z každého ze soused­ních obrázků. Místo toho se dá jedn­oduše gesty posou­vat z jed­noho obrázku na druhý.

Zooming

Nová vlast­nost -ms-con­tent-zoom­ing s hod­no­tou zoom do­voluje gesty zvětšo­vat a zmenšo­vat el­e­ment. Nezvětšuje ani nez­menšuje se tak celá stránka, ale jen její část. To je žá­doucí napřík­lad v mapách, kde uži­va­tel chce typ­icky při­blížit urči­tou oblast a neočekává zvětšení ovlá­dacích prvků okolo mapy.

HTML5

Application Cache

Za dob, kdy in­ter­ne­tovými vo­dami brázdily In­ter­net Ex­plor­ery 4, a počátek každé plavby do­provázela melodie mode­mového vytáčení, ex­is­to­valy kanály, kde we­bové stránky fun­go­valy, i když byl počí­tač of­fline. Pra­co­valo se s tím tak, že jste se připo­jili, rychle stáhli ak­tu­al­izace kanálů a zase od­po­jili. Teprve potom se v klidu četlo. Kanály byly jako zas­taralé v sedmé verzi In­ter­net Ex­ploreru od­s­traněny, aby se o tři verze dál mohli v podobě Ap­pli­ca­tion Cache zase vrátit. Ne­jedná se totiž o nic jiného, než o sez­nam souborů, které se mají stáh­nout, aby stránka fun­go­vala of­fline.

<html manifest="/cache.manifest">

Async

Atribut async tagu script je velmi podobný atributu de­fer. Liší se od něj jen tím, že není zaručeno, že se bu­dou skripty vykoná­vat ve ste­jném pořadí, v jakém jsou na stránce. Vykon­ají se ihned po stažení a po ses­tavení celého DOM.

<script async src="script.js" onload="Init()"></script>

Drag & Drop

El­e­menty mají atribut drag­gable, který určuje, je-li možné je pře­sou­vat. K reakci na táh­nutí přes el­e­ment nebo spuštění el­e­mentu nad jiným slouží událost dragover re­spek­tive drop. Ne­jza­jí­mavější je však skutečnost, že lze pře­ta­ho­vat i soubory z průzkum­níka do okna proh­lížeče.

var dropArea = document.getElementById('dropspot'); dropArea.addEventListener('drop', dropHandler, false); function dropHandler(event) { var filelist = event.dataTransfer.files; }

Forms & Validation

Kla­sický in­put byl rozšířen o typy email a url. Vlastní typy lze defi­no­vat po­mocí reg­ulárního výrazu v atributu pat­tern. Přibyl atribut re­quired zabraňu­jící odes­lání for­muláře, pokud pole není vy­pl­něno. Pokud je pole vy­plněno chybně, je na něj možné ap­liko­vat styl pseu­dotřídou :in­valid.

History

Vývoj moderních stránek je náročný. Načítání nové stránky při každé změně ob­sahu je po­malé. Dy­nam­ické načítání vešk­erého ob­sahu znemožňuje použití tlačítka zpět. Událost on­hashchange fun­guje, ale pořád to není ono. Až HTML His­tory konečně přináší dy­nam­ickou náhradu za od­kaz.

history.pushState(data, title, url); history.replaceState(data, title, url);

Metody his­tory.push­S­tate a his­tory.re­placeS­tate nahrazují lo­ca­tion.href re­spek­tive lo­ca­tion.re­place. Pro reg­istro­vání události kliknutí na tlačítko zpět či vpřed slouží pop­s­tate.

window.addEventListener("DOMContentLoaded", loadState, false); window.addEventListener("popstate", loadState, false); function loadState() { var data = history.state; }

Parser

In­ter­net Ex­plorer 10 ob­sahuje parser HTML5. Jedná se o stan­dardi­zo­vaný parser, který zpra­covává ne­jen HTML5, ale i HTML3, HTML4 a XHTML1. Con­di­tional Com­ments je možné použí­vat i nadále, ale je možné mířit pouze na starší verze In­ter­net Ex­ploreru.

<!--[if IE]> Tento obsah je zobrazen pouze v Internet Exploreru od verze 5 do verze 9. <![endif]-->

Jed­ním z přínosů nového parseru je op­ti­mal­i­zo­vané vykonávání přiřazení vlast­nosti in­n­er­HTML.

Sandbox

Tag iframe může ob­sa­ho­vat nový atribut sand­box, který říká, že stránka v rámci bude mít zakázaný JavaScript, vešk­eré do­plňky proh­lížeče, tar­get="top" neb­ude účinný a for­muláře bu­dou zapovězené. Jed­notlivá priv­i­le­gia jdou zap­nout, jsou-li potřeba.

<iframe src="iframe.html" sandbox="allow-scripts allow-forms allow-top-navigation"></iframe>

Video Captioning

Tag <video> nyní pod­poruje ti­t­ulky, a sice ve for­mátu TTML (který pod­poruje také Sil­verlight) a We­b­VTT.

<video> <source type="video/mp4" src="video.mp4"></source> <track src="captions.ttml" label="České titulky" kind="captions" srclang="cs-cz" default></track> </video>

SVG

Filter Effects

Vek­torovou grafiku lze obo­hatit o grafické efekty, z nichž ne­je­fek­t­nější je asi osví­cení scény. Vše se počítá, jak je v IE zvykem, na GPU. Lze tím dosáh­nout moc pěkného efektu. Pokud pozadí stránky vykres­líte přes SVG, můžete určité čísti roz­mazat po­mocí fil­tru fe­Gaus­sian­Blur a tím položit zák­lad sk­leněnému pod­k­ladu stránky.