Dajbych.net

Novinky v Internet Exploreru 9

, 7 minut čtení

ie9 logo

Devátá verze Internet Exploreru přináší kvalitní podporu mladých technologií. Nová verze nabídne víc novinek, než nabídla kterákoliv verze předchozí. Je implementován CSS 3, DOM 3, SVG, ES5 a mnoho částí HTML 5. Přibyl také XML parser. Od sedmé verze byly všechny hlavní části prohlížeče přepsány. Veškeré vykreslování se počítá na grafické kartě. Nic už nebrání používat na webu stejné efekty, které známe z WPF aplikací.

API

DOMParser & XMLSerializer

Protože XmlHttpRequest bývá používán k přenosu nového HTML kódu, byl vytvořen objekt pro převod řetězce na DOM strom elementů. Pro zpracování do XML stačí použít vlastnosti responseXML. Naopak pro převod DOM stromu na řetězec slouží objekt XMLSerializer.

Selectors Level 2

K metodám querySelector a querySelectorAll přibyla metoda msMatchesSelector, která zjistí, jestli daný element odpovídá určitému selektoru.

Site Mode

Vytvářet zástupce k webové stránce stejně snadno jako k souboru jde už hodně dlouhou dobu. Tohoto zástupce však nejde připnout na hlavní panel. To je nyní možné přetažením záložky na hlavní panel. Tento zástupce sice nejde přetáhnout na plochu, lze ale přes JavaScript přidávat vlastní úlohy do JumpListu, které otevřou konkrétní webovou stránku. Připnutá webová stránka může také stejným způsobem přidat tlačítka pod náhled stránky v hlavním panelu. Může mít libovolnou ikonu. Stisknutí tlačítka vyvolá událost, na kterou se lze přihlásit přes EventListener. Tlačítko stránky připnuté k hlavnímu zobrazuje ikonu webu. Přes tuto ikonu lze pomocí JavaScriptu překrýt ještě jednu malou libovolnou ikonu znázorňující například počet nepřečtených zpráv v Hotmailu.

CSS3

2D Transforms

Elementy lze otočit, zvětšit, zmenšit, zkosit či roztáhnout dle libosti. Pro náročné je k dispozici i možnost definice transformace pomocí matice.

Backgrounds & Borders

Hodně práce usnadní i podpora oblých rohů elementu nastavením vlastnosti border-radius. Příjemná je i možnost definice více pozadí elementu.

background-image: url(first.png), url(second.png);
background-position: left top, center bottom;

Element může mít kromě okraje také stín.

Color

Nejvíce žádanou změnou je podpora poloprůhledných barev, která se doposud obchází vložením poloprůhledného PNG obrázku na pozadí elementu. Barvy lze tedy v CSS nastavovat pomocí rgba() i hsla(), což je mnohem lepší než opacity, který zprůhlední vše včetně obsahu. Typicky je totiž potřeba zprůhlednit jen pozadí.

Fonts

Poměrně mladá specifikace Web Open Font Format, vyvíjená v roce 2009, byla do IE9 implementována také. Sjednocuje vykreslování písem napříč prohlížeči s tím, že font lze stáhnout z webu, pokud není v systému nainstalován.

Resource Timing

Pro získání času načítání stránky slouží nový javascriptový objekt window.msPerformance, který zprostředkovává přímo měření Internet Exploreru.

Media Queries

Media Queries umožňují vyčlenit část CSS jen pro určitá zařízení. Lze rozlišit šířku a výšku displeje, jeho orientaci, poměr stran, nebo podporu barev.

Namespaces

Jmenné prostory v CSS se hodí zejména pro stylování SVG elementů. Umožňují rozlišovat shodně nazvaný element a různých jmenných prostorů HTML.

OM Views

CSSOM View Module zastřešuje již dlouho známé vlastnosti jako innerWidth, innerHeight, screenX, screenY nebo metody getBoundingClientRect či getClientRects.

Selectors

Selektory dovolují aplikovat styl jen na určité elementy v závislosti na jejich umístění v DOM. Lze cílit na kořen, element v určitém pořadí, první nebo poslední element, který je jediným potomkem, nebo je prázdný. Lze také cílit na element, na který odkazuje URI pomocí cesty za #. U formulářových prvků lze zas rozlišovat, je-li zakázaný, nebo povolený. Nově lze také určit barvu a pozadí označeného textu.

Values & Units

V CSS se běžně používají jednotky jako px nebo em. Nyní lze využít i deg pro stupně, s a ms pro čas.

Data URI

Obrázky a lze uložit přímo do zdrojového kódu HTML stránky. Stačí použít base64 kódování a data protocol. Nyní je možné vkládat i podobně i skripty. Limit velikosti dat byl zvýšen z 32 kB na 4 GB.

DOM

Element Traversal

Zastřešuje metody childElementCount, firstElementChild, lastElementChild, nextElementSibling a previousElementSibling pro procházení stromem elementů.

HTML Level 2

Definuje často používanou funkci getElementsByClassName spolu s vlastností characterSet.

Level 3 Core

DOM byl rozšířen o metody adoptNode, compareDocumentPosition, CDATASection, createDocument, documentType, importNode, inputEncoding, isDefaultNamespace, isEqualNode, isSameNode, isSupported, lookupNamespaceURI, lookupPrefix, ProcessingInstruction, replaceWholeText, textContent, xmlEncoding, xmlStandalone, xmlVersion a wholeText.

