Dajbych.net


Novinky v Internet Exploreru 10

, 22 minut čtení

In­ter­net Ex­plo­rer 10 umí roz­dě­lit text od­stavce do sloupců a slova au­to­ma­ticky roz­dě­lit podle slov­níku pře­ja­tého z Micro­soft Of­fice. Do­káže po­zi­co­vat ele­menty podle Gridu stejně jako ve WPF. Pod­po­ruje da­ta­bá­zové uklá­dání dat i ote­vřené spo­jení se ser­ve­rem. Ne­chybí ani API pro uklá­dání a ote­vírání sou­borů. Mi­nulá ge­ne­race měla jako zá­ruku mul­tiplat­form­nosti PO­SIX. Dnešní má HTML5.

In­ter­net Ex­plo­rer 10 je we­bový pro­hlí­žeč, je­hož já­dro ren­de­ruje nejen we­bové stránky, ale i Me­tro-style apli­kace. Jeho vý­voj ply­nule po­kra­čuje z pře­de­šlé verze. Po prv­ních dvou Plat­form Pre­view de­sítky se ob­je­vila třetí ve Win­dows De­ve­lo­per Pre­view. Fi­nální verze bude vy­dána spo­lečně s Win­dows 8 na pod­zim roku 2012. Vět­šina funkcí je však vý­vo­já­řům do­stupná již dnes.

Flash

In­ter­net Ex­plo­rer má zabu­do­vaný Adobe Flash Player. Jeho im­ple­men­tace je oproti re­fe­renční vý­ko­nově op­ti­ma­li­zo­vaná a upra­vená pro po­ho­dlné ovlá­dání do­tyky. Vy­chází z desk­to­pové im­ple­men­tace, ne z mo­bilní pod­mno­žiny. Přesto bude pod­po­ro­ván i na za­ří­ze­ních s pro­ce­sory ARM. Micro­soft po­má­hal Adobe od­stra­nit řadu bez­peč­nost­ních zra­ni­tel­ností a ná­chyl­ností k pádu, kterými Flash tr­pěl. Tato im­ple­men­tace je po­u­žita i v Aeru, kam se již ne­musí in­stalo­vat se­pa­rátní plug-in.

Zatímco v Aeru pů­jde Flash na všech strán­kách, v Me­tru jen a pouze na těch, které jsou uve­deny v Com­pa­ti­bi­lity View Listu. Aby byl web zařa­zen do to­hoto se­znamu, musí ob­sah stránky ve Fla­shi re­a­go­vat na dotyk, musí dobře pra­co­vat s klá­ves­nicí zob­ra­ze­nou na dis­pleji a ne­smí pro­vá­dět slo­žité vý­počty, aby se še­t­řila ba­te­rie za­ří­zení.

API

Animation Frames

Ani­mace, které se ode­hrá­vají po­stup­nou změ­nou po­zice ele­mentu vy­vo­la­nou přes set­Ti­me­out mají tu ne­výhodu, že se velká část změn ne­musí ani vy­kres­lit. Zby­tečně se tak vy­tě­žuje CPU a vybíjí ba­te­rie. Proto se za­vádí me­toda requestA­ni­mati­on­Frame která se liší od set­Ti­me­out pře­de­vším tím, že čas vybu­zení zá­visí na frek­venci dis­pleje za­ří­zení. Na­víc v pří­padě ně­ko­lika ani­mací sou­časně může pro­hlí­žeč všechny změny pro­vést na­ráz. A po­kud není zá­ložka ak­tivní, ani­mace se vů­bec ne­pro­vádí.

File Reader

Práce se sou­bory zna­me­nala vždy upload sou­boru na ser­ver. To už ne­musí pla­tit, pro­tože pře­ta­že­ním sou­boru do okna pro­hlí­žeče nebo přes in­put typu text je možné ze sou­boru číst v tex­to­vém nebo bi­nár­ní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 re­pre­zen­tující sou­bory jako File či Blob bude možné snadno ulo­žit do po­čítače. Do teď je možné uklá­dat sou­bory jen jako ob­slou­žení po­ža­davku s hla­vič­kou, kte­rou pro­hlí­žeč ne­umí otevřít. Nyní je možné ulo­žit jako sou­bor data, která ani ne­musí být na ser­veru, ale pouze v paměti pro­hlí­žeče.

