Dajbych.net


Novinky v Internet Exploreru 9

, 11 minut čtení

De­vátá verze In­ter­net Ex­plo­reru při­náší kva­litní pod­poru mladých tech­no­lo­gií. Nová verze nabídne víc no­vi­nek, než nabídla kte­rá­ko­liv verze před­chozí. Je im­ple­men­to­ván CSS 3, DOM 3, SVG, ES5 a mnoho částí HTML 5. Při­byl také XML par­ser. Od sedmé verze byly všechny hlavní části pro­hlí­žeče pře­psány. Veš­keré vy­kres­lo­vání se po­čítá na gra­fické kartě. Nic už ne­brání po­u­ží­vat na webu stejné efekty, které známe z WPF apli­kací.

API

DOMParser & XMLSerializer

Pro­tože Xml­Htt­pRequest bývá po­u­ží­ván k pře­nosu no­vého HTML kódu, byl vy­tvo­řen ob­jekt pro pře­vod ře­tězce na DOM strom ele­mentů. Pro zpra­co­vání do XML stačí po­u­žít vlast­nosti re­spon­seXML. Nao­pak pro pře­vod DOM stromu na ře­tě­zec slouží ob­jekt XML­Se­ri­a­li­zer.

Selectors Level 2

K me­to­dám que­ry­Se­lec­tor a que­ry­Se­lec­to­rAll při­byla me­toda msMatches­Se­lec­tor, která zjistí, jestli daný ele­ment od­po­vídá ur­či­tému se­lek­toru.

Site Mode

Vy­tvá­řet zá­stupce k we­bové stránce stejně snadno jako k sou­boru jde už hodně dlouhou dobu. To­hoto zá­stupce však nejde přip­nout na hlavní pa­nel. To je nyní možné pře­ta­že­ním zá­ložky na hlavní pa­nel. Tento zá­stupce sice nejde pře­táh­nout na plo­chu, lze ale přes Ja­vaScript při­dá­vat vlastní úlohy do JumpListu, které ote­vřou kon­krétní we­bo­vou stránku. Připnutá we­bová stránka může také stej­ným způ­so­bem při­dat tla­čítka pod náhled stránky v hlav­ním pa­nelu. Může mít li­bo­vol­nou ikonu. Stisk­nutí tla­čítka vy­volá udá­lost, na kte­rou se lze při­hlá­sit přes Event­Lis­te­ner. Tla­čítko stránky připnuté k hlav­nímu zob­ra­zuje ikonu webu. Přes tuto ikonu lze po­mocí Ja­vaScriptu pře­krýt ještě jednu malou li­bo­vol­nou ikonu zná­zor­ňující na­pří­klad po­čet ne­pře­čte­ných zpráv v Hotmailu.

CSS3

2D Transforms

Ele­menty lze oto­čit, zvět­šit, zmen­šit, zko­sit či roz­táh­nout dle li­bosti. Pro ná­ročné je k dis­po­zici i mož­nost de­fi­nice trans­for­mace po­mocí ma­tice.

Backgrounds & Borders

Hodně práce usnadní i pod­pora ob­lých rohů ele­mentu na­sta­ve­ním vlast­nosti bor­der-ra­dius. Příjemná je i mož­nost de­fi­nice více po­zadí ele­mentu.

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

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

Color

Nej­více žá­da­nou změ­nou je pod­pora po­lo­prů­hled­ných ba­rev, která se do­po­sud ob­chází vlo­že­ním po­lo­prů­hled­ného PNG ob­rázku na po­zadí ele­mentu. Barvy lze tedy v CSS na­sta­vo­vat po­mocí rgba() i hsla(), což je mno­hem lepší než opa­city, který zprů­hlední vše včetně ob­sahu. Ty­picky je totiž po­třeba zprů­hled­nit jen po­zadí.

Fonts

Po­měrně mladá spe­ci­fi­kace Web Open Font Format, vy­víjená v roce 2009, byla do IE9 im­ple­men­to­vána také. Sjed­no­cuje vy­kres­lo­vání pí­sem na­příč pro­hlí­žeči s tím, že font lze stáh­nout z webu, pokud není v systému na­in­stalo­ván.

Resource Timing

Pro zís­kání času na­čítání stránky slouží nový ja­vascrip­tový ob­jekt win­dow.msPer­for­mance, který zprostřed­ko­vává přímo mě­ření In­ter­net Ex­plo­reru.

Media Queries

Me­dia Que­ries umož­ňují vy­čle­nit část CSS jen pro ur­čitá za­ří­zení. Lze roz­li­šit šířku a výšku dis­pleje, jeho ori­en­taci, po­měr stran, nebo pod­poru ba­rev.

Namespaces

Jmenné prostory v CSS se hodí zejména pro stylo­vání SVG ele­mentů. Umož­ňují roz­li­šo­vat shodně na­zvaný ele­ment a různých jmen­ných prostorů HTML.

OM Views

