Dajbych.net


Novinky v Internet Exploreru 9

, 10 minut čtení

De­vátá verze In­ter­net Ex­ploreru přináší kval­itní pod­poru mladých tech­nologií. Nová verze nabídne víc novinek, než nabídla kteráko­liv verze před­chozí. Je im­ple­men­tová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 proh­lížeče přep­sány. Vešk­eré vykreslování se počítá na grafické kartě. Nic už ne­brání použí­vat na webu ste­jné efekty, které známe z WPF ap­likací.

IE

API

DOMParser & XMLSerializer

Pro­tože Xml­Htt­pRe­quest bývá používán k přenosu nového HTML kódu, byl vytvořen ob­jekt pro převod řetězce na DOM strom el­e­mentů. Pro zpra­cování do XML stačí použít vlast­nosti re­spon­seXML. Naopak pro převod DOM stromu na řetězec slouží ob­jekt XMLSe­ri­al­izer.

Selectors Level 2

K me­todám query­S­e­lec­tor a query­S­e­lec­torAll přibyla me­toda ms­Matches­S­e­lec­tor, která zjistí, jestli daný el­e­ment od­povídá určitému se­lek­toru.

Site Mode

Vytvářet zás­tupce k we­bové stránce ste­jně snadno jako k souboru jde už hodně dlouhou dobu. To­hoto zás­tupce však ne­jde přip­nout na hlavní panel. To je nyní možné pře­tažením záložky na hlavní panel. Tento zás­tupce sice ne­jde přetáh­nout na plochu, lze ale přes JavaScript přidá­vat vlastní úlohy do JumpListu, které otevřou konkrétní we­bovou stránku. Přip­nutá we­bová stránka může také ste­jným způ­sobem při­dat tlačítka pod náh­led stránky v hlavním pan­elu. Může mít li­bo­vol­nou ikonu. Stisknutí tlačítka vyvolá událost, na kterou se lze přih­lásit přes EventLis­tener. Tlačítko stránky přip­nuté k hlavnímu zo­brazuje ikonu webu. Přes tuto ikonu lze po­mocí JavaScriptu překrýt ještě jednu malou li­bo­vol­nou ikonu zná­zorňu­jící napřík­lad počet nepřečtených zpráv v Hot­mailu.

CSS3

2D Transforms

El­e­menty lze otočit, zvětšit, zmenšit, zkosit či roztáh­nout dle li­bosti. Pro náročné je k dis­pozici i možnost definice trans­for­mace po­mocí mat­ice.

Backgrounds & Borders

Hodně práce us­nadní i pod­pora oblých rohů el­e­mentu nas­tavením vlast­nosti bor­der-ra­dius. Pří­jemná je i možnost definice více pozadí el­e­mentu.

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

El­e­ment může mít kromě okraje také stín.

Color

Ne­jvíce žá­danou změ­nou je pod­pora polo­průh­led­ných barev, která se do­po­sud obchází vložením polo­průh­led­ného PNG obrázku na pozadí el­e­mentu. Barvy lze tedy v CSS nas­tavo­vat po­mocí rgba() i hsla(), což je mno­hem lepší než opac­ity, který zprůh­lední vše včetně ob­sahu. Typ­icky je totiž potřeba zprůh­led­nit jen pozadí.

Fonts

Poměrně mladá speci­fikace Web Open Font Format, vyví­jená v roce 2009, byla do IE9 im­ple­men­tována také. Sjed­nocuje vykreslování písem napříč proh­lížeči s tím, že font lze stáh­nout z webu, pokud není v sys­tému nain­stalován.

Resource Timing

Pro získání času načítání stránky slouží nový javascrip­tový ob­jekt win­dow.msPer­for­mance, který zprostřed­kovává přímo měření In­ter­net Ex­ploreru.

Media Queries

Me­dia Queries umožňují vyčlenit část CSS jen pro určitá zařízení. Lze ro­zlišit šířku a výšku dis­pleje, jeho ori­entaci, poměr stran, nebo pod­poru barev.

Namespaces

Jmenné pros­tory v CSS se hodí ze­jména pro stylování SVG el­e­mentů. Umožňují ro­zlišo­vat shodně naz­vaný el­e­ment a různých jmen­ných pros­torů HTML.

OM Views