Gesture Events

Win­dows se stará o veš­keré vý­počty sou­vi­sející s gesty a po­sky­tuje rov­nou je­jich výsledky. Lze se tedy při­hlá­sit přímo k od­běru udá­lostí pro gesta MS­Gestu­re­Tap, MS­Gestu­re­Double­Tap aMS­Gestu­re­Hold. Pro slo­ži­tější zpra­co­vání gest slouží udá­losti MS­Gestu­reStart, MS­Gestu­re­Change a MS­Gestu­re­End. Ty po­sky­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­ve­lo­per Tools umož­ňují klik­nutím na pr­vek stránky zob­ra­zit jeho zdro­jový kód. Vi­sual Stu­dio to bude umět také, jen s tím roz­dílem, že ukáže zdro­jový kód, který ge­ne­ruje HTML přísluš­ného prvku. Aby to fun­go­valo se všemi pro­hlí­žeči, je snaha toto API stan­dar­di­zo­vat.

IndexedDB

Z pů­vod­ních plánů zvo­lit re­lační da­ta­bázi SQL­Lite za hlavní da­ta­bázi HTML5 na­štěstí se­šlo a zví­tě­zil ro­zum­nější ná­pad vybrat ob­jek­to­vou da­ta­bázi In­de­xedDB. Není proto nutné slo­žitě ma­po­vat data na ob­jekty, pro­tože da­ta­báze ukládá ja­vascrip­tové ob­jekty přímo. Místo tabulek se po­u­ží­vají ob­jectsto­res. Slouží ale ke stej­nému účelu. Stejně jako re­lační ko­le­gové mají také in­dexy, in­de­xujcí vlast­nosti nebo me­tody ob­jektů. Každý ob­jekt má svůj jed­no­značný iden­ti­fi­ká­tor. Ten se na­sta­vuje v in­dexu vlast­ností key­Path. Do­taz 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­po­ro­váno není, a tak se mu­síme smí­řit s do­ta­zo­vá­ním na kon­krétní ob­jekt (jako v pří­kladu výše), fil­trací, nebo ite­ro­vá­ním in­de­xem.

Page Visibility

Nová udá­lost vi­si­bi­li­tychange ob­jektu do­cu­ment je uži­tečná na­pří­klad v pří­padě, kdy uži­va­tel pře­hrává vi­deo a pře­pne na ji­nou zá­ložku. V tu chvíli je možné na udá­lost za­re­a­go­vat a pře­hrá­vání vi­dea po­za­sta­vit, aby se zby­tečně ne­za­tě­žo­val ser­ver, když uži­va­tel vi­deo stejně ne­vidí.

Pointer Events

Udá­losti pro myš i do­tyk byly sjed­no­ceny do čtyř zá­klad­ních udá­lostí MSPoin­te­rO­ver, MSPoin­te­rOut, MSPoin­terHo­ver a MSPoin­ter­Can­cel pro ztrátu kon­taktu (což se s myší ni­kdy ne­může stát, leda jejím vy­po­je­ním z USB). Kvůli zpětné kom­pa­ti­bi­litě pro­hlí­žeč vy­volá ještě od­po­ví­dající udá­losti pro myš. Pro zjiš­tění, zda pro­hlí­žeč pod­po­ruje gesta, exis­tuje vlast­nosti win­dow.na­vi­ga­tor.msPoin­te­rE­nabled.

Multi-File Upload

Jak známo, di­alog pro ote­vření sou­boru může slou­žit k výběru buď jed­noho, nebo více sou­borů. Pro web však ne­šel ví­ce­sou­bo­rový re­žim po­u­žít. I na to myslí spe­ci­fi­kace HTML5 a za­vádí je­den in­put na více sou­borů:

<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­do­va­ných částí stránky (na­pří­klad ob­rázků).

WebSockets

HTTP je pro­to­kol pro we­bové stránky, ne we­bové apli­kace. Kli­ent si řekne o data a ser­ver mu je po­šle. Není možné, aby ser­ver ply­nule po­sílal data kli­en­tovi, nebo nao­pak. Problém sice jde do ur­čité míry obe­jít, ale způ­so­buje velké slo­ži­tosti na straně ser­ve­ro­vých clus­terů.

