Internet Explorer 10 umí rozdělit text odstavce do sloupců a slova automaticky rozdělit podle slovníku přejatého z Microsoft Office. Dokáže pozicovat elementy podle Gridu stejně jako ve WPF. Podporuje databázové ukládání dat i otevřené spojení se serverem. Nechybí ani API pro ukládání a otevírání souborů. Minulá generace měla jako záruku multiplatformnosti POSIX. Dnešní má HTML5.
Internet Explorer 10 je webový prohlížeč, jehož jádro renderuje nejen webové stránky, ale i Metro-style aplikace. Jeho vývoj plynule pokračuje z předešlé verze. Po prvních dvou Platform Preview desítky se objevila třetí ve Windows Developer Preview. Finální verze bude vydána společně s Windows 8 na podzim roku 2012. Většina funkcí je však vývojářům dostupná již dnes.
Flash
Internet Explorer má zabudovaný Adobe Flash Player. Jeho implementace je oproti referenční výkonově optimalizovaná a upravená pro pohodlné ovládání dotyky. Vychází z desktopové implementace, ne z mobilní podmnožiny. Přesto bude podporován i na zařízeních s procesory ARM. Microsoft pomáhal Adobe odstranit řadu bezpečnostních zranitelností a náchylností k pádu, kterými Flash trpěl. Tato implementace je použita i v Aeru, kam se již nemusí instalovat separá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 uvedeny v Compatibility View Listu. Aby byl web zařazen do tohoto seznamu, musí obsah stránky ve Flashi reagovat na dotyk, musí dobře pracovat s klávesnicí zobrazenou na displeji a nesmí provádět složité výpočty, aby se šetřila baterie zařízení.
API
Animation Frames
Animace, které se odehrávají postupnou změnou pozice elementu vyvolanou přes setTimeout mají tu nevýhodu, že se velká část změn nemusí ani vykreslit. Zbytečně se tak vytěžuje CPU a vybíjí baterie. Proto se zavádí metoda requestAnimationFrame která se liší od setTimeout především tím, že čas vybuzení závisí na frekvenci displeje zařízení. Navíc v případě několika animací současně může prohlížeč všechny změny provést naráz. A pokud není záložka aktivní, animace se vůbec neprovádí.
File Reader
Práce se soubory znamenala vždy upload souboru na server. To už nemusí platit, protože přetažením souboru do okna prohlížeče nebo přes input typu text je možné ze souboru číst v textové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
Objekty reprezentující soubory jako File či Blob bude možné snadno uložit do počítače. Do teď je možné ukládat soubory jen jako obsloužení požadavku s hlavičkou, kterou prohlížeč neumí otevřít. Nyní je možné uložit jako soubor data, která ani nemusí být na serveru, ale pouze v paměti prohlížeče.
Gesture Events
Windows se stará o veškeré výpočty související s gesty a poskytuje rovnou jejich výsledky. Lze se tedy přihlásit přímo k odběru událostí pro gesta MSGestureTap, MSGestureDoubleTap a MSGestureHold. Pro složitější zpracování gest slouží události MSGestureStart, MSGestureChange a MSGestureEnd. Ty poskytují přesné údaje o hybnosti, úhlu otočení nebo vektoru posunu.
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 Developer Tools umožňují kliknutím na prvek stránky zobrazit jeho zdrojový kód. Visual Studio to bude umět také, jen s tím rozdílem, že ukáže zdrojový kód, který generuje HTML příslušného prvku. Aby to fungovalo se všemi prohlížeči, je snaha toto API standardizovat.
IndexedDB
Z původních plánů zvolit relační databázi SQLLite za hlavní databázi HTML5 naštěstí sešlo a zvítězil rozumnější nápad vybrat objektovou databázi IndexedDB. Není proto nutné složitě mapovat data na objekty, protože databáze ukládá javascriptové objekty přímo. Místo tabulek se používají object stores. Slouží ale ke stejnému účelu. Stejně jako relační kolegové mají také indexy, indexujcí vlastnosti nebo metody objektů. Každý objekt má svůj jednoznačný identifikátor. Ten se nastavuje v indexu vlastností keyPath. Dotaz na data vypadá 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 bohužel podporováno není, a tak se musíme smířit s dotazováním na konkrétní objekt (jako v příkladu výše), filtrací, nebo iterováním indexem.
Page Visibility
Nová událost visibilitychange objektu document je užitečná například v případě, kdy uživatel přehrává video a přepne na jinou záložku. V tu chvíli je možné na událost zareagovat a přehrávání videa pozastavit, aby se zbytečně nezatěžoval server, když uživatel video stejně nevidí.
Pointer Events
Události pro myš i dotyk byly sjednoceny do čtyř základních událostí MSPointerOver, MSPointerOut, MSPointerHover a MSPointerCancel pro ztrátu kontaktu (což se s myší nikdy nemůže stát, leda jejím vypojením z USB). Kvůli zpětné kompatibilitě prohlížeč vyvolá ještě odpovídající události pro myš. Pro zjištění, zda prohlížeč podporuje gesta, existuje vlastnosti window.navigator.msPointerEnabled.
Multi-File Upload
Jak známo, dialog pro otevření souboru může sloužit k výběru buď jednoho, nebo více souborů. Pro web však nešel vícesouborový režim použít. I na to myslí specifikace HTML5 a zavádí jeden input 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řesnému měření doby, která uběhla mezi načítáním sledovaných částí stránky (například obrázků).
WebSockets
HTTP je protokol pro webové stránky, ne webové aplikace. Klient si řekne o data a server mu je pošle. Není možné, aby server plynule posílal data klientovi, nebo naopak. Problém sice jde do určité míry obejít, ale způsobuje velké složitosti na straně serverových clusterů.
WebSocekts je protokol, který byl navržen pro současný web. Počítá s firewally a proxy, podporuje TCP i SSL a už samotný protokol se stará o to, aby bylo oboustranné spojení udržováno živé pomocí Ping/Pong. Má to i tu výhodu, že se server dozví o tom, že klient ztratil spojení. Protože proxy projde jen HTTP protokol, je spojení navazováno nejprve HTTP protokolem a až později dojde k přepnutí na WebSockets. Každá zpráva v protokolu 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 jmenném prostoru Microsoft.Web.WebSockets je třída WebSocketHandler, ze které lze podědit vlastní Genric Handler a pohodlně obsluhovat protokol WebSockets.
Web Workers
Protože je veškerý 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 Workers. Aby však nebylo nutné řešit velmi náročnou synchronizaci mezi více vlákny a DOM, nemá kód vykonávaný na pozadí k DOM přístup. Jediná š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 onloadstart, onprogress, onabort, onerror, onload, ontimeout a onloadend, které mají zpříjemnit současné zjišťování, co že se to vlastně po vyvolání události onreadystatechange stalo. Další novinkou je možnost nastavit timeout i jednoduše zjistit průběh odesílání požadavku k serveru. Aby bylo možné snadno přenášet soubory, je možné odesílat i objekty typu ArrayBuffer, Blob, File a FormData. Dále je možné nastavit, aby byl požadavek anonymní. V tom případě se nebudou odesílat referrer, origin, ani credentails. Navíc je možné odesílat data i na server v jiné doméně.
CSS3
3D Transforms
Transformace nemá vliv na rozložení stránky. Označování textu, stejně jako formulářové prvky, reagují stále stejně i po jejím použití. Po rotaci kolem nějaké osy jde určit i hloubka perspektivy. Vybavujete si film Star Wars a žlutý text na jeho začátku? Není to nic, co by nešlo udělat pomocí CSS3 3D transformací. Element video se překryje odstavcem, který se otočí kolem osy X a zároveň se nastaví poměrně velká hloubka perspektivy. Jak na posun textu se dočtete pod nadpisem Transitions.
Animations
Na rozdíl od Transitions, které jsou vykonány hned, jak se změní CSS hodnota, přiřazuje se animaci přes vlastnost -ms-animation-name jméno, pomocí kterého se spouští přes JavaScript. Animace má klíčové rámce, ve kterých se definuje vždy určitá CSS vlastnost. Rychlost animace v závislosti na čase se dá definovat vlastní funkcí jako Bezierova křivka, takže k tomu stačí jen 4 čísla.
Background & Borders
Vlastností background-clip a jejími hodnotami border-box a content-box lze určit, jestli bude rámování elementu průhledné vůči barvě pozadí nebo barvě elementu.
Content Flow
Pokud nějaký element, typicky obrázek, zasahuje do elementu s textem, text ho obteče. Ne, že by obrázky nešly textem obtékat již nyní. Ale v případě, kdy máte více sloupců a obrázek širší, než sloupec, už tuto vlastnost potřebujete.
Exclusions
Obtékaný text vždy počítá s obtékáním ve tvaru obdélníka. Obtékání divočejších tvarů je ale mimo zásady dobré typografie. Nicméně to jde. Je možné definovat prázdný div, kterému se určí tvar, velikost a natočení. Po jeho umístění se do textu vymezí oblast pro obtékání.
Flexbox
Flexbox slouží pro jednoduché rozložení prvků, které mají zabírat celý prostor a přizpůsobovat se jeho velikosti. Dá se dobře použít například pro zobrazení ikon složek nebo souborů. Aplikuje se nastavením hodnoty box vlastnosti display. Následně jde nastavit dalších osm vlastností souvisejících s flexboxem. Všechny mezery mezi jednotlivými boxy jsou rozloženy rovnoměrně jak ve svislém, tak i vodorovném směru.
Gradients
Vlastnost background-image vždy měla jedinou myslitelnou hodnotu url s parametrem směřujícím k obrázku. Protože velká část obrázků stránky jsou jen gradienty, lze nyní místo url použít i hodnotu -ms-linear-gradient a parametry gradient určit. Podpora průhlednosti už je samozřejmostí. Prefix je zatím nutný, protože pracovní skupina specifikace má stále zapotřebí měnit význam pořadí parametrů.
Grid Layout
Máte rádi systém pozicování prvků z WPF aplikací a štve vás, že to nejde použít i pro HTML? Tak už to jde. V podstatě jde snadno docílit toho, co se dříve řešilo tabulkami. Rozřezat oblast a určitým sloupcům či řádkům nastavit buď stálou velikost v pixelech, nebo velikost závisející na velikosti celé oblasti.
Hyphenation
Internet Explorer 10 bude umět rozdělení textu do sloupců. S tím souvisí i dělení slov, které IE10 podporuje i automaticky. Poskytuje ho služba Windows pro práci s textem, která byla přejeta od Microsoft Office. Pokud tedy nastavíte <html lang="cs">, budou česká slova dělena správně pomocí slovníku, který se nacházel v Microsoft Office. Příznivce LaTeXu určitě potěší, že je možné určit i nejvyšší počet řádků, na kterých se po sobě může nacházet rozdělené slovo. Osamocená písmena jsou pod kontrolou také.
Multi-column Layout
V roce 1996 bylo možné v Netscape 3 použít tag MULTICOL (tenkrát bylo ještě zvykem psát tagy velkými písmeny) a rozdělit tak text do více sloupců. Nyní je možné v IE10 pomocí CSS docílit téhož. Navíc je ale možné nastavit automatický počet sloupců, což je dnes pro zařízení s nejrůznější velikostí displeje velmi užitečné. Vykreslení svislé čáry mezi sloupci, která je odděluje, je záležitostí jediné CSS vlastnosti column-rule. Hodnotou balance vlastnosti column-fill lze nastavit stejnou výšku všech sloupců.
Panning
Pokud se nastaví overflow na scroll, lze pomocí vlastnosti -ms-overflow-style nastavovat, jak se má rolování projevovat. Hodnota -ms-autohiding-scrollbar nastaví scrollbary tak, že budou viditelné jen pokud je kurzor poblíž nich. Hodnota auto zviditelní scrollbary v Internet Exploreru a schová jev Metro style aplikaci. Posouvání obsahu gestem je povoleno vždy.
Regions
Pro rozložení textu stylem známým z časopisů slouží regiony. Jedná se o v podstatě o overflow: hidden s tím, že obsah, který už přetéká a je skrytý, se zobrazí v jiném elementu. Dá se tak docílit plynulého přetékání textu přes několik elementů.
Transitions
Jak bylo zmíněno u 3D Transforms, posouvání žlutého textu ve filmu Star Wars jde definovat velmi snadno. Stačí změnit nějakou vlastnost CSS a určit, za jak dlouho se projeví a jakou rychlostí vůči času má děj probíhat. Konkrétně tedy po změně hodnoty translate3d vlastnosti -ms-transform3d elementu s vlastností -ms-transition se bude změna provádět plynule, takže se bude celý text pomalu posouvat hlouběji do vesmíru.
Text Shadow
Je jedna z nejžádanějších funkcí. Patří však mezi ty nejvíce problematické. Všechny verze Internet Exploreru až do verze 8 vykreslovaly přes GDI+. Verze 9 však vykresluje přes DirectX, stejně jako WPF. A vzpomeňme na vývoj WPF, kde největší problém byl právě vykreslování písem. Byla to jediná věc, která prakticky bránila WPF používat, až do doby kdy bylo vykreslování písem přesunuto přímo do DirectX pod názvem DirectWrite. Ani to však nestačilo. Text Shadow v pojetí CSS umí hodně a tomu všemu se musel DirectWrite přizpůsobit. Stínu lze totiž nastavit svislý i vodorovný odstup, intenzitu, ostrost a co se týče barvy, jde definovat gradient několika barev. Není proto divu, že vše trvalo tak dlouho. Čekání ale stálo za to. Vše se totiž odehrává na GPU.
Snap Points
Pro obsah, který přetéká element, jdou nastavit záchytné body, mezi kterými se bude obsah posouvat. Lze to využít především k zobrazení sady obrázků, které jsou umístěny vodorovně za sebou, a není užitečné, aby byla zobrazena půlka z každého ze sousedních obrázků. Místo toho se dá jednoduše gesty posouvat z jednoho obrázku na druhý.
Zooming
Nová vlastnost -ms-content-zooming s hodnotou zoom dovoluje gesty zvětšovat a zmenšovat element. Nezvětšuje ani nezmenšuje se tak celá stránka, ale jen její část. To je žádoucí například v mapách, kde uživatel chce typicky přiblížit určitou oblast a neočekává zvětšení ovládacích prvků okolo mapy.
HTML5
Application Cache
Za dob, kdy internetovými vodami brázdily Internet Explorery 4, a počátek každé plavby doprovázela melodie modemového vytáčení, existovaly kanály, kde webové stránky fungovaly, i když byl počítač offline. Pracovalo se s tím tak, že jste se připojili, rychle stáhli aktualizace kanálů a zase odpojili. Teprve potom se v klidu četlo. Kanály byly jako zastaralé v sedmé verzi Internet Exploreru odstraněny, aby se o tři verze dál mohli v podobě Application Cache zase vrátit. Nejedná se totiž o nic jiného, než o seznam souborů, které se mají stáhnout, aby stránka fungovala offline.
<html manifest="/cache.manifest">
Async
Atribut async tagu script je velmi podobný atributu defer. Liší se od něj jen tím, že není zaručeno, že se budou skripty vykonávat ve stejném pořadí, v jakém jsou na stránce. Vykonají se ihned po stažení a po sestavení celého DOM.
<script async src="script.js" onload="Init()"></script>
Drag & Drop
Elementy mají atribut draggable, který určuje, je-li možné je přesouvat. K reakci na táhnutí přes element nebo spuštění elementu nad jiným slouží událost dragover respektive drop. Nejzajímavější je však skutečnost, že lze přetahovat i soubory z průzkumníka do okna prohlížeče.
var dropArea = document.getElementById('dropspot'); dropArea.addEventListener('drop', dropHandler, false);
function dropHandler(event) {
var filelist = event.dataTransfer.files;
}
Forms & Validation
Klasický input byl rozšířen o typy email a url. Vlastní typy lze definovat pomocí regulárního výrazu v atributu pattern. Přibyl atribut required zabraňující odeslání formuláře, pokud pole není vyplněno. Pokud je pole vyplněno chybně, je na něj možné aplikovat styl pseudotřídou :invalid.
History
Vývoj moderních stránek je náročný. Načítání nové stránky při každé změně obsahu je pomalé. Dynamické načítání veškerého obsahu znemožňuje použití tlačítka zpět. Událost onhashchange funguje, ale pořád to není ono. Až HTML History konečně přináší dynamickou náhradu za odkaz.
history.pushState(data, title, url);
history.replaceState(data, title, url);
Metody history.pushState a history.replaceState nahrazují location.href respektive location.replace. Pro registrování události kliknutí na tlačítko zpět či vpřed slouží popstate.
window.addEventListener("DOMContentLoaded", loadState, false);
window.addEventListener("popstate", loadState, false);
function loadState() {
var data = history.state;
}
Parser
Internet Explorer 10 obsahuje parser HTML5. Jedná se o standardizovaný parser, který zpracovává nejen HTML5, ale i HTML3, HTML4 a XHTML1. Conditional Comments je možné používat i nadále, ale je možné mířit pouze na starší verze Internet Exploreru.
<!--[if IE]>
Tento obsah je zobrazen pouze v Internet Exploreru od verze 5 do verze 9.
<![endif]-->
Jedním z přínosů nového parseru je optimalizované vykonávání přiřazení vlastnosti innerHTML.
Sandbox
Tag iframe může obsahovat nový atribut sandbox, který říká, že stránka v rámci bude mít zakázaný JavaScript, veškeré doplňky prohlížeče, target="top" nebude účinný a formuláře budou zapovězené. Jednotlivá privilegia jdou zapnout, jsou-li potřeba.
<iframe src="iframe.html" sandbox="allow-scripts allow-forms allow-top-navigation"></iframe>
Video Captioning
Tag <video> nyní podporuje titulky, a sice ve formátu TTML (který podporuje také Silverlight) a WebVTT.
<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
Vektorovou grafiku lze obohatit o grafické efekty, z nichž nejefektnější je asi osvícení scény. Vše se počítá, jak je v IE zvykem, na GPU. Lze tím dosáhnout moc pěkného efektu. Pokud pozadí stránky vykreslíte přes SVG, můžete určité čísti rozmazat pomocí filtru feGaussianBlur a tím položit základ skleněnému podkladu stránky.