CS­SOM View Mod­ule zastřešuje již dlouho známé vlast­nosti jako in­n­er­Width, in­n­er­Height, screenX, screenY nebo me­tody get­Bound­ing­Clien­tRect či get­Clien­tRects.

Selectors

Se­lek­tory do­volují ap­liko­vat styl jen na určité el­e­menty v závis­losti na je­jich umístění v DOM. Lze cílit na kořen, el­e­ment v určitém pořadí, první nebo poslední el­e­ment, který je jed­iným po­tomkem, nebo je prázdný. Lze také cílit na el­e­ment, na který od­kazuje URI po­mocí cesty za #. U for­mulářových prvků lze zas ro­zlišo­vat, je-li zakázaný, nebo po­v­olený. Nově lze také určit barvu a pozadí oz­načeného textu.

Values & Units

V CSS se běžně použí­vají jed­notky 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 zdro­jového kódu HTML stránky. Stačí použít base64 kó­dování a data pro­to­col. Nyní je možné vk­lá­dat i podobně i skripty. Limit ve­likosti dat byl zvýšen z 32 kB na 4 GB.

DOM

Element Traversal

Zastřešuje me­tody childEle­ment­Count, firstEle­mentChild, lastEle­mentChild, nex­tEle­mentSi­b­ling a pre­vi­ousE­le­mentSi­b­ling pro procházení stromem el­e­mentů.

HTML Level 2

Defin­uje často použí­vanou funkci getEle­ments­By­Class­Name spolu s vlast­ností char­ac­ter­Set.

Level 3 Core

DOM byl rozšířen o me­tody adoptN­ode, com­pare­Doc­u­ment­Po­si­tion, CDATA­Sec­tion, cre­ate­Doc­u­ment, doc­u­ment­Type, im­portN­ode, in­pu­tEn­cod­ing, is­De­fault­Names­pace, isE­qualN­ode, is­Sa­meN­ode, is­Sup­ported, lookup­Names­paceURI, lookup­Pre­fix, Pro­cessin­gIn­struc­tion, re­place­W­ho­le­Text, text­Con­tent, xm­lEn­cod­ing, xml­S­tan­dalone, xm­lVer­sion a who­le­Text.

Level 3 Events

Pokud pro­gra­mu­jete v JavaScriptu něco většího, narazíte na to, že reg­istro­vání událostí pro In­ter­net Ex­plorer se velmi liší od proh­lížečů Fire­fox, Chrome, Sa­fari či Opera. Funkce, která se vykonává po spuštění stránky, se reg­istruje napřík­lad 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ývo­jáři In­ter­net Ex­ploreru se rozhodli do de­váté verze im­ple­men­to­vat ro­bust­nější model DOM Event Lis­tener a umožnit tak web­de­signérům psát jed­notný kód pro všechny proh­lížeče. IE9 je také prvním proh­lížečem, který pod­poruje Key­board event in­ter­face ze speci­fikace DOM Level 3 Events. Po dostatečném rozšíření IE9 se můžeme těšit jed­notné reg­is­trace a ob­s­luze událostí jako mouseen­ter, mouse­leave, fo­cusin, fo­cu­sout, key­down, keyup nebo key­press.

Style

Zavádí me­todu get­Com­put­ed­Style, která se od vlast­nosti style liší tím, že vrátí vešk­eré CSS včetně toho, které je defi­no­vané ve sty­lop­isu.

Traversal & Range

Range vymezuje způ­sob, jakým lze vy­brat el­e­menty v určité oblasti defi­no­vané sez­namem bodů. Traver­sal určuje způ­sob, jakým lze procházet el­e­menty po­mocí ob­jektů NodeIt­er­a­tor a Tree­Walker. Je možné použít fil­try, takže se vy­berou jen určité el­e­menty. Využití se nabízí napřík­lad v grafických ed­i­torech na bázi SVG.

ECMAScript 5

Nový javascrip­tový en­gine, který je nazýván Chakra, se od ostat­ních en­g­inů liší. Op­ti­mal­izuje javascrip­tový kód na pozadí. Původní kód se pak nahradí kó­dem op­ti­mal­i­zo­vaným. Uži­va­tel tak ne­musí čekat, než JIT zkom­piluje a op­ti­mal­izuje kód, který se má provést už během načítání stránky. Tento kód je prove­den okamžitě bez náročných op­ti­mal­izací novým rychlým in­ter­pretem. Během načítání stránky tedy probíhají par­alelně v zásadě čtyři důležité věci – stavba DOM, průběžné vykreslování stránky, kom­pi­lace spolu s op­ti­mal­izací javascrip­tového kódu a rychlé vykonávání javascrip­tového kódu jen se zák­ladní op­ti­mal­izací.