Web­So­cekts je pro­to­kol, který byl na­vr­žen pro sou­časný web. Po­čítá s fi­rewally a proxy, pod­po­ruje TCP i SSL a už sa­motný pro­to­kol se stará o to, aby bylo obou­stranné spo­jení udr­žo­váno živé po­mocí Ping/Pong. Má to i tu výhodu, že se ser­ver do­zví o tom, že kli­ent ztra­til spo­jení. Pro­tože proxy pro­jde jen HTTP pro­to­kol, je spo­jení na­va­zo­váno nej­prve HTTP pro­to­ko­lem a až poz­ději do­jde k pře­pnutí na Web­Sockets. Každá zpráva v pro­to­kolu má ur­čen typ pře­ná­še­ný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ě ser­veru ve jmen­ném prostoru Micro­soft.Web.Web­Sockets je třída Web­Socke­tHan­dler, ze které lze po­dě­dit vlastní Ge­n­ric Han­dler a po­ho­dlně ob­sluho­vat pro­to­kol Web­Sockets.

Web Workers

Pro­tože je veš­kerý Ja­vaScript vy­ko­ná­ván v UI vlákně, je ne­vhodný pro ná­ročné vý­počty. Ostatně pro ně ani ne­byl na­vr­žen. Pro vý­počty na po­zadí slouží Web Wor­kers. Aby však ne­bylo nutné ře­šit velmi ná­roč­nou syn­chro­ni­zaci mezi více vlákny a DOM, nemá kód vy­ko­ná­vaný na po­zadí k DOM přístup. Je­diná šance ovliv­nit DOM je po­slat zprávu do UI vlákna a z něj po­ža­do­va­nou změnu pro­vést.

XmlHttpRequest Level 2

Při­byly udá­losti on­lo­ad­start, on­pro­gress, ona­bort, onerror, on­load, on­ti­me­out a on­lo­a­dend, které mají zpříjem­nit sou­časné zjiš­ťo­vání, co že se to vlastně po vy­vo­lání udá­losti onrea­dysta­te­change stalo. Další no­vin­kou je možnost na­sta­vit ti­me­out i jed­no­duše zjis­tit prů­běh ode­sílání po­ža­davku k ser­veru. Aby bylo možné snadno pře­ná­šet sou­bory, je možné ode­sílat i ob­jekty typu ArrayBu­f­fer, Blob, File a Form­Data. Dále je možné na­sta­vit, aby byl po­ža­da­vek ano­nymní. V tom pří­padě se ne­bu­dou ode­sílat re­ferrer, ori­gin, ani cre­den­tails. Na­víc je možné ode­sílat data i na ser­ver v jiné do­méně.

CSS3

3D Transforms

Trans­for­mace nemá vliv na roz­lo­žení stránky. Ozna­čo­vání textu, stejně jako for­mulá­řové prvky, re­a­gují stále stejně i po jejím po­u­žití. Po ro­taci ko­lem ně­jaké osy jde ur­čit i hloubka per­spek­tivy. Vyba­vujete 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í. Ele­ment vi­deo se pře­kryje od­stav­cem, který se otočí ko­lem osy X a zá­ro­veň se na­staví po­měrně velká hloubka per­spek­tivy. Jak na po­sun textu se do­čtete pod nad­pi­sem Tran­si­ti­ons.

Animations

Na roz­díl od Tran­si­ti­ons, které jsou vy­ko­nány hned, jak se změní CSS hod­nota, při­řa­zuje se ani­maci přes vlast­nost -ms-ani­mation-name jméno, po­mocí kterého se spouští přes Ja­vaScript. Ani­mace má klí­čové rámce, ve kterých se de­fi­nuje vždy ur­čitá CSS vlast­nost. Rych­lost ani­mace v zá­vis­losti na čase se dá de­fi­no­vat vlastní funkcí jako Bezie­rova křivka, takže k tomu stačí jen 4 čísla.

Background & Borders

Vlast­ností bac­k­ground-clip a jejími hod­no­tami bor­der-box a con­tent-box lze ur­čit, jestli bude rá­mo­vání ele­mentu prů­hledné vůči barvě po­zadí nebo barvě ele­mentu.

Content Flow