CS­SOM View Mo­dule za­střešuje již dlouho známé vlast­nosti jako in­nerWi­dth, in­nerHe­i­ght, scre­enX, scre­enY nebo me­tody get­Boun­din­gC­li­en­t­Rect či getC­li­en­t­Rects.

Selectors

Se­lek­tory do­vo­lují apli­ko­vat styl jen na ur­čité ele­menty v zá­vis­losti na je­jich umís­tění v DOM. Lze cí­lit na ko­řen, ele­ment v ur­či­tém po­řadí, první nebo po­slední ele­ment, který je je­diným po­tom­kem, nebo je prázdný. Lze také cí­lit na ele­ment, na který od­ka­zuje URI po­mocí cesty za #. U for­mulá­řo­vých prvků lze zas roz­li­šo­vat, je-li za­ká­zaný, nebo po­vo­lený. Nově lze také ur­čit barvu a po­zadí ozna­če­ného textu.

Values & Units

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

Data URI

Ob­rázky a lze ulo­žit přímo do zdro­jo­vého kódu HTML stránky. Stačí po­u­žít base64 kó­do­vání a data pro­to­col. Nyní je možné vklá­dat i po­dobně i skripty. Li­mit ve­li­kosti dat byl zvý­šen z 32 kB na 4 GB.

DOM

Element Traversal

Za­střešuje me­tody chil­dE­le­ment­Count, firs­tE­le­ment­Child, las­tE­le­ment­Child, nex­tE­le­ment­Si­bling a pre­vi­ou­sE­le­ment­Si­bling pro pro­chá­zení stro­mem ele­mentů.

HTML Level 2

De­fi­nuje často po­u­ží­va­nou funkci ge­tE­le­ment­sByC­lassName spolu s vlast­ností cha­rac­ter­Set.

Level 3 Core

DOM byl roz­šířen o me­tody ado­pt­Node, com­pa­re­Do­cu­ment­Po­si­tion, CDA­TA­Section, cre­a­te­Do­cu­ment, do­cu­ment­Type,im­port­Node, in­pu­tEn­co­ding, isDe­fault­Na­me­space, isEqual­Node, isSa­me­Node, is­Sup­por­ted, lo­o­kup­Na­me­spa­ceURI, lo­o­kup­Pre­fix, Pro­ces­sin­gIn­struction, repla­ceWho­le­Text, text­Con­tent, xmlEn­co­ding, xml­Stan­dalone, xml­Ver­sion a who­le­Text.

Level 3 Events

Po­kud pro­gra­mujete v Ja­vaScriptu něco vět­šího, na­ra­zíte na to, že re­gis­tro­vání udá­lostí pro In­ter­net Ex­plo­rer se velmi liší od pro­hlí­žečů Fi­re­fox, Chrome, Sa­fari či Opera. Funkce, která se vy­ko­nává po spuš­tění stránky, se re­gis­truje na­pří­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ý­vo­jáři In­ter­net Ex­plo­reru se roz­hodli do de­váté verze im­ple­men­to­vat ro­bust­nější mo­del DOM EventLis­te­ner a umož­nit tak we­b­de­sig­nérům psát jed­notný kód pro všechny pro­hlí­žeče. IE9 je také prv­ním pro­hlí­že­čem, který pod­po­ruje Key­bo­ardevent in­ter­face ze spe­ci­fi­kace DOM Le­vel 3 Events. Po do­sta­teč­ném roz­šíření IE9 se mů­žeme tě­šit jed­notné re­gis­trace a ob­sluze udá­lostí jako mou­se­en­ter, mou­se­leave, fo­cusin, fo­cu­sout, key­down, keyup nebo key­press.

Style

Za­vádí me­todu get­Com­pu­ted­Style, která se od vlast­nosti style liší tím, že vrátí veš­keré CSS včetně toho, které je de­fi­no­vané ve stylo­pisu.

Traversal & Range

Range vy­me­zuje způ­sob, jakým lze vybrat ele­menty v ur­čité ob­lasti de­fi­no­vané se­zna­mem bodů. Tra­ver­sal ur­čuje způ­sob, jakým lze pro­chá­zet ele­menty po­mocí ob­jektů No­de­I­te­ra­tor a Tre­eWal­ker. Je možné po­u­žít fil­try, takže se vybe­rou jen ur­čité ele­menty. Vyu­žití se nabízí na­pří­klad v gra­fic­kých edi­to­rech na bázi SVG.

ECMAScript 5

Nový ja­vascrip­tový en­gine, který je na­zý­ván Cha­kra, se od ostat­ních en­ginů liší. Op­ti­ma­li­zuje ja­vascrip­tový kód na po­zadí. Pů­vodní kód se pak na­hradí kó­dem op­ti­ma­li­zo­va­ným. Uži­va­tel tak ne­musí če­kat, než JIT zkom­pi­luje a op­ti­ma­li­zuje kód, který se má pro­vést už bě­hem na­čítání stránky. Tento kód je pro­ve­den okamžitě bez ná­roč­ných op­ti­ma­li­zací no­vým rychlým in­ter­pre­tem. Bě­hem na­čítání stránky tedy probíhají pa­ra­lelně v zá­sadě čtyři dů­le­žité věci – stavba DOM, prů­běžné vy­kres­lo­vání stránky, kom­pi­lace spolu s op­ti­ma­li­zací ja­vascrip­to­vého kódu a rychlé vy­ko­ná­vání ja­vascrip­to­vého kódu jen se zá­kladní op­ti­ma­li­zací.