In­ter­net Ex­plorer 9 pod­poruje nové funkce pro práci s poli: ev­ery, fil­ter, forE­ach, in­dexOf, is­Ar­ray, lastIn­dexOf, map, re­duce, re­duc­eRight a some. Zpřís­tupňuje nové funkce pro práci s ob­jekty: Ob­ject.cre­ate, Ob­ject.de­fine­Prop­er­ties, Ob­ject.de­fine­Prop­erty, Ob­ject.freeze, Ob­ject.ge­tOwn­Prop­er­ty­De­scrip­tor, Ob­ject.ge­tOwn­Prop­er­ty­Names, Ob­ject.get­Pro­to­typeOf, Ob­ject.isEx­ten­si­ble, Ob­ject.is­Frozen, Ob­ject.is­Sealed, Ob­ject.keys, Ob­ject.pre­ven­tEx­ten­sions, Ob­ject.seal. Také ob­sahuje nové funkce pro práci s datem: Date.now, Date.parse (pod­poruje ISO for­mát) a Date.toISOString. A konečně řetězec má me­todu trim.

HTML5

Audio & Audio

Mezi hlavní novinky v oblasti HTML 5 se řadí pod­pora tagu <video> s for­máty MPEG-4/H.264 a tagu <au­dio> s for­máty MP3/AAC. Oh­lášena byla pod­pora DOM 2 a 3 a z toho vy­plý­va­jící pod­pora stan­dard­ního modelu událostí – EventLis­teneru. Změní se i způ­sob, jakým se IE chová k neznámým el­e­men­tům. Napřík­lad použití tagu <ar­ti­cle> dělalo prob­lémy, pokud k němu vývo­jář chtěl přis­toupit přes DOM. IE9 už do DOM zahr­nuje i neznámé el­e­menty, ste­jně jako netisknutelné znaky.

Canvas

Novum v IE9 je také tag <can­vas>, který vykres­luje grafiku. Na rozdíl od SVG, které je určeno spíše pro stat­ické di­a­gramy či grafy, je can­vas určený pro dy­nam­icku scénu slože­nou z vek­torové i ras­trové grafiky. Can­vas posky­tuje přes JavaScript sadu kres­lících funkcí. Jedná se o pl­no­hod­notné 2D API. Jeho možnosti předvedl tým společnosti Google, který vytvořil port hry Quake II běží v in­ter­ne­tovém proh­lížeči.

Geolocation

In­ter­net Ex­plorer 9 do­voluje přes API zpřís­tup­nit stránce údaje o poloze PC. Ob­jekt win­dow.nav­i­ga­tor im­ple­men­tuje rozhraní Nav­i­ga­tor­Ge­olo­ca­tion. To defin­uje me­tody getCur­rent­Po­si­tion, watch­Po­si­tion, clear­Watch a události Po­si­tion­Call­back a Po­si­tion­Error­Call­back.

Selection

Jedná se hned o tři různá API, přes které lze přis­tupo­vat k oz­načenému textu. Se­lec­tion je ob­jekt, který vrací me­toda win­dow.get­S­e­lec­tion. Vlast­nosti se­lec­tion­S­tart a se­lec­tio­nEnd vrací nebo nas­tavují oblasti, kde začíná re­spek­tive končí oz­načení textu.

SVG

Zkrátka nepřišla ani vek­torová grafika. IE9 při­nese pod­poru SVG, který lze vložit přímo do HTML a přis­tupo­vat k SVG el­e­men­tům přes DOM.

XHTML/XML

Dlouho očeká­vaná pod­pora XHTML je konečně tady. Nová verze má zabu­dovaný XML parser, takže při­jímá i stránky s hlav­ičkou ap­pli­ca­tion/xhtml+xml. Zároveň jsou takto po­dané stránky zpra­covány v ne­jnovějším vykreslo­vacím režimu a ani se ne­jde přep­nout do režimu staršího. To od­s­traní potíže s používáním XSLT. Od sedmé verze In­ter­net Ex­ploreru má každá nová verze další vykreslo­vací režim.