Po­kud ně­jaký ele­ment, ty­picky ob­rá­zek, za­sahuje do ele­mentu s tex­tem, text ho ob­teče. Ne, že by ob­rázky ne­šly tex­tem ob­té­kat již nyní. Ale v pří­padě, kdy máte více sloupců a ob­rá­zek širší, než slou­pec, už tuto vlast­nost po­tře­bujete.

Exclusions

Ob­té­kaný text vždy po­čítá s ob­té­ká­ním ve tvaru ob­dél­níka. Ob­té­kání di­vo­čej­ších tvarů je ale mimo zá­sady dobré ty­po­gra­fie. Nicméně to jde. Je možné de­fi­no­vat prázdný div, kte­rému se určí tvar, ve­li­kost a na­to­čení. Po jeho umístění se do textu vy­mezí ob­last pro ob­té­kání.

Flexbox

Flex­box slouží pro jed­no­duché roz­lo­žení prvků, které mají zabírat celý prostor a při­způ­so­bo­vat se jeho ve­li­kosti. Dá se dobře po­u­žít na­pří­klad pro zob­ra­zení ikon slo­žek nebo sou­borů. Apli­kuje se na­sta­ve­ním hod­noty box vlast­nosti dis­play. Ná­sledně jde na­sta­vit dal­ších osm vlast­ností sou­vi­sejí­cích s flex­bo­xem. Všechny mezery mezi jed­not­li­vými boxy jsou roz­lo­ženy rov­no­měrně jak ve svis­lém, tak i vo­do­rov­ném směru.

Gradients

Vlast­nost bac­k­ground-image vždy měla je­di­nou mys­li­tel­nou hod­notu url s pa­ra­me­t­rem smě­řují­cím k ob­rázku. Pro­tože velká část ob­rázků stránky jsou jen gra­di­enty, lze nyní místo url po­u­žít i hod­notu -ms-li­near-gra­di­ent a pa­ra­me­try gra­di­ent ur­čit. Pod­pora prů­hled­nosti už je sa­mo­zřej­mostí. Pre­fix je zatím nutný, pro­tože pra­covní sku­pina spe­ci­fi­kace má stále za­po­třebí mě­nit význam po­řadí pa­ra­me­trů.

Grid Layout

Máte rádi systém po­zi­co­vání prvků z WPF apli­kací a štve vás, že to nejde po­u­žít i pro HTML? Tak už to jde. V pod­statě jde snadno do­cí­lit toho, co se dříve ře­šilo tabul­kami. Roz­ře­zat ob­last a ur­či­tým sloup­cům či řád­kům na­sta­vit buď stá­lou ve­li­kost v pi­xe­lech, nebo ve­li­kost zá­vi­sející na ve­li­kosti celé ob­lasti.

Hyphenation

In­ter­net Ex­plorer 10 bude umět roz­dě­lení textu do sloupců. S tím sou­visí i dě­lení slov, které IE10 pod­po­ruje i au­to­ma­ticky. Posky­tuje ho služba Win­dows pro práci s tex­tem, která byla pře­jeta od Micro­soft Of­fice. Po­kud tedy na­sta­víte <html lang="cs">, bu­dou česká slova dě­lena správně po­mocí slov­níku, který se na­chá­zel v Micro­soft Of­fice. Příznivce LaTeXu ur­čitě po­těší, že je možné ur­čit i nej­vyšší po­čet řádků, na kterých se po sobě může na­chá­zet roz­dě­lené slovo. Osa­mo­cená pís­mena jsou pod kon­t­ro­lou také.

Multi-column Layout

V roce 1996 bylo možné v Net­s­cape 3 po­u­žít tag MUL­TI­COL (ten­krát bylo ještě zvy­kem psát tagy vel­kými pís­meny) a roz­dě­lit tak text do více sloupců. Nyní je možné v IE10 po­mocí CSS do­cí­lit téhož. Na­víc je ale možné na­sta­vit au­to­ma­tický po­čet sloupců, což je dnes pro za­ří­zení s nej­růz­nější ve­li­kostí dis­pleje velmi uži­tečné. Vy­kres­lení svislé čáry mezi sloupci, která je od­dě­luje, je zá­le­ži­tostí je­diné CSS vlast­nosti co­lumn-rule. Hod­no­tou balance vlast­nosti co­lumn-fill lze na­sta­vit stej­nou výšku všech sloupců.