Level 3 Events

Pokud programujete v JavaScriptu něco většího, narazíte na to, že registrování událostí pro Internet Explorer se velmi liší od prohlížečů Firefox, Chrome, Safari či Opera. Funkce, která se vykonává po spuštění stránky, se registruje například takto:

if (typeof document.onreadystatechange != 'undefined') {
    document.onreadystatechange = function() {
        if (document.readyState == 'complete') Init();
    }
}

if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', Init, false);
}

function Init() { }

Vývojáři Internet Exploreru se rozhodli do deváté verze implementovat robustnější model DOM Event Listener a umožnit tak webdesignérům psát jednotný kód pro všechny prohlížeče. IE9 je také prvním prohlížečem, který podporuje Keyboard event interface ze specifikace DOM Level 3 Events. Po dostatečném rozšíření IE9 se můžeme těšit jednotné registrace a obsluze událostí jako mouseenter, mouseleave, focusin, focusout, keydown, keyup nebo keypress.

Style

Zavádí metodu getComputedStyle, která se od vlastnosti style liší tím, že vrátí veškeré CSS včetně toho, které je definované ve stylopisu.

Traversal & Range

Range vymezuje způsob, jakým lze vybrat elementy v určité oblasti definované seznamem bodů. Traversal určuje způsob, jakým lze procházet elementy pomocí objektů NodeIterator a TreeWalker. Je možné použít filtry, takže se vyberou jen určité elementy. Využití se nabízí například v grafických editorech na bázi SVG.

ECMAScript 5

Nový javascriptový engine, který je nazýván Chakra, se od ostatních enginů liší. Optimalizuje javascriptový kód na pozadí. Původní kód se pak nahradí kódem optimalizovaným. Uživatel tak nemusí čekat, než JIT zkompiluje a optimalizuje kód, který se má provést už během načítání stránky. Tento kód je proveden okamžitě bez náročných optimalizací novým rychlým interpretem. Během načítání stránky tedy probíhají paralelně v zásadě čtyři důležité věci – stavba DOM, průběžné vykreslování stránky, kompilace spolu s optimalizací javascriptového kódu a rychlé vykonávání javascriptového kódu jen se základní optimalizací.

Internet Explorer 9 podporuje nové funkce pro práci s poli: every, filter, forEach, indexOf, isArray, lastIndexOf, map, reduce, reduceRight a some. Zpřístupňuje nové funkce pro práci s objekty: Object.create, Object.defineProperties, Object.defineProperty, Object.freeze, Object.getOwnPropertyDescriptor, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.isExtensible, Object.isFrozen, Object.isSealed, Object.keys, Object.preventExtensions, Object.seal. Také obsahuje nové funkce pro práci s datem: Date.now, Date.parse (podporuje ISO formát) a Date.toISOString. A konečně řetězec má metodu trim.

HTML5

Audio & Audio

Mezi hlavní novinky v oblasti HTML 5 se řadí podpora tagu <video> s formáty MPEG-4/H.264 a tagu <audio> s formáty MP3/AAC. Ohlášena byla podpora DOM 2 a 3 a z toho vyplývající podpora standardního modelu událostí – EventListeneru. Změní se i způsob, jakým se IE chová k neznámým elementům. Například použití tagu <article> dělalo problémy, pokud k němu vývojář chtěl přistoupit přes DOM. IE9 už do DOM zahrnuje i neznámé elementy, stejně jako netisknutelné znaky.

Canvas

Novum v IE9 je také tag <canvas>, který vykresluje grafiku. Na rozdíl od SVG, které je určeno spíše pro statické diagramy či grafy, je canvas určený pro dynamicku scénu složenou z vektorové i rastrové grafiky. Canvas poskytuje přes JavaScript sadu kreslících funkcí. Jedná se o plnohodnotné 2D API. Jeho možnosti předvedl tým společnosti Google, který vytvořil port hry Quake II běží v internetovém prohlížeči.

Geolocation

Internet Explorer 9 dovoluje přes API zpřístupnit stránce údaje o poloze PC. Objekt window.navigator implementuje rozhraní NavigatorGeolocation. To definuje metody getCurrentPosition, watchPosition, clearWatch a události PositionCallback a PositionErrorCallback.

Selection

Jedná se hned o tři různá API, přes které lze přistupovat k označenému textu. Selection je objekt, který vrací metoda window.getSelection. Vlastnosti selectionStart a selectionEnd vrací nebo nastavují oblasti, kde začíná respektive končí označení textu.

SVG

Zkrátka nepřišla ani vektorová grafika. IE9 přinese podporu SVG, který lze vložit přímo do HTML a přistupovat k SVG elementům přes DOM.

XHTML/XML

Dlouho očekávaná podpora XHTML je konečně tady. Nová verze má zabudovaný XML parser, takže přijímá i stránky s hlavičkou application/xhtml+xml. Zároveň jsou takto podané stránky zpracovány v nejnovějším vykreslovacím režimu a ani se nejde přepnout do režimu staršího. To odstraní potíže s používáním XSLT. Od sedmé verze Internet Exploreru má každá nová verze další vykreslovací režim.