In­ter­net Ex­plo­rer 9 pod­po­ruje nové funkce pro práci s poli: every, fil­ter, fo­rE­ach, in­de­xOf, isArray, las­tIn­de­xOf, map, re­duce, re­du­ce­Right a some. Zpřístup­ňuje nové funkce pro práci s ob­jekty: Ob­ject.cre­ate, Ob­ject.de­fi­ne­Pro­per­ties, Ob­ject.de­fi­ne­Pro­perty, Ob­ject.fre­eze, Ob­ject.ge­tOw­n­Pro­per­ty­De­scrip­tor, Ob­ject.ge­tOw­n­Pro­per­ty­Na­mes, Ob­ject.get­Pro­to­ty­peOf, Ob­ject.isEx­tensi­ble, Ob­ject.isFro­zen, Ob­ject.is­Se­aled, Ob­ject.keys, Ob­ject.pre­ven­tEx­tensi­ons, Ob­ject.seal. Také ob­sahuje nové funkce pro práci s da­tem: Date.now, Date.parse (pod­po­ruje ISO for­mát) a Date.to­I­SOString. A ko­nečně řetě­zec má me­todu trim.

HTML5

Audio & Audio

Mezi hlavní no­vinky v ob­lasti HTML 5 se řadí pod­pora tagu <vi­deo> s for­máty MPEG-4/H.264 a tagu <au­dio> s for­máty MP3/AAC. Ohlá­šena byla pod­pora DOM 2 a 3 a z toho vy­plý­vající pod­pora stan­dard­ního mo­delu udá­lostí – Event­Lis­te­neru. Změní se i způ­sob, jakým se IE chová k ne­známým ele­men­tům. Na­pří­klad po­u­žití tagu <ar­ticle> dě­lalo problémy, po­kud k němu vý­vo­jář chtěl přistou­pit přes DOM. IE9 už do DOM za­hr­nuje i ne­známé ele­menty, stejně jako ne­tisk­nu­telné znaky.

Canvas

No­vum v IE9 je také tag <ca­n­vas>, který vy­kres­luje gra­fiku. Na roz­díl od SVG, které je ur­čeno spíše pro sta­tické di­a­gramy či grafy, je ca­n­vas ur­čený pro dy­na­micku scénu slo­že­nou z vek­to­rové i rastrové gra­fiky. Ca­n­vas po­sky­tuje přes Ja­vaScript sadu kres­lí­cích funkcí. Jedná se o pl­no­hod­notné 2D API. Jeho mož­nosti před­vedl tým spo­leč­nosti Go­o­gle, který vy­tvo­řil port hry Quake II běží v in­ter­ne­to­vém pro­hlí­žeči.

Geolocation

In­ter­net Ex­plo­rer 9 do­vo­luje přes API zpřístup­nit stránce údaje o po­loze PC. Ob­jekt win­dow.na­vi­ga­tor im­ple­men­tuje roz­hraní Na­vi­ga­tor­Ge­o­lo­cation. To de­fi­nuje me­tody get­Current­Po­si­tion, watch­Po­si­tion, clearWatch a udá­losti Po­si­ti­on­Call­back a Po­si­ti­o­nError­Call­back.

Selection

Jedná se hned o tři různá API, přes které lze přistu­po­vat k ozna­če­nému textu. Se­lection je ob­jekt, který vrací me­toda win­dow.get­Se­lection. Vlast­nosti se­lecti­on­Start a se­lecti­o­nEnd vrací nebo na­sta­vují ob­lasti, kde za­číná re­spek­tive končí ozna­čení textu.

SVG

Zkrátka ne­přišla ani vek­to­rová gra­fika. IE9 při­nese pod­poru SVG, který lze vlo­žit přímo do HTML a přistu­po­vat k SVG ele­men­tům přes DOM.

XHTML/XML

Dlouho oče­ká­vaná pod­pora XHTML je ko­nečně tady. Nová verze má zabu­do­vaný XML par­ser, takže při­jímá i stránky s hla­vič­kou ap­pli­cation/xhtml+xml. Zá­ro­veň jsou takto po­dané stránky zpra­co­vány v nej­no­věj­ším vy­kres­lo­va­cím re­žimu a ani se nejde pře­pnout do re­žimu star­šího. To od­straní po­tíže s po­u­ží­vá­ním XSLT. Od sedmé verze In­ter­net Ex­ploreru má každá nová verze další vy­kres­lo­vací re­žim.