Panning

Po­kud se na­staví over­flow na scroll, lze po­mocí vlast­nosti -ms-over­flow-style na­sta­vo­vat, jak se má ro­lo­vání pro­je­vo­vat. Hod­nota -ms-au­to­hi­ding-scroll­bar na­staví scrollbary tak, že bu­dou vi­di­telné jen po­kud je kur­zor po­b­líž nich. Hod­nota auto zvi­di­telní scroll­bary v In­ter­net Ex­plo­reru a schová jev Me­tro style apli­kaci. Po­sou­vání ob­sahu ges­tem je po­vo­leno vždy.

Regions

Pro roz­lo­žení textu stylem známým z ča­so­pisů slouží re­gi­ony. Jedná se o v pod­statě o over­flow: hi­d­den s tím, že ob­sah, který už pře­téká a je skrytý, se zob­razí v ji­ném ele­mentu. Dá se tak do­cí­lit ply­nulého pře­té­kání textu přes ně­ko­lik ele­mentů.

Transitions

Jak bylo zmí­něno u 3D Trans­forms, po­sou­vání žlutého textu ve filmu Star Wars jde de­fi­no­vat velmi snadno. Stačí změ­nit ně­ja­kou vlast­nost CSS a ur­čit, za jak dlouho se pro­jeví a ja­kou rych­lostí vůči času má děj probíhat. Kon­krétně tedy po změně hod­noty translate3d vlast­nosti -ms-trans­form3d ele­mentu s vlast­ností -ms-tran­si­tion se bude změna pro­vá­dět ply­nule, takže se bude celý text po­malu po­sou­vat hlou­běji do vesmíru.

Text Shadow

Je jedna z nej­žá­da­něj­ších funkcí. Patří však mezi ty nej­více proble­ma­tické. Všechny verze In­ter­net Ex­plo­reru až do verze 8 vy­kres­lo­valy přes GDI+. Verze 9 však vy­kres­luje přes Di­rectX, stejně jako WPF. A vzpo­meňme na vý­voj WPF, kde nej­větší problém byl právě vy­kres­lo­vání pí­sem. Byla to je­diná věc, která prak­ticky brá­nila WPF po­u­ží­vat, až do doby kdy bylo vy­kres­lo­vání pí­sem pře­su­nuto přímo do Di­rectX pod ná­zvem Di­rectWrite. Ani to však ne­sta­čilo. Text Sha­dow v po­jetí CSS umí hodně a tomu všemu se mu­sel Di­rectWrite při­způ­so­bit. Stínu lze totiž na­sta­vit svislý i vo­do­rovný od­stup, in­ten­zitu, os­t­rost a co se týče barvy, jde de­fi­no­vat gra­di­ent ně­ko­lika ba­rev. Není proto divu, že vše tr­valo tak dlouho. Če­kání ale stálo za to. Vše se totiž ode­hrává na GPU.

Snap Points

Pro ob­sah, který pře­téká ele­ment, jdou na­sta­vit zá­chytné body, mezi kterými se bude ob­sah po­sou­vat. Lze to vyu­žít pře­de­vším k zob­ra­zení sady ob­rázků, které jsou umís­těny vo­do­rovně za se­bou, a není uži­tečné, aby byla zob­ra­zena půlka z kaž­dého ze sou­sed­ních ob­rázků. Místo toho se dá jed­no­duše gesty po­sou­vat z jed­noho ob­rázku na druhý.

Zooming

Nová vlast­nost -ms-con­tent-zo­o­ming s hod­no­tou zoom do­vo­luje gesty zvět­šo­vat a zmen­šo­vat ele­ment. Ne­zvět­šuje ani ne­zmen­šuje se tak celá stránka, ale jen její část. To je žá­doucí na­pří­klad v ma­pách, kde uži­va­tel chce ty­picky při­blí­žit ur­či­tou ob­last a ne­o­če­kává zvět­šení ovlá­da­cích prvků okolo mapy.

HTML5

Application Cache

Za dob, kdy in­ter­ne­to­vými vo­dami bráz­dily In­ter­net Ex­plo­rery 4, a po­čá­tek každé plavby do­pro­vá­zela me­lo­die mo­de­mo­vého vy­tá­čení, exis­to­valy ka­ná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ři­po­jili, rychle stáhli ak­tua­li­zace ka­nálů a zase od­po­jili. Te­prve potom se v klidu četlo. Ka­nály byly jako za­sta­ralé v sedmé verzi In­ter­net Ex­plo­reru od­stra­něny, aby se o tři verze dál mohli v po­době Ap­pli­cation Cache zase vrá­tit. Ne­jedná se totiž o nic ji­ného, než o se­znam sou­borů, které se mají stáh­nout, aby stránka fun­go­vala of­fline.

<html manifest="/cache.manifest">

Async

Atri­but async tagu script je velmi po­dobný atri­butu de­fer. Liší se od něj jen tím, že není za­ru­čeno, že se bu­dou skripty vy­ko­ná­vat ve stej­ném po­řadí, v ja­kém jsou na stránce. Vy­ko­nají se ihned po stažení a po se­sta­vení ce­lého DOM.

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

Drag & Drop

Ele­menty mají atri­but drag­gable, který ur­čuje, je-li možné je pře­sou­vat. K re­akci na táh­nutí přes ele­ment nebo spuš­tění ele­mentu nad jiným slouží udá­lost dra­go­ver re­spek­tive drop. Nej­za­jí­ma­vější je však sku­teč­nost, že lze pře­taho­vat i sou­bory z průzkum­níka do okna pro­hlí­ž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 de­fi­no­vat po­mocí re­gulár­ního výrazu v atri­butu pat­tern. Při­byl atri­but requi­red zabra­ňující ode­slání for­muláře, po­kud pole není vy­pl­něno. Po­kud je pole vy­plněno chybně, je na něj možné apli­ko­vat styl pseu­do­třídou :in­va­lid.

History

Vý­voj mo­der­ní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­na­mické na­čítání veš­ke­rého ob­sahu zne­mož­ňuje po­u­žití tla­čítka zpět. Udá­lost onha­shchange fun­guje, ale po­řád to není ono. Až HTML His­tory ko­nečně při­náší dy­na­mic­kou ná­hradu za od­kaz.

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

Metody his­tory.pushState a his­tory.repla­ceState na­hra­zují lo­cation.href re­spek­tive lo­cation.replace. Pro re­gis­tro­vání udá­losti klik­nutí na tla­čítko zpět či vpřed slouží po­pstate.

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

Parser

In­ter­net Ex­plo­rer 10 ob­sahuje par­ser HTML5. Jedná se o stan­dar­di­zo­vaný par­ser, který zpra­co­vává nejen HTML5, ale i HTML3, HTML4 a XHTML1. Con­di­ti­o­nal Com­ments je možné po­u­ží­vat i na­dále, ale je možné mí­řit pouze na starší verze In­ter­net Ex­plo­reru.

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

Jed­ním z pří­nosů no­vého par­seru je op­ti­ma­li­zo­vané vy­ko­ná­vání při­řa­zení vlast­nosti in­nerHTML.

Sandbox

Tag if­rame může ob­saho­vat nový atri­but san­d­box, který říká, že stránka v rámci bude mít za­ká­zaný Ja­vaScript, veš­keré do­plňky pro­hlí­žeče, tar­get="top" ne­bude účinný a for­muláře bu­dou za­po­vě­zené. Jed­not­livá pri­vi­le­gia jdou za­p­nout, jsou-li po­třeba.

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

Video Captioning

Tag <vi­deo> nyní pod­po­ruje ti­tulky, a sice ve for­mátu TTML (který pod­po­ruje také Sil­ver­li­ght) a We­bVTT.

<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­to­ro­vou gra­fiku lze obo­ha­tit o gra­fické efekty, z nichž nej­e­fekt­nější je asi osví­cení scény. Vše se po­čítá, jak je v IE zvy­kem, na GPU. Lze tím do­sáh­nout moc pěk­ného efektu. Po­kud po­zadí stránky vy­kres­líte přes SVG, mů­žete ur­čité čísti roz­ma­zat po­mocí fil­tru fe­Gaus­si­anBlur a tím po­lo­žit zá­klad skle­ně­nému pod­kladu stránky.