AspNet.sk     O súťaži HTML5     Výsledky súťaže HTML5     Pravidlá súťaže     Internet Explorer 9 - príručka pre vývojárov
Menu

Internet Explorer 9 – príručka pre vývojárov

14. marca 2011

Príručka pre vývojárov pre aplikáciu Internet Explorer 9 prináša prehľad funkcií a vylepšení v aplikácii Internet Explorer 9. S jej pomocou môžu weboví vývojári a návrhári tieto vylepšenia plne využiť. Na testovacej webovej lokalite aplikácie Internet Explorer si vývojári môžu platformu sami prakticky vyskúšať.

Obsah

Úvod

Všestranný výkon prehľadávača

Podpora webových štandardov umožňujúca jednotný kód značkovacieho jazyka

Nové grafické funkcie využívajúce výkon počítačov so systémom Windows

Zoznam nových funkcií

Lepšia vzájomná funkčná spolupráca vďaka podpore štandardov

Šablóny štýlov CSS, úroveň 3 (CSS3)

2D transformácia v šablónach štýlov CSS3

Modul CSS3 pre pozadia a ohraničenia

Modul CSS3 pre prácu s farbami

Modul CSS3 pre prácu s písmami

Modul CSS3 pre dotazy na médium

Modul CSS3 pre obory názvov

Modul CSS3 pre hodnoty a jednotky

Selektory šablón štýlov CSS3

Ďalšie funkcie šablón štýlov CSS

Modul pre zobrazenie objektového modelu šablón štýlov CSS (CSSOM)

Identifikátor URI údajov

Vylepšenie modelu DOM (Document Object Model)

Zavedenie vylepšeného modelu DOM

Prenos kódu XML do a z modelu DOM pomocou analýzy a serializácie

Úrovne 2 a 3 modelu DOM (Document Object Model)

Jadro modelu DOM (úrovne L2 a L3) a zobrazenia (úroveň L2)

Prechádzanie elementov modelu DOM

Udalosti modelu DOM úrovne L2 a L3

Podpora špecifikácie HTML na úrovni L2 modelu DOM

Štýly v modeli DOM úrovne L2

Prechádzanie a oblasti v modeli DOM úrovne L2

Spracovanie prázdnych znakov v modeli DOM

ECMAScript 5

HTML5

Určovanie geografickej polohy podľa špecifikácie HTML5

Elementy video a audio špecifikácie HTML5

Element canvas špecifikácie HTML5

Vylepšenie analýzy kódu HTML

Rozhrania API špecifikácie HTML5 pre výber

Sémantické elementy špecifikácie HTML5

Profily farieb ICC

Rozhranie API selektorov úrovne 2

Grafika SVG (Scaling Vector Graphics)

Základné tvary

Orezanie, maskovanie a skladanie

Systémy súradníc, transformácie a jednotky

Štruktúra dokumentu

Prechody a vzorky

Interaktivita

Prepojenia a zobrazenia

Maľovanie a farby

Dráhy

Text

Nové nástroje pre webových vývojárov

Pripnuté webové lokality

Správa verzií platformy

Nový režim dokumentu

Identifikačný reťazec prehľadávača

Nástroje pre vývojárov

Záložka Konzola

Záložka Sieť

Nástroj na prepínanie identifikačného reťazca prehľadávača

Meranie výkonu v reálnych podmienkach

História revízií

Úvod

Vitajte v aplikácii Windows Internet Explorer 9. Ako vývojári potrebujete poznať najnovšie informácie o prehľadávačoch, ktoré používate vy aj vaši zákazníci. Internet Explorer 9 je najnovšia verzia najobľúbenejšieho webového prehľadávača na svete. Pri návrhu aplikácie Internet Explorer 9 sme si kládli za cieľ pomôcť komunite webových vývojárov vytvárať webové aplikácie, ktoré disponujú bohatým balíkom funkcií, umožňujú vzájomnú funkčnú spoluprácu a zodpovedajú štandardom, tým, že im poskytneme platformu, nástroje a funkcie umožňujúce vytvárať webové lokality budúcnosti.

Tento dokument ukazuje webovým vývojárom, ktorých zákazníci sa spoliehajú na aplikáciu Internet Explorer, ako využívať nové vylepšenia webových lokalít a aplikácií. Nenechajte si ujsť sprievodnú testovaciu webovú lokalitu, ktorá ponúka praktickú ukážku týchto funkcií. Možnosť podeliť sa o svoje postrehy a podnety a získať ďalšie informácie o novinkách v aplikácii Internet Explorer 9 vám poskytnú poznámky k vydaniu a taktiež článok Novinky v aplikácii Internet Explorer 9 na webovej lokalite MSDN. Najnovšie informácie o aplikácii Internet Explorer 9 ponúka taktiež blog tímu IE. A ako vždy, najaktuálnejšie informácie o aplikácii Internet Explorer pre vývojárov nájdete v centre pre vývojárov Internet Explorer Developer Center na webovej lokalite MSDN.

Cieľom aplikácie Internet Explorer 9 je pomôcť vývojárom pochopiť, aké pokroky aplikácia Internet Explorer 9 dosiahla v nasledujúcich oblastiach platformy:

  • Všestranný výkon prehľadávača
  • Podpora webových štandardov umožňujúca identické fungovanie jedného kódu značkovacieho jazyka v rôznych prehľadávačoch
  • Nové grafické funkcie využívajúce výkon počítačov so systémom Windows

Všestranný výkon prehľadávača

Na výkone prehľadávača sa podieľa veľa rôznych subsystémov, ktoré sú súčasťou prehľadávača. Rôzne webové lokality – a rôzne činnosti vykonávané v rámci tej istej webovej lokality – kladú na prehľadávač rôznu záťaž a rôzne požiadavky. Webové aplikácie ako Windows Live Mail alebo Microsoft Office Web Apps napríklad zamestnávajú subsystémy prehľadávača spôsobom úplne odlišným od webových lokalít na zhromažďovanie správ, akými sú napríklad webové lokality Bing News alebo Digg.

Uvedenie nového jadra Chakra pre JavaScript

Výkon jadra pre vykonávanie skriptov tvorí len jednu časť celkového dojmu z výkonu prehľadávača. Výkon skriptov v aplikácii Internet Explorer 8 sa oproti aplikácii Internet Explorer 7 exponenciálne zvýšil a to isté sa podarilo aj novému jadru Chakra pre JavaScript v aplikácii Internet Explorer 9. Jadro Chakra paralelne interpretuje, kompiluje a vykonáva kód a, ak sú k dispozícii, využíva pritom viac jadier procesora. Ďalšie informácie nájdete v článku Nové jadro pre JavaScript v aplikácii Internet Explorer 9 v blogu tímu IE.

Tím aplikácie Internet Explorer samozrejme skúma výkonnostné charakteristiky všetkých subsystémov prehľadávača, tak ako ich využívajú skutočné webové lokality. Cieľom je poskytnúť vo všetkých smeroch lepší výkon pre skutočné webové lokality – nielen v porovnávacích testoch.

Podpora webových štandardov umožňujúca jednotný kód značkovacieho jazyka

Internet Explorer poskytuje webovým vývojárom bohatý balík funkcií podporujúcich vzájomnú funkčnú spoluprácu. Tím aplikácie Internet Explorer si je vedomý toho, že nechcete znovu a znovu prepisovať a testovať svoje webové lokality. Prijatie štandardov výrobcami prehľadávačov je dobrým krokom k dosiahnutiu tohto cieľa.

Prostredníctvom aplikácie Internet Explorer 8 tím aplikácie Internet Explorer poskytol implementáciu štandardu CSS 2.1 prinášajúcu vysokú úroveň funkčnej spolupráce a súčasne konzorciu World Wide Web Consortium (W3C) mohol ponúknuť testovací balík obsahujúci viac než 7 200 testov. To je veľmi dôležité. Bez overovacích testov je konzistentná implementácia štandardov oveľa zložitejšia a pre vývojárov je potom náročnejšie môcť sa na tieto štandardy spoľahnúť.

Internet Explorer 9 sa veľmi zameriava na podporu štandardov a vzájomnú funkčnú spoluprácu. Súčasťou aplikácie Internet Explorer 9 je napríklad nedávno zavedená podpora špecifikácie HTML5, vylepšená podpora viacerých funkcií šablón štýlov CSS3 a (prvýkrát v histórii aplikácie Internet Explorer) integrovaná podpora niekoľkých modulov grafiky SVG.

Nové grafické funkcie využívajúce výkon počítačov so systémom Windows

Ekosystém Windows prináša úžasné hardvérové inovácie. Prostredníctvom aplikácie Internet Explorer 9 weboví vývojári teraz môžu tieto inovácie využiť vďaka hardvérovo akcelerovanému vykresľovaniu grafiky a textu.

Internet Explorer 9 využíva aplikačné programové rozhrania (API) DirectX systému Windows a sprístupňuje tak webovým vývojárom celý rad pokrokových možností. Presunuli sme všetko vykresľovanie grafiky a textu z procesora na grafickú kartu prostredníctvom rozhrania Direct2D a DirectWrite. Hardvérová akcelerácia grafiky znamená, že webové lokality s bohatými, graficky náročnými funkciami môžu byť v systéme Windows vykresľované rýchlejšie s menším zaťažením procesora. Tieto zmeny je navyše možné pri vytváraní webových lokalít využívať automaticky pomocou rovnakých štandardov, na aké sú vývojári zvyknutí.

Zoznam nových funkcií

Pre uľahčenie prinášame zoznam, ktorý obsahuje všetky nové funkcie aplikácie Internet Explorer 9 pre vývojárov. Informácie o zmenách oproti predchádzajúcim zostaveniam aplikácie Internet Explorer 9 nájdete v histórii revízií.

  • Vylepšená podpora šablón štýlov CSS3
    • Zaguľatené rohy prostredníctvom vlastnosti border-radius
    • Funkcie šablón štýlov CSS3 pre pozadia a ohraničenia
    • Vlastnosť opacity
    • Farebné modely RGBA, HSL a HSLA
    • Vlastnosti písem v šablónach štýlov CSS3 a formáty webových písem
    • Dotazy na médium v šablónach štýlov CSS3
    • Obory názvov v šablónach štýlov CSS3
    • Hodnoty a jednotky v šablónach štýlov CSS3
    • Selektory v šablónach štýlov CSS3
  • Vylepšená podpora identifikátorov URI údajov
  • Vylepšenie modelu DOM (Document Object Model)
    • Vylepšené funkcie modelu DOM
    • Prenos kódu XML do a z modelu DOM pomocou analýzy a serializácie
    • Nová podpora úrovní 2 (L2) a 3 (L3) modelu DOM a aktualizované správania
      • Jadro modelu DOM (úrovne L2, L3) a zobrazenia (úroveň L2)
      • Prechádzanie elementov modelu DOM
      • Udalosti modelu DOM (úrovne L2, L3)
      • Podpora špecifikácie HTML na úrovni L2 modelu DOM
      • Štýly v modeli DOM úrovne L2
      • Prechádzanie a oblasti v modeli DOM úrovne L2
    • Nové správanie spracovania prázdnych znakov
  • Vylepšenie funkcií pre skripty ECMAScript
  • Pridaná podpora špecifikácie HTML5
    • Určovanie geografickej polohy
    • Elementy video a audio
    • Element canvas (plátno)
    • Rozhranie Selection (Výber)
    • Vylepšená analýza elementov jazyka HTML
    • Rozhrania API pre výber textu
  • Podpora profilov farieb ICC v2 a v4 u obrázkov
  • Po novom podporovaná metóda msMatchesSelector rozhrania API pre selektory úrovne 2
  • Funkcie pre grafiku SVG
    • Základné tvary: obdĺžniky, kruhy, elipsy, čiary, polyčiary a mnohouholníky
    • Orezanie, maskovanie a skladanie
    • Systémy súradníc, transformácie a jednotky
    • Štruktúra dokumentov, metaúdaje a funkcie pre rozšíriteľnosť
    • Prechody a vzorky
    • Interaktivita
    • Prepojenia a zobrazenia
    • Maľovanie a farby
    • Dráhy, vrátane všetkých funkcií elementu path a atribútu d
    • Text
  • Ďalšie funkcie správy verzií platformy
    • Pripnuté webové lokality
    • Nový režim dokumentu
    • Nový identifikačný reťazec prehľadávača
  • Pridané nástroje pre vývojárov
    • Zvýšenie výkonu
    • Záložka Konzola
    • Záložka Sieť
    • Nástroj na prepínanie identifikačného reťazca prehľadávača
    • Meranie výkonu v reálnych situáciách

Lepšia vzájomná funkčná spolupráca vďaka podpore štandardov

Dôležité    Podpora väčšiny nových štandardov v aplikácii Internet Explorer 9 vyžaduje, aby prehľadávač bol v režime štandardov aplikácie Internet Explorer 9 („režimu IE9“). To je možné najlepšie dosiahnuť pomocou direktívy !DOCTYPE pre voľbu štandardu bez použitia meta značky X-UA-Compatible alebo hlavičky protokolu HTTP.
Direktíva !DOCTYPE pre vyvolanie režimu IE9 vyzerá nasledovne:

<!DOCTYPE html>

Direktívu !DOCTYPE môžete prirodzene použiť spolu s meta značkou X-UA-Compatible alebo hlavičkou protokolu HTTP a zmeniť tak predvolené nastavenie podľa svojho uváženia.

Aktuálny režim dokumentu môžete zistiť tak, že stlačením klávesu F12 otvoríte Nástroje pre vývojárov v aplikácii Internet Explorer, kde túto informáciu nájdete napravo od riadka ponúk. Režim dokumentu môžete zmeniť tak, že v ponuke Režim dokumentu kliknete na položku Štandardy aplikácie Internet Explorer 9.

Časť Správa verzií platformy v tomto sprievodcovi poskytuje aktualizované informácie o správaní režimov dokumentu v aplikácii Internet Explorer 9.

Šablóny štýlov CSS, úroveň 3 (CSS3)

Internet Explorer 9 ponúka väčšiu podporu šablón štýlov (CSS) než všetky predchádzajúce prehľadávače spoločnosti Microsoft. Internet Explorer 9 pokračuje v práci odvedenej na aplikácii Internet Explorer 8 (ktorá aplikácii Internet Explorer zaistila plnú kompatibilitu so špecifikáciou CSS2.1) a pridáva podporu mnohých súčastí špecifikácie CSS3.

Poznámka   Je dôležité si uvedomiť, že mnohé z modulov špecifikácie CSS3 sa stále nachádzajú vo fáze Working Draft (pracovný návrh) alebo Last Call (posledná výzva na podanie pripomienok). Pokým nedospejú do fázy Candidate Recommendation (odporúčaný kandidát), mohli by sa výrazne zmeniť. Viac informácií nájdete najnovšom návrhu modulov špecifikácie CSS3.

2D transformácia v šablónach štýlov CSS3

Internet Explorer 9 pridáva podporu 2D transformácií podľa špecifikácie CSS3. 2D transformácie v šablónach štýlov CSS umožňujú vykonávať v dvojrozmernom priestore transformácie elementov vykresľovaných šablónami štýlov CSS.

Internet Explorer 9 podporuje nasledujúce vlastnosti 2D transformácií:

  • Pomocou vlastnosti -ms-transform je možné pre element použiť jednu alebo viac dvojrozmerných transformačných funkcií.
  • Vlastnosť -ms-transform-origin určuje počiatok transformácie elementu. Túto vlastnosť môžete s výhodou použiť, ak chcete zmeniť predvolený počiatok (ktorým je stred).

Poznámka    Pretože konzorcium W3C zatiaľ modulu 2D transformácií špecifikácie šablón štýlov CSS neudelilo status Candidate Recommendation (odporúčaný kandidát), vlastnosti transform a transform-origin je nutné používať s predponou -ms-, aby ich aplikácia Internet Explorer 9 rozpoznala. Ďalšie informácie o predponách používaných rôznymi výrobcami nájdete v článku IE9, predpony výrobcov a vývojári v blogu tímu IE.

Internet Explorer 9 podporuje použitie nasledujúcich transformačných funkcií pre vlastnosť -ms-transform:

  • Funkcia matrix(a,b,c,d,e,f) určuje 2D transformáciu formou transformačnej matice obsahujúcej šesť hodnôt (af). 
  • Funkcia translate(tx,[ty])  určuje 2D transformáciu pomocou vektora [tx,ty], kde tx je prvý parameter hodnoty posunu a ty je voliteľný druhý parameter hodnoty posunu. Ak parameter ty nie je uvedený, je jeho hodnota nula. (Parametre hodnôt posunu môžu byť percentá alebo dĺžky.)
  • Funkcia translateX(tx)  určuje posun o uvedenú vzdialenosť v smere osi x.
  • Funkcia translateY(ty)  určuje posun o uvedenú vzdialenosť v smere osi y.
  • Funkcia scale(sx,[sy])  určuje operáciu zmeny veľkosti v dvojrozmernom priestore na základe vektora [sx,sy] zmeny veľkosti, ktorý popisujú dva parametre. Ak druhý parameter nie je uvedený, preberá hodnotu prvého parametra.
  • Funkcia scaleX(sx)  určuje operáciu zmeny veľkosti na základe vektora zmeny veľkosti [sx,1], kde hodnota sx je zadaná ako parameter.
  • Funkcia scaleY(sy)  určuje operáciu zmeny veľkosti na základe vektora zmeny veľkosti [1,sy], kde hodnota sy je zadaná ako parameter.
  • Funkcia rotate(angle)  určuje otočenie v dvojrozmernom priestore o uhol určený druhým parametrom podľa počiatku elementu, ktorý je definovaný vlastnosťou transform-origin.
  • Funkcia skewX(ax)  určuje skosenie podľa osi x na základe uvedeného uhla.
  • Funkcia skewY(ay)  určuje skosenie podľa osi y na základe uvedeného uhla.
  • Funkcia skew(ax,[ay])  určuje skosenie podľa oboch osí x aj y. Uhol zadaný ako prvý parameter určuje skosenie podľa osi x. Uhol zadaný ako druhý parameter určuje skosenie podľa osi y. Ak druhý parameter nie je zadaný, je pre uhol y použitá hodnota nula (teda žiadne skosenie podľa osi y).

Vlastnosť -ms-transform-origin prijíma jednu alebo dve hodnoty. Pre obe hodnoty je možné použiť kľúčové slovo, dĺžku alebo percento. Ak vlastnosť -ms-transform-origin nie je nastavená, je počiatok transformácie v strede (čo zodpovedá hodnote 50% 50% vlastnosti -ms-transform-origin).

  • Prvá hodnota určuje horizontálnu pozíciu (pozíciu pozdĺž osi x) a môže byť záporná. Táto hodnota môže byť vyjadrená ako hodnota dĺžky (s použitím ľubovoľnej podporovanej jednotky dĺžky), percento (z celkovej dĺžky rámčeka) alebo jedno z nasledujúcich troch kľúčových slov: left (zodpovedá hodnote 0 % alebo nulovej dĺžke), center (zodpovedá hodnote 50 % alebo polovici dĺžky rámčeka) alebo right (zodpovedá hodnote 100 % alebo celej dĺžke rámčeka).
  • Druhá hodnota určuje vertikálnu pozíciu (pozíciu pozdĺž osi y) a môže byť záporná. Táto hodnota môže byť vyjadrená ako hodnota dĺžky (s použitím ľubovoľnej podporovanej jednotky dĺžky), percento (z celkovej výšky rámčeka) alebo jedno z nasledujúcich troch kľúčových slov: top (zodpovedá hodnote 0 % alebo nulovej výške), center (zodpovedá hodnote 50 % alebo polovici výšky rámčeka) alebo bottom (zodpovedá hodnote 100 % alebo celej výške rámčeka).

Ak je zadaná len jedna hodnota, predpokladá sa, že druhá hodnota zodpovedá stredu.

Pozrime sa na nasledujúci kód.

div {
     -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
     -ms-transform-origin: 60% 100%;
}

V aplikácii Internet Explorer 9 sa nastavením vlastnosti -ms-transform-origin na hodnotu 60 % 100 % nastaví predvolený bod transformácie na 60 % dĺžky a 100 % výšky elementu, ktorého transformácia má byť vykonaná. Vlastnosť -ms-transform element najprv posunie o 200 pixlov v smere osi x a o 100 pixlov v smere osi y. Potom zmení veľkosť elementu o 75 % a nakoniec element otočí o 40 stupňov v smere hodinových ručičiek podľa predvoleného bodu nastaveného vlastnosťou -ms-transform-origin.

Ďalšie informácie o 2D transformáciách v šablónach štýlov CSS3 nájdete na webovej lokalite MSDN.

Modul CSS3 pre pozadia a ohraničenia

Internet Explorer 9 pridáva podporu viacerých funkcií definovaných v module CSS3 pre pozadia a ohraničenia. Najvýznačnejšia nová funkcia, podpora vlastností border-radius je súčasne najžiadanejšou funkciou pre rozhranie šablón štýlov CSS. Internet Explorer 9 taktiež zavádza podporu nasledujúcich nových vlastností špecifikácie CSS3:

Internet Explorer 9 taktiež rozširuje funkcie nasledujúcich súčasných vlastností pozadí a ohraničení šablón štýlov CSS:

Vlastnosti border-radius

Vlastnosti border-radius umožňujú zakriviť rohy ohraničenia „nahradením“ ostrých rohov štvrtinou elipsy, pričom je zadaný polomer každej elipsy. Ide o nasledujúce vlastnosti:

Pozrime sa napríklad na nasledujúci kód:

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

Použitím tohto kódu pre blok textu vznikne nasledujúci efekt.

Modul CSS3 pre prácu s farbami

Internet Explorer 9 pridáva podporu modulu CSS3 pre prácu s farbami. Tento modul zahŕňa podporu pre farebné modely RGBA, HSL, a HSLA vlastnosť opacity a kľúčové slovo currentColor. Internet Explorer 9 taktiež rozširuje podporu kľúčového slova transparent.

Farebný model RGBA

Farebný model RGB bol rozšírený a zahŕňa teraz kanál alfa a priehľadnosť. Formát hodnoty RGBA je rgba(red,green,blue,alpha). Komponenty red (červená), green (zelená) a blue (modrá) sa zhodujú s komponentmi farebného modelu RGB a sú vyjadrené ako celé čísla alebo percentá. Komponent alpha (alfa) je vyjadrený ako hodnota v rozmedzí 0.0 (úplne priehľadná) až 1.0 (úplne nepriehľadná).

Pomocou ľubovoľnej z nasledujúcich dvoch deklarácií v šablóne štýlu CSS je napríklad možné nastaviť červenú farbu pozadia s 50 %-nou priehľadnosťou:

background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);

Je potrebné si pamätať, že na rozdiel od hodnôt RGB hodnoty RGBA nepodporujú hexadecimálny zápis.

Farebný model HSL

Internet Explorer 9 podporuje farebné hodnoty odtieň-sýtosť-svetlosť (hue-saturation-lightness, HSL) modulu CSS pre prácu s farbami. Vo farebnom modeli HSL je „odtieň“ definovaný ako uhol zadanej farby na farebnom kolese (červená má napríklad hodnotu 0 alebo 360, zelená 120 a modrá 240). „Sýtosť“ a „svetlosť“ sú vyjadrené ako percentá. Nasledujúca deklarácia šablón štýlov CSS napríklad definuje červené pozadie.

background-color: hsl(0,100%,50%);
Farebný model HSLA

Aplikácia Internet Explorer 9 taktiež rozširuje farebný model HSL o kanál alfa. Rovnako ako v prípade modelu RGBA je kanál alfa vyjadrený ako hodnota v rozmedzí 0.0 až 1.0. Nasledujúca deklarácia šablón štýlov CSS napríklad definuje červené pozadie s 50 %-nou priehľadnosťou.

background-color: hsla(0,100%,50%,0.5);
Vlastnosť opacity (nepriehľadnosť)

Internet Explorer 9 pridáva vlastnosť opacity (nepriehľadnosť) modulu CSS pre prácu s farbami, ktorá umožňuje riadiť priehľadnosť na úrovni elementov. Podobne ako v prípade komponentu alpha (alfa) hodnôt RGBA je hodnota vlastnosti opacity číslo v rozmedzí 0.0 (úplne priehľadná) až 1.0 (úplne nepriehľadná). Vlastnosť opacity je k dispozícii pre všetky elementy.

Nasledujúci príklad ukazuje vlastnosť opacity v prípade farby námornícka modrá s postupným zvyšovaním hodnôt nepriehľadnosti o 0,2 od 0 do 1.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0.2;"></div>
    <div style="background: navy; opacity: 0.4;"></div>
    <div style="background: navy; opacity: 0.6;"></div>
    <div style="background: navy; opacity: 0.8;"></div>
    <div style="background: navy; opacity: 1;"></div>
</div>

Tento príklad vygeneruje nasledujúci výstup pre element div s rozmermi 25 × 125 pixlov.

Kľúčové slová farieb

Modul CSS3 pre prácu s farbami stanovuje zhodný zoznam kľúčových slov farieb šablón štýlov CSS ako v prípade špecifikácie SVG 1.0. I keď grafika SVG je po novom podporovaná až v aplikácii Internet Explorer 9, táto zmena bola implementovaná už v aplikácii Internet Explorer 8.

Internet Explorer 9 zavádza kľúčové slovo currentColor (aktuálna farba) modulu CSS pre prácu s farbami, ktoré označuje aktuálnu hodnotu vlastnosti color (farba) pre ľubovoľnú vlastnosť, pre ktorú je možné použiť hodnotu color. V prípade použitia pre samotnú vlastnosť color hodnota currentColor zodpovedá hodnotecolor:inherit.

Internet Explorer 9 taktiež rozširuje použitie kľúčového slova transparent nad rámec vlastností border-color (farba ohraničenia) a background-color (farba pozadia). Teraz je možné ho použiť pre ľubovoľnú vlastnosť, ktorá akceptuje vlastnosť color (farba).

Modul CSS3 pre prácu s písmami

Nové verzie špecifikácie CSS vždy poskytujú lepšiu typografickú kontrolu. Súčasne ale môže byť frustrujúci nedostatok vzájomne spolupracujúcich formátov webových písem. Internet Explorer 9 vylepšuje súčasnú podporu písem v šablónach štýlov CSS a dosahuje súlad s modulom CSS3 pre prácu s písmami. Pridáva taktiež podporu formátu WOFF (Web Open Font Format) a písem TrueType vo formáte raw.

Vlastnosti písem

Vďaka tomu, že bola aktualizovaná vlastnosť font-weight, aplikácia Internet Explorer Platform 9 teraz počíta váhu písma tak, ako stanovuje modul CSS3 pre prácu s písmami.

Vlastnosť font-size bola aktualizovaná tak, aby zmena veľkosti na základe jednotlivých kľúčových slov zodpovedala definícii v module CSS3 pre prácu s písmami. Mapovanie kľúčových slov a veľkostí nadpisov jazyka HTML teraz taktiež zodpovedá špecifikáciám modulu CSS3 pre prácu s písmami.

Internet Explorer 9 po novom podporuje vlastnosť font-stretch, ktorá umožňuje vybrať normálne, zúžené alebo rozšírené písmo z určitej rodiny písem. Táto vlastnosť je taktiež k dispozícii ako popisovač pravidiel @font-face.

Pravidlo @font-face

Pravidlo @font-face umožňuje pripájanie písem. To znamená, že šablóna štýlu sa môže odkazovať na konkrétny súbor písma, ktorý prehľadávač prevezme a použije. Pozrime sa napríklad na nasledujúci kód.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype"); } p {font-family: MyFont, serif; }

Pravidlo @font-face v tomto príklade ukladá prehľadávaču, aby z adresy URL, ktorú určuje popisovač src, prevzal súbor písma obsahujúci uvedené písmo. V aplikácii Internet Explorer 8 a predchádzajúcich verziách sa vyskytovala chyba, ktorá spôsobovala, že popisovač src bol ignorovaný, ak obsahoval voliteľný reťazec format, podobne ako je tomu v predchádzajúcom príklade. V aplikácii Internet Explorer 9 je popisovač src analyzovaný v súlade s očakávaním.

Internet Explorer 9 taktiež pridáva podporu popisovača unicode-range, ktorý umožňuje určiť, aký rozsah znakov Unicode dané písmo podporuje. V nasledujúcej ukážke kódu je napríklad stanovený rozsah základných znakov ASCII.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Formáty webových písem

Spoločnosť Microsoft aplikáciu Internet Explorer 9 vytvorila tak, aby poskytla čo najväčšiu možnosť voľby webových písem. Za týmto účelom sme:

  • Zaistili spätnú kompatibilitu a pokračujúcu podporu písem Embedded OpenType (EOT)
  • Pridali podporu formátu WOFF (Web Open Font Format), ktorý vytvára balíčky písem SFNT (TrueType, OpenType a Open Font Format) s použitím samostatnej kompresie jednotlivých tabuliek pomocou kompresného formátu ZIP.
  • Pridali podporu pre inštalovateľné (bez nutnosti nastavenia bitov oprávnenia na vloženie) písma TrueType vo formáte raw.

Príklady webových písem v aplikácii Internet Explorer 9 vám poskytnú ukážky Webové písma a Ďalšie webové písma na testovacej webovej lokalite aplikácie Internet Explorer.

Ďalšie informácie o písmach šablón štýlov CSS3 v aplikácii Internet Explorer 9 nájdete na webovej lokalite MSDN.

Modul CSS3 pre dotazy na médium

V module CSS3 pre dotazy na médium sú špecifikované metódy, ktoré webovým vývojárom umožňujú stanoviť rozsah šablón štýlov pre balík konkrétnych možností zariadenia. Môže byť napríklad vhodné použiť odlišný návrh stránok pre používateľov, ktorí si ich prezerajú na mobilnom zariadení (s veľmi malou obrazovkou, obmedzenou paletou farieb, nízkym rozlíšením atď.), oproti netbooku (s malou obrazovkou, úplnou paletou farieb, vysokým rozlíšením atď.) alebo štandardnému počítaču (s veľkou obrazovkou, úplnou paletou farieb, vysokým rozlíšením atď.). Úplný zoznam vlastností média podporovaných v dotazoch na médium špecifikácie CSS3 tvoria vlastnosti width (šírka), height (výška), device-width (šírka zariadenia), device-height (výška zariadenia), orientation (orientácia), aspect-ratio (pomer strán), device-aspect-ratio (pomer strán zariadenia), color (farba), color-index (index farieb), monochrome (monochromatické) a resolution (rozlíšenie).

Nasledujúca deklarácia je typickým príkladom dotazu na médium, ktorý využíva pravidlo @media.

@media screen and (max-width:400px) {div {border:none;}}

V tomto prípade kľúčové slovo screen (obrazovka) určuje cieľový typ média a max-width (maximálna šírka) je vlastnosť cieľového média. V deklarácii sa uvádza, že zadané pravidlá (žiadne ohraničenie elementov div) sa majú použiť, iba ak je stránka zobrazená na obrazovke so šírkou maximálne 400 pixlov. Vlastnosti média je možné používať spoločne a vytvárať ešte konkrétnejšie dotazy, tak ako v nasledujúcom príklade.

@media screen and (max-width:400px) and (max-height:600px) {…}

Táto deklarácia určuje použitie pravidiel, ak je médium obrazovka so šírkou maximálne 400 pixlov a s výškou maximálne 600 pixlov.

Praktickú ukážku dotazov na médium vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

Internet Explorer 9 zavádza podporu dotazov na médium v kóde CSS, HTML, XML a XHTML. Ďalšie informácie o dotazoch na médium v aplikácii Internet Explorer 9 nájdete na webovej lokalite MSDN.

Modul CSS3 pre obory názvov

Internet Explorer 9 podporuje väčšinu špecifikácií modulu CSS3 pre obory názvov. Obory názvov šablón štýlov CSS vývojárom umožňujú deklarovať predvolený obor názvov pre súbor šablón štýlov CSS. To znamená, že tento obor názvov je predvoleným oborom názvov všetkých elementov a atribútov.

Pomocou oborov názvov šablón štýlov CSS vývojári taktiež môžu vytvárať predpony oborov názvov, ktoré je možné následne použiť v rámci súboru šablón štýlov CSS. Internet Explorer 9 navyše umožňuje deklarovať obor názvov určený pre elementy grafiky SVG.

Pravidlo @namespace

Pravidlo @namespace deklaruje obor názvov XML (a voliteľne jeho predponu) a spája ho s reťazcom, ktorý predstavuje názov oboru názvov. Nasledujúce pravidlo napríklad deklaruje predvolený obor názvov.

@namespace "http://www.w3.org/1999/xhtml";

Predvolený obor názvov sa používa pre názvy bez explicitného komponentu oboru názvov.

Ak deklarácia pravidla @namespace zahŕňa predponu, je predponu možné použiť v názvoch s uvedeným oborom názvov. Ak je napríklad uvedená nasledujúca deklarácia oboru názvov prfx

@namespace prfx "http://prfx.contoso.com";

…nasledujúcemu selektoru vyhovujú elementy E v obore názvov odkazované pomocou predpony prfx prefix.

prfx|E

Nasledujúci príklad je o niečo zložitejší.

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";
p {background-color:red;} prfx|p {background-color:blue;}
msft|p {background-color:green;}

V tomto príklade sú vytvorené dve predpony oborov názvov. Všetky elementy p z ľubovoľného oboru názvov sú najprv ofarbené červeno. Všetky elementy p v obore názvov prfx sú potom prefarbené modro a elementy p v obore názvov msft sú prefarbené zeleno.

Nasledujúci príklad upravuje štýl elementu SVG.

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

Pri použití oboru názvov a deklarácie z tohto príkladu všetky kruhy vytvorené pomocou grafiky SVG získajú červenú výplň.

Ďalšie informácie nájdete na stránke s referenčnými informáciami pre pravidlo @namespace na webovej lokalite MSDN.

Modul CSS3 pre hodnoty a jednotky

Internet Explorer 9 pridáva podporu mnohých nových hodnôt a jednotiek popísaných v module CSS3 pre hodnoty a jednotky. Väčšina týchto nových hodnôt a jednotiek je vyžadovaná pre podporu ostatných funkcií špecifikácie CSS3 popísaných v tomto dokumente.

Internet Explorer 9 pridáva podporu nasledujúcich hodnôt a jednotiek:

  • deg: stupne (jednotka uhla)
  • grad: grády (jednotka uhla)
  • rad: radiány (jednotka uhla)
  • turn: otočky (jednotka uhla)
  • ms: milisekundy (jednotka času)
  • s: sekundy (jednotka času)
  • rem: veľkosť písma koreňového elementu (relatívna jednotka dĺžky)
  • vw: šírka zobrazenia (relatívna jednotka dĺžky)
  • vw: výška zobrazenia (relatívna jednotka dĺžky)
  • vm: menšia z hodnôt šírka a výška zobrazenia (relatívna jednotka dĺžky)
  • ch: šírka nula (šírka piktogramu nula v písme použitom na vykresľovanie; relatívna jednotka dĺžky)

Internet Explorer 9 navyše aktualizuje funkciu attr(), ktorá slúži pre vygenerovaný obsah. Je možné ju teraz použiť pre ľubovoľnú vlastnosť a prijíma viac parametrov.

Nasledujúca funkcia špecifikácie CSS3 je v aplikácii Internet Explorer 9 po novom podporovaná:

  • calc(): počíta hodnoty s použitím aritmetických operátorov a je možné ju použiť všade, kde sú povolené hodnoty dĺžky.

Viac informácií o funkciách šablón štýlov CSS nájdete v článku Referenčné informácie pre hodnoty a jednotky v šablónach štýlov CSS na webovej lokalite MSDN.

Selektory šablón štýlov CSS3

Internet Explorer 9 podporuje doplnky syntaxe selektorov šablón štýlov CSS uvedené v odporúčaní pre selektory špecifikácie CSS3. V tomto dokumente sú uvedené selektory, pre ktoré Internet Explorer 9 po novom zavádza podporu. (Úplné informácie o podpore selektorov v aplikácii Internet Explorer nájdete v článku Kompatibilita so šablónami štýlov CSS a aplikácia Internet Explorer na webovej lokalite MSDN.)

Ďalšie informácie nájdete v časti s referenčnými informáciami pre selektory šablón štýlov CSS na webovej lokalite MSDN.

Praktickú ukážku selektorov špecifikácie CSS3 vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

Štrukturálne pseudotriedy

Štrukturálne pseudotriedy umožňujú výber na základe dodatočných informácií stromu dokumentu, ktoré nie je možné vybrať pomocou jednoduchých selektorov alebo kombinátorov.

Nasledujúci kód vyberie element E, ktorý je koreňom dokumentu.

E:root 

Nasledujúci kód vyberie element E, ktorý je n-tým podradeným elementom nadradeného elementu.

E:nth-child(n)

Nasledujúci kód vyberie element E, ktorý je n-tým podradeným elementom nadradeného elementu, počítané od posledného podradeného elementu.

E:nth-last-child(n) 

Nasledujúci kód vyberie element E, ktorý je n-tým elementom toho istého typu na rovnakej úrovni.

E:nth-of-type(n) 

Nasledujúci kód vyberie element E, ktorý je n-tým elementom toho istého typu na rovnakej úrovni, počítané od posledného elementu na rovnakej úrovni.

E:nth-last-of-type(n)

Nasledujúci kód vyberie element E, ktorý je posledným podradeným elementom nadradeného elementu.

E:last-child 

Nasledujúci kód vyberie element E, ktorý je prvým elementom toho istého typu na rovnakej úrovni.

E:first-of-type 

Nasledujúci kód vyberie element E, ktorý je posledným elementom toho istého typu na rovnakej úrovni.

E:last-of-type 

Nasledujúci kód vyberie element E, ktorý je jediným podradeným elementom nadradeného elementu.

E:only-child

Nasledujúci kód vyberie element E, ktorý je jediným elementom toho istého typu na rovnakej úrovni.

E:only-of-type

Nasledujúci kód vyberie element E, ktorý nemá žiadne podradené elementy (vrátane textových uzlov).

E:empty
Pseudotrieda target

Pseudotrieda target slúži na výber cieľového elementu odkazujúceho identifikátora URI. Identifikátor fragmentu slúži na určenie miesta v rámci stránky a tvorí ho znak mriežky, po ktorom nasleduje identifikátor ukotvenia, napríklad: http://www.example.com/mypage.html#section_3.

Nasledujúci kód vyberie element div triedy important ktorý je cieľovým elementom odkazujúceho identifikátora URI. Ak identifikátor URI dokumentu nemá žiadny identifikátor fragmentu, potom neexistuje žiadny cieľový element.

div.important:target
Pseudotriedy stavov prvkov používateľského rozhrania

Pseudotriedy stavov prvkov používateľského rozhrania slúžia na výber prvkov používateľského rozhrania (ovládacích prvkov formulárov, napríklad prepínačov alebo začiarkovacích políčok), ktoré sa nachádzajú v určitom stave – povolený, zakázaný alebo vybratý (začiarknutý).

Nasledujúci kód vyberie element E ovládacieho prvku formulára, ktorý je v stave enabled (povolený).

E:enabled

Nasledujúci kód vyberie element E ovládacieho prvku formulára, ktorý je v stave disabled (zakázaný).

E:disabled 

Nasledujúci kód vyberie element E ovládacieho prvku formulára, ktorý je vybratý.

E:checked 

Pseudotrieda :indeterminate vyberie prepínače a začiarkovacie políčka, ktorých stav prepnutia nie je možné určiť – nie sú ani začiarknuté (vybrané), ani nezačiarknuté (ich výber bol zrušený). Nasledujúci kód vyberie element E ovládacieho prvku formulára, ktorého stav nie je možné určiť.

E:indeterminate

Poznámka   Pseudotrieda :indeterminate v aktuálnej špecifikácii CSS3 už nie je definovaná, ale podporuje ju viacero obľúbených prehľadávačov.

Pseudotrieda negácie

Pseudotrieda negácie ako parameter jednoduchý selektor a slúži na výber elementov, ktoré nie sú týmto parametrom vybrané. Nasledujúci kód vyberie element E, ktorý nevyhovuje jednoduchému selektoru s:

E:not(s)
Pseudoelement fragmentov používateľského rozhrania

Pseudoelement fragmentov používateľského rozhrania ::selection, slúži na výber ľubovoľnej používateľom označenej časti stránky, vrátane textu vnútri editovateľných textových polí. Tento pseudoelement je možné použiť pre vlastnosti color (farba) a background-color (farba pozadia). Nasledujúci kód vyberie všetok text vybraný používateľom v rámci elementu E.

E::selection 

Poznámka  Pseudotrieda ::selection v aktuálnej špecifikácii CSS3 už nie je definovaná, ale podporuje ju viacero obľúbených prehľadávačov.

Ďalšie funkcie šablón štýlov CSS

V aplikácii Internet Explorer 9 bola implementovaná podpora určitých častí pracovného návrhu modulu CSS pre zobrazenie objektového modelu (OM).

Modul pre zobrazenie objektového modelu šablón štýlov CSS (CSSOM)

Modul CSS pre zobrazenie objektového modelu definuje rozhrania API, ktoré webovým vývojárom umožňujú kontrolovať a programovo meniť vizuálne vlastnosti dokumentu a jeho obsah, vrátane umiestnenia v rámci oblasti rozloženia, šírky zobrazenia a posúvania prvkov. Aplikácia Internet Explorer 8 zaviedla čiastočnú podporu tohto modulu. Internet Explorer 9 podporu rozširuje o ďalšie rozhrania API zobrazenia objektového modelu CSS:

Identifikátory URI údajov

Identifikátory URI údajov sú prostriedkom na priame vloženie údajov do kontextu webovej stránky. Najčastejším príkladom je vloženie veľmi malého obrázka do webovej stránky, napríklad:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Pri umiestnení tohto kódu do atribútu src elementu img dochádza vlastne k vloženiu obrázka do kódu značkovacieho jazyka stránky. Internet Explorer 8 zaviedol identifikátory URI údajov v aplikácii Internet Explorer.

aplikácii Internet Explorer 9 vývojári teraz môžu identifikátory URI údajov používať v atribúte src elementu script. Maximálna veľkosť identifikátorov URI údajov bola navyše zvýšená z 32 kilobajtov (kB) v aplikácii Internet Explorer 8 na 4 gigabajty (GB) v aplikácii Internet Explorer 9.

Vylepšenia modelu DOM (Document Object Model)

Internet Explorer 9 prináša významne vylepšený model DOM (Document Object Model). Okrem ďalšej podpory špecifikácie konzorcia World Wide Web Consortium (W3C) modelu DOM úrovní 2 (L2) a 3 (L3) aplikácia Internet Explorer 9 prináša vylepšený model DOM a taktiež lepšie spracovanie prázdnych znakov.

Zavedenie vylepšeného modelu DOM

Vylepšený model DOM v aplikácii Internet Explorer 9 zvyšuje celkový výkon režimu štandardov aplikácie Internet Explorer 9 (režimu IE9) vďaka urýchleniu vykonávania skriptov medzi novým jadrom Chakra pre JavaScript a jadrom Trident pre rozloženie a vďaka presunutiu vstupných bodov modelu DOM do jadra Chakra. Viac informácií o režime IE9 nájdete v časti Lepšia vzájomná funkčná spolupráca vďaka podpore štandardov tohto dokumentu. Vylepšený model DOM súčasne zaisťuje správnu objektovú hierarchiu dedičnosti v modeli DOM v súlade so špecifikáciami W3C DOM L2 a L3.

Nástroje pre vývojárov F12 teraz pri spúšťaní stránok v režime štandardov aplikácie Internet Explorer 9 zohľadňujú typy objektov vylepšeného modelu DOM. (Ďalšie informácie o nástrojoch pre vývojárov F12 v aplikácii Internet Explorer 9 získate v časti Nástroje pre vývojárov F12 tohto dokumentu.) Namiesto zobrazovania starších typov založených na modeli COM (pozostávajúcich z viacerých rozhraní a objektov Disp) stránky v režime IE9 udávajú skutočné názvy typov objektov vylepšeného rozhrania DOM, ktoré používa jadro Chakra, v súlade so štandardmi úrovní L2 a L3 modelu DOM konzorcia W3C (napríklad NodeList, DocumentType, HTMLBodyElementa ďalšie).

Vylepšený model DOM v aplikácii Internet Explorer 9 podstatne zlepšuje vzájomnú funkčnú spoluprácu medzi aplikáciou Internet Explorer 9 a ďalšími prehľadávačmi. Súčasne v mnohých situáciách poskytuje zvýšenie výkonu, najmä vďaka tomu, že objekty modelu DOM sú reprezentované natívnymi objektmi jazyka JavaScript.

Vylepšený model DOM rozširuje celý rad nových funkcií poskytovaných novým jadrom Chakra pre JavaScript na objekty a rozhrania API poskytované modelom DOM, vrátane:

  • selektívnej rozšíriteľnosti objektov modelu DOM (prostredníctvom metódy Object.preventExtensions),
  • možnosti mutácie rozhrania API modelu DOM (pomocou mutácie popisovačov vlastností rozhrania API modelu DOM alebo úplného odstránenia vlastností),
  • podpory notácie JSON pre objekty modelu DOM,
  • natívnych objektov jazyka JavaScript prostredníctvom dedičnosti ( (hasOwnProperty, toString atď.),
  • natívnych funkcií jazyka JavaScript prostredníctvom dedičnosti (call, apply, bind)

Tieto možnosti zjednocujú programovanie natívnych objektov jadra pre JavaScript a objektov modelu DOM. Ďalej boli pridané nasledujúce nové funkcie modelu DOM:

  • Výnimky modelu W3C DOM: Výnimky modelu DOM sú nové typy objektov chýb vyvolaných v dôsledku zlyhania rozhrania API modelu DOM. Kódy chýb sú pre tieto výnimky mapované na konštanty definované v samotných výnimkách.
  • Vlastnosti „const“ modelu W3C DOM (napríklad Node.ELEMENT_NODE): Vlastnosti „const“ sú jednoduché polia, ktoré poskytujú názov pre veľa bežných číselných návratových hodnôt z iných rozhraní API modelu DOM. Čitateľnosť kódu je napríklad možné zlepšiť porovnaním čísla, ktoré vracia rozhranie API nodeType modelu DOM, s konštantou: if (myElement.nodeType == Node.ELEMENT_NODE)

Prenos kódu XML do a z modelu DOM pomocou analýzy a serializácie

I keď aplikácia Internet Explorer už poskytovala podporu pre prenos kódu XML do a z natívneho modelu DOM pomocou analýzy a serializácie, neexistoval žiadny spôsob, ako v skripte k týmto funkciám jednoducho získať prístup z dokumentov HTML. Z toho dôvodu Internet Explorer 9 pridáva podporu rozhraní DOMParser a XMLSerializer. Tieto rozhrania majú širokú podporu aj v ďalších obľúbených prehľadávačoch.

Nasledujúci príklad skriptu ukazuje, ako analyzovať reťazec a začleniť ho do dokumentu XML pomocou rozhrania DOMParser:

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

Nasledujúci príklad skriptu ukazuje, ako serializovať uzol modelu DOM (vrátane uzlov z dokumentov HTML) do reťazca XML pomocou rozhrania XMLSerializer:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

Úrovne 2 a 3 modelu DOM (Document Object Model)

Internet Explorer 9 pridáva väčšiu podporu úrovní 2 a 3 modelu DOM (Document Object Model ) a vylepšuje podporu úrovne L2 modelu DOM oproti súčasným implementáciám v aplikácii Internet Explorer. Pridáva taktiež podporu pracovného návrhu špecifikácie WebIDL.

Internet Explorer 9 zavádza podporu nasledujúcich funkcií modelu DOM.

Jadro modelu DOM (úrovne L2 a L3) a zobrazenia (úroveň L2)

Internet Explorer 9 pridáva podporu mnohých nových rozhraní API jadra modelu DOM úrovne L2. Patria medzi ne rozhrania:

Pridáva taktiež podporu pre vzájomnú spoluprácu v oblasti oborov názvov modelu DOM, napríklad podporu metód *NS a vlastností súvisiacich s obormi názvov (createElementNS, namespaceURI, localName, prefix a ďalších). Internet Explorer 9 taktiež podporuje veľa bežne používaných metód a vlastností jadra modelu DOM úrovne L3:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 plne podporuje vlastnosti zobrazení modelu DOM úrovne L2.

Ďalšie informácie získate v časti s referenčnými informáciami pre jadro a zobrazenia modelu DOM na webovej lokalite MSDN.

Prechádzanie elementov modelu DOM

V špecifikácii prechádzania elementov je definované rozhranie ElementTraversal Toto rozhranie umožňuje prechádzanie elementov stromu modelu DOM pomocou skriptu, napríklad uzlov elementov v dokumentoch HTML, XML alebo SVG. Internet Explorer 9 zavádza podporu rozhrania ElementTraversal a jeho piatich vlastností.

Udalosti modelu DOM úrovne L2 a L3

V špecifikáciách udalostí modelu DOM je popísaný systém udalostí modelu DOM, ktorý umožňuje registráciu obslužných rutín udalostí, popisuje tok udalostí stromom dokumentu a definuje informácie kontextu udalostí. Ďalšie informácie o modeli udalostí nájdete v dokumente Pochopenie modelu udalostí na webovej lokalite MSDN.

Jedným z cieľov pre systém udalostí v aplikácii Internet Explorer 9 je jeho zladenie so systémom umožňujúcim vzájomnú spoluprácu, ktorý definuje konzorcium W3C. To umožňuje opustiť proprietárny model attachEvent aplikácie Internet Explorer a odstraňuje nutnosť vetvenia kódu pre rôzne prehľadávače.

  • Udalosti modelu DOM úrovne L2 a L3
    • Rozhrania API pre registráciu a odosielanie udalostí (addEventListener, removeEventListener, createEvent, a dispatchEvent)
    • Fáza zachytenia udalostí, ich prestúpenie hierarchiou a dosiahnutie cieľa
    • Nové objekty udalostí (KeyboardEvent, MouseEvent, MutationEvent atď.), objekt CustomEvent pre udalosti definované aplikáciou a taktiež rozhrania objektov udalostí z iných štandardov, napríklad DragEvent
    • Nové typy udalostí založené na štandardoch (udalosti kompozície, udalosti pre prácu s textom, udalosti kolieska myši, udalosti mutácie modelu DOM atď.) zo špecifikácie HTML5

Poznámka   Udalosti mutácie modelu DOM sú zahrnuté z dôvodu úplnosti, ale v štandarde konzorcia W3C neboli schválené.

Podpora špecifikácie HTML na úrovni L2 modelu DOM

Internet Explorer 9 pridáva podporu rozhraní HTML úrovne L2 modelu DOM, ktoré neboli k dispozícii v predchádzajúcich verziách aplikácie Internet Explorer, vrátane rozhraní špecifikácie HTML5, napríklad getElementsByClassName a characterSet. Internet Explorer 9 vylepšil objektový model v tabuľkách, najmä čo sa týka operácií modelu DOM pre pridávanie a odoberanie elementov.

getElementsByClassName

Metóda getElementsByClassName vracia všetky uzly elementu, ktorých atribút triedy zodpovedá vstupnému reťazcu. Má podobnú funkciu ako metóda getElementsByTagName.

characterSet

Atribút characterSet vracia preddefinovaný názov MIME kódovania znakov aktuálneho dokumentu.

Štýly v modeli DOM úrovne L2

Špecifikácia štýlov modelu DOM úrovne L2 definuje rozhrania API určené pre programový prístup k štýlom jednotlivých elementov aj celým šablónam štýlov a ich zmenu pomocou odstránenia alebo úpravy pravidiel. Predchádzajúce verzie aplikácie Internet Explorer tieto operácie vykonávali pomocou proprietárnych metód. Internet Explorer 9 pridáva podporu štandardizovaných rozhraní API definovaných v špecifikácii štýlov modelu DOM úrovne L2. Navyše bola pridaná podpora štandardizovaných rozhraní API, ku ktorým neexistujú ekvivalentné rozhrania v aplikácii Internet Explorer, ako je napríklad metóda getComputedStyle. Praktickú ukážku metódy getComputedStyle vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

Ďalšie informácie o štýloch modelu DOM získate na webovej lokalite MSDN.

Prechádzanie a oblasti v modelu DOM úrovne L2

Oblasti tvoria v modeli DOM časť špecifikácie prechádzania a oblastí v modeli DOM úrovne L2, ktorá definuje všeobecný spôsob výberu obsahu dokumentu medzi dvoma hraničnými bodmi. Hraničné body sú stanovené pomocou kontajnera (nadradeného elementu obsahujúceho bod) a posunu (miesta v kontajneri, na ktorom bod leží). Oblasti modelu DOM v spojení s rozhraním Selection (Výber) špecifikácie HTML5 umožňujú také funkcie ako napríklad programové načítanie oblasti, výber podradených elementov alebo odstránenie výberu.

Internet Explorer 9 podporuje všetky rozhrania Range modelu DOM úrovne L2 a taktiež všetky rozhrania špecifikácie HTML5 pre výber, napríklad už hojne používanú metódu setSelectionRange.

Ďalšie informácie získate v popise rozhrania Range modelu DOM na webovej lokalite MSDN.

Prechádzanie tvorí časť špecifikácie prechádzania a oblastí v modeli DOM úrovne L2, ktorá definuje spôsob pohybu v dokumente a filtrovanie uzlov podľa potreby. Internet Explorer 9 podporuje dva spôsoby prechádzania modelu DOM (NodeIterator a TreeWalker) a taktiež dva spôsoby filtrovania uzlov (whatToShow a NodeFilter) definované v špecifikácii konzorcia W3C.

Ďalšie informácie o prechádzaní modelu DOM získate na webovej lokalite MSDN.

Spracovanie prázdnych znakov v modeli DOM

Aplikácia Internet Explorer používala iný postup sprístupnenia prázdnych znakov než ostatné prehľadávače. Malá vzájomná spolupráca v tejto oblasti bola pre webových vývojárov frustrujúca. Ak aplikácia Internet Explorer v predchádzajúcich verziách narazila na prázdne znaky, zlúčila ich a neumiestila do textových uzlov modelu DOM. V aplikácii Internet Explorer 9 sú v súlade s očakávaním prázdne znaky zachované a umiestnené do textových uzlov v rámci modelu DOM. Toto správanie sa zhoduje s ostatnými najdôležitejšími prehľadávačmi.

ECMAScript 5

Internet Explorer 9 okrem vyššieho výkonu skriptov JavaScript zavádza taktiež vylepšenie funkcií pre jazyk JavaScript. V decembri 2009 organizácia ECMA schválila piate vydanie špecifikácie ECMA-262 ako nástupcu tretieho vydania (štvrté vydanie nebolo nikdy publikované). V tom istom roku spoločnosť Microsoft prvýkrát zaviedla čiastočnú podporu špecifikácie ECMAScript 5 (ES5) v rámci pridania natívnej podpory notácie JSON do aplikácie Internet Explorer 8 a do aplikácie Internet Explorer 8 bola pridaná podpora prístupových metód pre objekty modelu DOM. Špecifikácia ES5 však okrem notácie JSON a podpory prístupových metód pre model DOM štandardizuje mnohé ďalšie vylepšenia jazyka JavaScript.

V aplikácii Internet Explorer 9 je implementovaných veľa dôležitých funkcií špecifikácie ECMAScript 5. Patria medzi ne:

V aplikácii Internet Explorer 9 je taktiež opravených niekoľko chýb, ktoré sa vyskytovali v predchádzajúcich implementáciách jazyka JavaScript v aplikácii Internet Explorer. Ďalšie informácie nájdete v blogu tímu aplikácie Internet Explorer. Praktickú ukážku špecifikácie ECMAScript 5 vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

HTML5

V aplikácii Internet Explorer 8 bola zavedená podpora niektorých funkcií pracovného návrhu špecifikácie HTML5 vrátane:

Internet Explorer 9 stavia na výsledkoch práce odvedenej na zaistenie súladu aplikácie Internet Explorer 8 so špecifikáciou HTML5 a implementuje nasledujúce nové funkcie:

Poznámka  Je dôležité si uvedomiť, že v čase vytvárania tohto dokumentu sa špecifikácia HTML5 stále nachádzala vo fáze Working Draft (pracovné návrhy). Pokým nedospeje do fázy Candidate Recommendation (odporúčaný kandidát), mohla by sa výrazne zmeniť. Ďalšie informácie vám poskytne najnovší pracovný návrh špecifikácie HTML5.

Určovanie geografickej polohy podľa špecifikácie HTML5

Internet Explorer 9 pridáva podporu pre určovanie geografickej polohy. Rozhranie pre určovanie geografickej polohy webovej aplikácii poskytuje prístup k aktuálnej geografickej polohe počítača, v ktorom je aplikácia Internet Explorer spustená. Webová stránka môže používateľské prostredie prispôsobiť podľa aktuálnej polohy, napríklad zobraziť polohu na mape alebo zobraziť aktuálne miestne informácie, napríklad predpoveď počasia alebo správy. Údaje o polohe sú vrátené ako súradnice zemepisnej šírky a dĺžky. Rozhrania pre určovanie geografickej polohy v aplikácii Internet Explorer 9 zodpovedajú štandardu stanovenému v špecifikácii rozhraní pre určovanie geografickej polohy.

Praktickú ukážku určovania geografickej polohy nájdete na testovacej webovej lokalite aplikácie Internet Explorer 9.

Ďalšie informácie o určovaní geografickej polohy získate na webovej lokalite MSDN.

Elementy video a audio špecifikácie HTML5

Dvoma najočakávanejšími funkciami špecifikácie HTML5, ktoré teraz Internet Explorer 9 podporuje, sú nové elementy video a audio. Oba elementy video a audio sú definované v časti špecifikácie HTML5 venovanej Embedded content vloženému obsahu.

Elementy video a audio v zásade umožňujú vkladanie audiovizuálneho obsahu do stránok HTML. Weboví vývojári taktiež pre obidva elementy môžu špecifikovať viacero atribútov. Pozrime sa napríklad na nasledujúci kód.

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported. </video>

Tento kód v aplikácii Internet Explorer 9 v priebehu nahrávania videa zobrazí na priestore 400×300 pixlov (atribúty width a height) súbor s obrázkom frame.png (atribút poster). Videosúbor "video.mp4" (atribút src) sa začne automaticky prehrávať po načítaní stránky (atribút autoplay) a zobrazia sa ovládacie prvky na ovládanie videa (atribút controls). Hneď ako dospeje na koniec, video sa začne opäť prehrávať (atribút loop). Ak nebude formát videa podporovaný, bude namiesto neho v rámci elementu video zobrazený text („This content appears…“). Element video taktiež podporuje atribút preload, ktorý prehľadávaču naznačuje, čo podľa webových vývojárov používateľovi prinesie najlepší zážitok.

Príklad praktického použitia elementu video poskytuje ukážka Video panoráma na testovacej webovej lokalite aplikácie Internet Explorer.

Internet Explorer 9 taktiež podporuje element video s viacerými zdrojmi, ktoré sú určené podradenými elementmi source. Pozrime sa napríklad na nasledujúci kód.

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>     <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'> </video>

Pri použití tohto kódu Internet Explorer 9 vyberie prvý podporovaný formát (v tomto prípade druhý element source) a prehrá príslušný zdrojový súbor.

Element audio je definovaný podobne ako element video, avšak bez atribútov width, height a poster. Praktickú ukážku elementu audio vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

Internet Explorer 9 podporuje nasledujúce formáty obsahu:

Názov elementu Podporované formáty
video

Kontajner MP4, video H.264, všetky profily – audio vo formáte AAC alebo MP3

Video vo formáte WebM, ak je nainštalovaný kodek VP8

audio AAC alebo MP3

Ďalšie informácie o elementoch video a audio špecifikácie HTML5 získate na webovej lokalite MSDN.

Element canvas špecifikácie HTML5

Ďalšou možnosťou špecifikácie HTML5, ktorej podpora v aplikácii Internet Explorer 9 bola napäto očakávaná, je element canvas používaný spolu s rozhraním API Canvas 2D. Element canvas, tak ako je definovaný v špecifikácii HTML5, umožňuje vykresľovanie grafiky na plátne tvorenom rastrom závislým od rozlíšenia. Pri kreslení na plátne sa používajú tzv. kontexty, napríklad kontext Canvas 2D definovaný v špecifikácii rozhrania API Canvas 2D konzorcia W3C. Internet Explorer 9 zavádza podporu elementu canvas a ako jeho kontext používa rozhranie API pre kreslenie Canvas 2D . (V aplikácii Internet Explorer 9 je kontext Canvas 2D reprezentovaný ako objekt CanvasRenderingContext2D alebo rozhranie ICanvasRenderingContext2D.) Rovnako ako všetka grafika v aplikácii Internet Explorer 9 je element canvas hardvérovo akcelerovaný pomocou systému Windows a grafického adaptéra.

Element canvas umožňuje pri kreslení využívať obdĺžniky, dráhy, čiary, výplne, oblúky a Bézierove alebo kvadratické krivky. Element canvas navyše v aplikácii Internet Explorer 9 podporuje atribúty width (šírka) a height (výška). (Predvolenou hodnotou atribútov width a height je 300, respektíve 150 pixlov a predvolenou farbou je priehľadná čierna.)

Element canvas predstavuje spôsob, ako programovať grafiku na webe. Značka canvas je dvojrozmerná plocha pre kreslenie v „bezprostrednom režime“ (príkazy kreslenia sú zasielané priamo grafickému hardvéru), pomocou ktorej je možné sprostredkovať grafy v reálnom čase, animácie alebo interaktívne hry bez nutnosti preberať samostatné moduly plug-in. Vďaka rozhraniam API definovaným objektom CanvasRenderingContext2D element canvas umožňuje na kreslenie využívať okrem iného:

S pomocou jazyka JavaScript je možné kresby na plátne animovať alebo vytvoriť interaktívne prostredie, ktoré reaguje na vstup z klávesnice, kliknutie myšou alebo ľubovoľné iné udalosti prehľadávača. Táto ukážka na testovacej webovej lokalite aplikácie Internet Explorer napríklad pomocou iba niekoľkých riadkov kódu jazyka JavaScript vytvára náhodne umiestnené a vyfarbené žiariace čiary.

Element canvas v aplikácii Internet Explorer 9 podporuje atribúty width (šírka) a height (výška). (Predvolenou hodnotou atribútov width a height je 300, respektíve 150 pixlov a predvolenou farbou je priehľadná čierna.)

Internet Explorer 9 podporuje nasledujúce rozhrania kontextu Canvas 2D (členov, ktorých sprístupňuje objekt CanvasRenderingContext2D):

Podrobnejší výklad použitia elementu canvas špecifikácie HTML5 v aplikácii Internet Explorer 9 nájdete na webovej lokalite MSDN. Môžete taktiež navštíviť testovaciu webovú lokalitu aplikácie Internet Explorer, ktorá ponúka ďalšie ukážky elementu canvas. Technické informácie o použití elementu canvas v aplikácii Internet Explorer 9 nájdete na stránke s referenčnými informáciami pre element canvas na webovej lokalite MSDN.

Vylepšenie analýzy kódu HTML

Analýza kódu HTML v aplikácii Internet Explorer 9 bola vylepšená tak, aby viac zodpovedala správaniu, ktoré popisuje návrh špecifikácie HTML5.

Analýza grafiky SVG v kódu HTML

Internet Explorer 9 podporuje priame vkladanie grafiky SVG do kódu HTML. Viac informácií o grafike SVG nájdete v ďalšej časti tejto príručky Grafika SVG (Scaling Vector Graphics).

Analýza kódu XHTML

Internet Explorer 9 dokumenty s typom MIME application/xhtml+xml analyzuje ako dokumenty XHTML.

Všeobecné elementy

Aplikácia Internet Explorer elementy, ktoré nedokázala rozpoznať, predtým analyzovala ako „neznáme“ elementy. Tieto elementy boli sploštené, a preto nebolo možné upraviť ich štýl pomocou pravidiel šablón štýlov CSS, čo nezodpovedalo návrhu špecifikácie HTML5. Internet Explorer 9 toto správanie mení a nerozpoznané elementy teraz analyzuje ako „všeobecné“ elementy. Vďaka tomu môžu fungovať rovnako ako normálne elementy. Vývojári preto nemusia požívať riešenia, ktoré tento problém obchádzajú, napríklad volanie metódy document.createElement, pomocou ktorého je možné aplikáciu Internet Explorer prinútiť k tomu, aby element rozpoznala.

Nasleduje príklad všeobecného elementu – v tomto prípade ide o nedefinovaný element s názvom mydiv.

<style type="text/css">
 mydiv {
     color: blue;
     font-weight: bold;
 }
 </style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

Internet Explorer 8 značku mydiv a s ňou spojené pravidlá šablón štýlov CSS ignoruje. Veta je vykreslená nasledovne.

Internet Explorer 9 značku mydiv analyzuje v súlade s očakávaním a vetu vykresľuje nasledovne.

Prekrývajúce sa značky

Ak kód HTML obsahuje prekrývajúce sa značky, aplikácia Internet Explorer 8 a predchádzajúce verzie tieto značky v čase analýzy nerozdeľujú. Toto správanie je v rozpore s návrhom špecifikácie HTML5. Ak sa niektoré elementy prekrývajú pre účely skriptovania (tak ako v našom príklade), môže to pri skriptovaní spôsobovať mätúce chyby. Internet Explorer 9 sa riadi návrhom špecifikácie HTML5 a prekrývajúce elementy rozdeľuje v čase analýzy.

V nasledujúcom príklade je červeno ofarbený text, ktorý sa nachádza medzi prekrývajúcimi sa značkami i a b.

<script type="text/javascript">
 function load()
 {
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
 }
 </script>

...

<body onload="load();">
 You should be aware of how <b>this <i>affects</b> script</i>.
 </body>

V aplikácii Internet Explorer 8 a predchádzajúcich verziách by výsledkom tohto kódu bol nežiaduci spôsob vykreslenia.

V aplikácii Internet Explorer 9 je kód vykreslený v súlade s očakávaním.

Zmeny v analýze blokov skriptov a štýlov

Internet Explorer 8 a predchádzajúce verzie text v blokoch script ani style neuchovávajú v textových uzloch modelu DOM. Internet Explorer 9 v súlade s očakávaním text v blokoch script a style uchováva v modeli DOM ako textové uzly. Vďaka tomu je zdrojový kód v modeli DOM k dispozícii ako textový uzol a je možné s ním manipulovať pomocou skriptov.

Rozhrania API špecifikácie HTML5 pre výber

Internet Explorer 9 pridáva podporu troch rozhraní API špecifikácie HTML5 pre výber textu. Objekt Selection predstavuje zoznam objektov Range, ktoré umožňuje po novom zavedená podpora oblastí v modeli DOM úrovne L2 v aplikácii Internet Explorer 9. Viac informácií nájdete vyššie v tomto dokumente v časti Vylepšenia modelu DOM (Document Object Model).

Metóda getSelection

Metóda getSelection method returns the Selection vracia pre okno objekt Selection, ktorý predstavuje práve vybraný text.

Vlastnosť selectionStart

Pomocou vlastnosti selectionStart je možné získať posunutie vzhľadom na začiatok práve vybraného textu a umožňuje taktiež nastaviť začiatok výberu.

Vlastnosť selectionEnd

Pomocou vlastnosti selectionEnd je možné získať posunutie vzhľadom na koniec práve vybraného textu a umožňuje taktiež nastaviť koniec výberu.

Sémantické elementy špecifikácie HTML5

Internet Explorer 9 vylepšuje podporu niekoľkých sémantických elementov špecifikácie HTML5. „Sémantický“ element je v tomto kontexte definovaný ako element, ktorého značka popisuje jeho obsah, ale nemá žiadne špeciálne správanie. Sémantické značky sú obzvlášť užitočné pre funkcie uľahčenia.

Internet Explorer 9 vykonáva nasledujúce zmeny v podpore sémantických elementov:

  • Elementy teraz dedia z rozhrania HTMLElement namiesto rozhrania HTMLUnknownElement, v súlade so špecifikáciou HTML5.
  • V predvolenom nastavení je pre tieto elementy teraz použitý štýl uvedený v špecifikácii HTML5.

Teraz sú rozpoznané nasledujúce elementy:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

Profily farieb ICC

Konzorcium ICC (International Color Consortium) publikuje profily farieb popisujúce farebné atribúty softvéru aj hardvéru.

Internet Explorer 9 zavádza podporu profilov farieb v2 a v4 pre obrázky, tak ako ich definuje špecifikácia ICC.

Rozhranie API selektorov úrovne 2

Špecifikácia rozhrania API selektorov úrovne 2 definuje balík rozhraní API umožňujúcich vyhodnocovať selektory v modeli DOM (Document Object Model).

Internet Explorer 8 implementoval rozhrania API selektorov querySelector a querySelectorAll. Internet Explorer 9 pridáva podporu metódy msMatchesSelector.

Grafika SVG (Scaling Vector Graphics)

Podpora grafiky SVG (Scalable Vector Graphics) sa stala jedným z najčastejších požiadaviek na implementáciu v aplikácii Internet Explorer a predstavuje výkonný prostriedok umožňujúci pridať na webovú lokalitu jednoducho škálovateľné vizuálne prvky vyznačujúce sa vysokou vernosťou – od malých a jednoduchých až po veľké a komplexné – bez nutnosti použitia modulu plug-in alebo samostatného prehľadávača.

Spoločnosť Microsoft s potešením oznamuje zavedenie podpory základného balíka funkcií pre grafiku SVG v aplikácii Internet Explorer 9. Podpora grafiky SVG v aplikácii Internet Explorer 9 vychádza z odporúčaní špecifikácie SVG 1.1 (druhé vydanie) (pre prehľadávače klientskych počítačov). Boli implementované nasledujúce funkcie:

  • Väčšina funkcií grafiky SVG pre štruktúru dokumentov, interaktivitu (udalosti skriptovania) a používanie štýlov (vložených alebo sprostredkovaných šablónami štýlov CSS)
  • Mnoho elementov slúžiacich na prezentáciu a ich zodpovedajúce atribúty a rozhrania modelu DOM, medzi ktoré patria:
    • základné tvary
    • výplne, ťahy, značky a farby
    • prechody a vzorky
    • dráhy
    • text

Internet Explorer 9 podporuje nasledujúce metódy zobrazenia kódu značkovacieho jazyka SVG:

  • fragmenty kódu SVG vložené do kódu HTML5 bez použitia cudzích objektov (teda prosté vloženie značky <svg> do kódu HTML)
  • grafika SVG ako samostatný typ dokumentu (s príponou súboru SVG)
  • grafika SVG v kóde XML alebo XHTML (podobné metóde HTML5, ale so súbormi jazyka XML alebo XHTML)
  • grafika SVG ako obrázok šablón štýlov CSS
  • grafika SVG s použitím prvku object, tak ako v nasledujúcom príklade – všimnite si atribúty type (typ), height (výška) a width (šírka):
    <object data="rect2.svg" width="100%" height="400px"
    
        type="image/svg+xml"></object>

  • grafika SVG s použitím elementov img, embed, iframe alebo frame, tak ako v nasledujúcom príklade:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Ďalšie informácie o podpore grafiky SVG v aplikácii Internet Explorer 9 nájdete na webovej lokalite MSDN.

Ďalšie informácie o grafike SVG vám poskytne stránka s referenčnými informáciami pre element svg na webovej lokalite MSDN.

Základné tvary

Internet Explorer 9 zavádza podporu analýzy a vykresľovania všetkých elementov základných tvarov, ich atribútov a súvisiacich rozhraní modelu DOM, tak ako sú uvedené v module pre základné tvary špecifikácie SVG 1.1 (druhé vydanie). Balík základných tvarov podporovaných aplikáciou Internet Explorer 9 pozostáva z nasledujúcich elementov tvarov:

Internet Explorer 9 taktiež podporuje súvisiace rozhrania modelu DOM týchto elementov.

Nasledujú príklady jednotlivých vyššie zmienených elementov tvarov. Za príkladom kódu vždy nasleduje snímka obrazovky zobrazujúca zodpovedajúci výsledok v aplikácii Internet Explorer 9.

Obdĺžniky: element rect
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
   stroke="black"
   width="150"
   height="75"
   x="50"
   y="25" />

</svg>

<rect fill="orange"
   stroke="black"
   width="150"
   height="100"
   x="50"
   y="25"
   rx="10"
   ry="50"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element rect na webovej lokalite MSDN.

Kruhy: element circle
<circle fill="orange"
   stroke="black"
   stroke-width="3"
   cx="40"
   cy="25"
   r="20"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element circle na webovej lokalite MSDN.

Elipsy: element ellipse
<ellipse stroke="orange"
   cx="100"
   cy="60"
   rx="75"
   ry="50"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element ellipse na webovej lokalite MSDN.

Čiary: element line
<!-- vertical -->
<line x1="0.7cm"
   y1="1cm"
   x2="0.7cm"
   y2="2.0cm"
   style="stroke:
   blue;"/>

<!-- diagonal -->
<line x1="30"
   y1="30"
   x2="150"
   y2="85"
   stroke="red"
   stroke-width="4"/>

<!-- horizontal -->
<line x1="50pt"
   y1="25pt"
   x2="150pt"
   y2="25pt"
   stroke="yellow"
   stroke-width="3"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element line na webovej lokalite MSDN.

Polyčiary: element polyline

„Polyčiara“ je v špecifikácii SVG definovaná ako niekoľko prepojených čiar, ktoré často tvoria „otvorený“ tvar alebo mnohouholník s chýbajúcou jednou či viacerými stranami alebo nekonvexné tvary.

<polyline points="15, 5, 100 8,3
                                            150"
   fill="orange"
   stroke="black"
   stroke-width="4"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element polyline na webovej lokalite MSDN.

Mnohouholníky: element polygon

Mnohouholník je uzatvorený tvar.

<polygon points="15, 5, 100 8,6 150"
   fill="orange"
   stroke="black"
   stroke-width="4"/>

Ďalšie informácie vám poskytne stránka s referenčnými informáciami pre element polygon na webovej lokalite MSDN.

Orezanie, maskovanie a skladanie

Internet Explorer 9 podporuje orezanie, dráhy orezania, masky a nepriehľadnosť grafiky SVG, tak ako sú definované v module pre orezanie, maskovanie a skladanie špecifikácie SVG 1.1 (druhé vydanie). (Dráhy grafiky SVG sú popísané v časti Dráhy tohto dokumentu.)

Orezanie

Dráha orezania vykrajuje alebo „orezáva“ oblasť, v ktorej môže byť vykreslená farba, vzorka alebo obrázok. Časti grafického prvku ležiace mimo dráhy orezania nie sú vykreslené. Dráhy orezania sú úplne nepriehľadné; časti grafického prvku ležiace mimo dráhy orezania nie sú vôbec viditeľné.

V špecifikácii SVG vlastnosti overflow a clip určujú počiatočné dráhy orezania alebo tvary, v ktorých bude obsah zobrazený. Predvolená dráha orezania je definovaná ako zobrazenie grafiky SVG, alebo obdĺžniková oblasť stránky, v ktorej je zobrazený obsah grafiky SVG.

Element clipPath definuje dráhu orezania. Na dráhu orezania je potom možné sa odkazovať pomocou vlastnosti clip-path. Vlastnosť clip-rule sa vzťahuje na grafické prvky v rámci elementu clipPath a atribút clipPathUnits definuje systém súradníc pre obsah elementu clipPath. Dráhy orezania je možné použiť pre text a taktiež farby, vzorky alebo obrázky.

K funkciám orezania je možné pristupovať programovo pomocou rozhrania SVGClipPathElement modelu DOM.

Nasleduje jednoduchý príklad dráhy orezania grafiky SVG.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" /> </clipPath> <rect x="20" y="20" width="100" height="100" fill="blue"     clip-path="url(#clip1)" />
</svg>

V tomto príklade je pomocou elementu clipPath definovaná dráha orezania v tvare kruhu. Pomocou vlastnosti clip-path je dráha orezania potom použitá pre obdĺžnik. Tento kód v aplikácii Internet Explorer 9 poskytuje nasledujúci výsledok.

Maskovanie

Maska sa podobá dráhe orezania s tým rozdielom, že je čiastočne priehľadná. Masky sa často používajú pri skladaní objektov v popredí na aktuálnom pozadí.

Masku definuje element mask. Na masku je potom možné sa odkazovať pomocou vlastnosti mask.

Nasleduje jednoduchý príklad masky grafiky SVG.

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />         </mask>      </defs>      <rect x="0" y="0" width="100%" height="100%" fill="purple"           mask="url(#myMask)" />
 </svg>

V tomto príklade je pomocou vlastnosti mask definovaná maska v tvare troch priľahlých kruhov s rozdielnymi farbami. Pomocou vlastnosti mask je potom táto maska použitá pre purpurový obdĺžnik. Tento kód v aplikácii Internet Explorer 9 poskytuje nasledujúci výsledok.

Systémy súradníc, transformácie a jednotky

Internet Explorer 9 zavádza podporu systémov súradníc, transformácií a jednotiek grafiky SVG , tak ako sú definované v module pre systémy súradníc, transformácie a jednotky návrhu špecifikácie SVG 1.1 (druhé vydanie). Medzi funkcie podporované aplikáciou Internet Explorer 9 patria:

  • Jednotky a percentá
  • Ľubovoľné transformácie všetkých elementov a atribút transform
  • Vlastnosti viewBox a preserveAspectRatio (vrátane interakcie s vlastnosťou overflow).
  • Podpora transformácií a typov zoznamov transformácií

Internet Explorer Platform 9 taktiež podporuje rozhrania modelu DOM súvisiace so systémami súradníc a transformáciami grafiky SVG.

Štruktúra dokumentu

Internet Explorer 9 zavádza podporu základných funkcií pre štruktúru dokumentu grafiky SVG , metaúdaje a rozšíriteľnosť, tak ako sú definované v moduloch pre štruktúru dokumentu, metaúdaje a rozšíriteľnosť špecifikácie SVG 1.1 (druhé vydanie). Medzi elementy podporované aplikáciou Internet Explorer 9 patria:

Internet Explorer 9 taktiež podporuje súvisiace rozhrania modelu DOM týchto elementov.

Prechody a vzorky

Špecifikácia SVG poskytuje možnosť vyfarbovať tvary a text alebo ich vybavovať ťahmi pomocou farieb, prechodov alebo vzoriek. Internet Explorer 9 podporuje prechody a vzorky grafiky SVG, tak ako sú definované v module pre prechody a vzorky špecifikácie SVG 1.1 (druhé vydanie).

Prechody

Podpora prechodov je zaistená prostredníctvom elementov prechodov (linearGradient a radialGradient) a atribútov (gradientUnits a gradientTransform). Farby prechodov sú definované pomocou elementu stop. Elementy prechodov je možné použiť pre vlastnosti fill (výplň) a stroke (ťah) tvarov grafiky SVG. Pozrime sa napríklad na nasledujúci kód:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        < stop offset="10%" stop-color="yellow" />
        < stop offset="90%" stop-color="blue" />
      </linearGradient>     </defs>     <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/> </svg>

V tomto kóde je definovaný obdĺžnik s lineárnym prechodom. Dva elementy stop určujú pre prechody farieb zarážky farieb pozdĺž vektora – žltú na pozícii 10 % a modrú na pozícii 90 %. Tento príklad je v aplikácii Internet Explorer 9 zobrazený nasledovne:

Vzorky

Podporu vzoriek zaisťuje element pattern a jeho atribúty. Elementy vzoriek je rovnako ako prechody možné použiť pre vlastnosti fill (výplň) a stroke (ťah) tvarov grafiky SVG. Pozrime sa napríklad na nasledujúci kód.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">       <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"         />       <rect x="100" y="0" width="50" height="50" fill="blue"            stroke="yellow" />     </pattern>   </defs>   <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" /> </svg>

V tomto príklade element pattern definuje vzorku, ktorá je tvorená striedavo malými modrými štvorčekmi a maličkými žltými kolieskami. Vzorka je potom použitá ako výplň definovanej elipsy. Nasledujúci obrázok zachycuje jej vzhľad v aplikácii Internet Explorer 9.

Interaktivita

Obsah grafiky SVG môže byť interaktívny – to znamená, že sa môže meniť v reakcii na vstup používateľa. Internet Explorer 9 podporuje funkcie interaktivity grafiky SVG, tak ako sú definované v module pre interaktivitu špecifikácie SVG 1.1 (druhé vydanie), vrátane:

Internet Explorer 9 taktiež podporuje rozhranie modelu DOM SVGCursorElement definované v module pre interaktivitu.

Internet Explorer 9 navyše podporuje atribút focusable, tak ako je definovaný v module špecifikácie SVG Tiny 1.2

Nasledujúci kód je veľmi jednoduchou praktickou ukážkou interaktivity grafiky SVG.

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
</svg>

Po načítaní tohto kódu sa zobrazí malý červený kruh.

Kliknutie na tento kruh spôsobí jeho zväčšenie na dvojnásobnú veľkosť.

Rovnaký efekt je možné dosiahnuť pomocou udalostí mouseover a mouseout, ktoré spôsobia zväčšenie alebo zmenšenie kruhu pri presune kurzora nad neho alebo mimo neho.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
...

Prepojenia a zobrazenia

Grafika SVG umožňuje prepájať sa z obsahu grafiky SVG na ďalšie stránky a taktiež používať preddefinované zobrazenia dokumentov grafiky SVG. Pomocou zobrazenia je napríklad možné jednoducho vytvoriť priame prepojenie na priblíženie diagramu.

Internet Explorer 9 podporuje prepojenia a zobrazenia grafiky SVG, tak ako sú definované v module pre prepojenia špecifikácie SVG 1.1 (druhé vydanie). To zahŕňa podporu elementov a a view.

Sú podporované aj súvisiace rozhrania modelu DOM – SVGAElement a SVGViewElement.

Prepojenia

Element a slúži rovnako ako v jazyku HTML na vytvorenie hypertextového prepojenia v kóde SVG. Nasledujúci kód napríklad poskytuje hypertextové prepojenie na obdĺžnik.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/> </a> </svg>
Zobrazenia

Pomocou zobrazenia je možné udeliť prehľadávaču pokyn, aby obrázok grafiky SVG zobrazil určitým spôsobom. Nasledujúci kód napríklad definuje hypertextové prepojenie na zobrazenie.

...
 <a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
 </a>
 <view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"   width="135" height="85"/> ...

V tomto príklade je zobrazenie rect-view definované ako viewBox (obdĺžnikový výsek) s danými súradnicami. Po kliknutí na prepojenie (text „Go to Rectangle“) sa objaví zobrazenie rect-view a odhalí červený obdĺžnik.

Nasledujúci kód definuje ďalšie prepojenie na zobrazenie.

...
 <a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
 </a>
 <view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"   r="45"/> ...

V tomto príklade je pre zobrazenie circle-view atribút preserveAspectRatio nastavený na hodnotu none. To znamená, že aj keď tvarom je kruh, nebude pri aktivácii zobrazenia rovnomerne meniť svoju veľkosť tak, aby vyplnil špecifikovaný obdĺžnik viewBox. Namiesto toho sa roztiahne nerovnomerne tak, aby sa pomyselný rámček, ktorý ho ohraničuje, presne zhodoval s obdĺžnikom viewBox. Tento kód sa pri prvom načítaní stránky zobrazí nasledovne.

Po kliknutí na text „Go to Circle“ sa aktivuje zobrazenie circle-view a kruh sa roztiahne tak, aby vyplnil obdĺžnik viewBox. To spôsobí, že bude zobrazený ako elipsa.

Maľovanie a farby

Maľovanie a farby sú dôležitými súčasťami grafiky SVG. Pojem maľovanie zahŕňa výplne (plná farebná výplň, prechody, vzorky), ťahy (čiary kreslené pozdĺž dráh) a symboly značiek (použité na koncoch segmentov čiar, napríklad hroty šípky) a môže zahŕňať aj nepriehľadnosť. Výplne a ťahy je možné použiť pre dráhy, text alebo tvary.

Internet Explorer 9 zavádza podporu maľovania a farieb grafiky SVG, tak ako sú definované v module pre maľovanie, výplne, ťahy a symboly značiek a v module pre prácu s farbami špecifikácie SVG 1.1 (druhé vydanie). Podporované sú:

Podporované sú taktiež súvisiace rozhrania modelu DOM – SVGPaint a SVGMarkerElement – definované v module pre maľovanie.

Niekoľko príkladov výplní a ťahov grafiky SVG obsahuje časť Dráhy tohto dokumentu.

Dráhy

Dráhy grafiky SVG sú obrysy tvarov. Je možné ich vyplniť, vybaviť ťahmi (pozdĺž dráhy je nakreslená čiara) alebo použiť ako dráhy orezania (výrezy iných tvarov).

Internet Explorer 9 zavádza podporu dráh grafiky SVG, tak ako sú definované v module pre dráhy špecifikácie SVG 1.1 (druhé vydanie). To zahŕňa podporu elementu path (dráha) a taktiež vlastnosti d umožňujúce analýzu údajov dráhy.

Podporované sú taktiež súvisiace rozhrania modelu DOM definované v module pre dráhy.

Element path môžu vývojári použiť v celom rade situácií. Uvádzame iba niekoľko jednoduchých príkladov. Za príkladom kódu vždy nasleduje snímka obrazovky zobrazujúca zodpovedajúci výsledok v aplikácii Internet Explorer 9.

Uzatvorené tvary s rovnými čiarami a výplňou
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <path d="M 20 20 L 60 20 L 40 60 z"
   fill="green"     fill-opacity="0.5"     stroke="red"     stroke-width="3" /> </svg>

Bézierova dráha (kvadratická)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"     stroke="red"     stroke-opacity="0.2"     stroke-width="3" />

Čiara s oblúkom
<path d="M30,60 l 50,0 a25,45 0 0,1
                                            50,0 l 50,0"
    fill="green"     stroke="blue"     stroke-width="4" />

Text

Dokumenty SVG môžu obsahovať text. Text je v grafike SVG vykresľovaný rovnako ako ostatné grafické prvky, čo znamená, že pre text je možné použiť transformácie systému súradníc, maľovanie, orezanie alebo maskovanie.

Internet Explorer 9 podporuje vykresľovanie textu, tak ako je definované v module pre prácu s textom špecifikácie SVG 1.1 (druhé vydanie).

Element text určuje, aké znaky majú byť nakreslené. Pretože grafika SVG automaticky nezalamuje riadky, je potrebné dopredu určiť prechody na nový riadok. Na úpravu vlastností textu (napríklad písma, váhy, farby, prekladania a mnohých ďalších) v rámci riadka textu grafika SVG poskytuje element tspan.

Internet Explorer 9 taktiež podporuje súvisiace rozhrania modelu DOM definované v module pre prácu s textom.

Nové nástroje pre webových vývojárov

V tejto časti sú najprv popísané pripnuté webové lokality, ktoré poskytujú nový spôsob posilnenia väzby medzi vašou webovou lokalitou a vašimi používateľmi. Potom nasleduje popis nového spôsobu stanovenia verzií v aplikácii Internet Explorer 9, ktorý pomáha riešiť problémy s kompatibilitou pri prechode na modernú verziu aplikácie Internet Explorer. Môžete sa taktiež zoznámiť s vylepšeniami nástrojov pre vývojárov v aplikácii Internet Explorer, ktoré boli prvýkrát integrované priamo do prehľadávača v aplikácii Internet Explorer 8.

Pripnuté webové lokality

Pri využití funkcie pripnuté webové lokality, vaše webové lokality používateľov ešte viac pohltia. Pripnuté webové lokality predstavujú nový balík nástrojov, ktoré poskytujú používateľské prostredie prispôsobené webu. Obsahuje zväčšenú ikonu obľúbených položiek (favikonu) a taktiež tlačidlá Dozadu a Dopredu a ďalšie prvky používateľského rozhrania, ktoré môžu byť zjednotené so značkou a celkovým vzhľadom webovej lokality. Vďaka integrácii so systémom Windows 7 vývojári môžu používateľom ponúknuť nové možnosti práce s webovými lokalitami pomocou najnovších rozhraní API systému Windows, ktoré umožňujú vytvárať pre webovú lokalitu zoznamy prepojení, panely nástrojov miniatúr a oznámenia. (Pripnuté webové lokality sú podporované iba na paneli úloh systému Windows 7.)

Pripnutie webových lokalít na panel úloh

Používateľ môže webovú lokalitu pripnúť na panel úloh jedným z nasledujúcich spôsobov:

  • „Odtrhnutím“ záložky tak, že na ňu klikne a pretiahne ju na panel úloh
  • Pretiahnutím ikony obľúbených položiek (favikony) z panela Adresa na panel úloh
  • Pretiahnutím vlastného obrázka triedy msPinSite (obrázka „pretiahnuť a pripnúť“) na panel úloh

Po pripnutí je webová lokalita vykreslená s použitím vlastných vylepšení – napríklad tlačidiel Dozadu a Dopredu, ktoré zodpovedajú farbenej schéme webovej lokality. Webové lokality je taktiež možné pripnúť k ponuke Štart.

Zoznamy prepojení

Úlohami zoznamu prepojení sú akcie špecifické pre konkrétnu aplikáciu a prispôsobené pripnutej webovej lokalite. Sú založené na rovnakých funkciách, aké využívajú aplikácie v systéme Windows 7. Pomocou úloh zoznamov prepojení môže webová lokalita používateľom sprístupniť najčastejšie používané príkazy. Úlohy zoznamov prepojení môžete definovať na základe funkcií webovej lokality a taktiež na základe najdôležitejších akcií, ktoré používatelia pravdepodobne budú chcieť na webovej lokalite vykonávať. Tieto úlohy poskytujú balík statických prepojení, ku ktorým majú používatelia neustále prístup, a to aj v prípade, že aplikácia Internet Explorer nie je spustená. Ďalšie informácie o zoznamoch prepojení nájdete v článku Ako vytvárať dynamické zoznamy prepojení na webovej lokalite MSDN.

Panely nástrojov miniatúr

Panel nástrojov miniatúr v podstate predstavuje „diaľkové ovládanie“ vašej webovej lokality. Panel nástrojov je zobrazený pod ukážkou miniatúry, keď používateľ umiestni ukazovateľ myši nad tlačidlo pripnutej webovej lokality na paneli úloh. Táto funkcia je veľmi užitočná pre webové lokality, ktoré implementujú prehrávanie videa alebo zvuku, ale panely nástrojov miniatúr je možné využiť mnohými rôznymi spôsobmi. Tlačidlá panela nástrojov miniatúr môžu zahŕňať ovládacie prvky na riadenie prehrávania, pridanie alebo zdieľanie obľúbených položiek, vyhľadávanie, zmenu online stavu alebo hodnotenie webových stránok. Ďalšie informácie o vytváraní panelov nástrojov miniatúr nájdete v článku Ako vytvárať panely nástrojov miniatúr na webovej lokalite MSDN.

Oznámenia

Pripnuté webové lokality, rovnako ako aplikácie systému Windows 7, môžu používateľom predkladať oznámenia alebo informácie o stave zobrazením prekrývacej ikony cez tlačidlo pripnutej webovej lokality na paneli úloh. Prekrývacie ikony pomáhajú upozorniť na webovú lokalitu, ak okno pripnutej webovej lokality nie je vidno, napríklad ak je okno prehľadávača minimalizované alebo blokované iným oknom. Pomocou prekrývacích ikon je možné používateľom predkladať dôležité informácie o stave alebo oznámenia, napríklad o stave siete, online stave alebo novej pošte. Ďalšie informácie o oznámeniach nájdete v článku Ako poskytovať oznámenia na webovej lokalite MSDN.

Rozpoznanie pripnutých webových lokalít

Internet Explorer 9 používateľov neupozorní na skutočnosť, že webovú lokalitu je možné pripnúť. Je na vývojárovi, aby používateľov na tieto funkcie upozornil. Na funkcie pre pripnuté webové lokality môžete na svojej webovej lokalite používateľov upozorniť mnohými rôznymi spôsobmi, medzi ktoré patria prílety, rozbaľovacie ponuky, nápisy, efekty elementov div alebo ikony a obrázky pre funkciu pretiahnuť a pripnúť. Môžete taktiež poskytnúť prostredie zobrazené pri prvom spustení, ktoré používateľov upozorní na funkcie vašej pripnutej webovej lokality, keď používateľ webovú lokalitu prvýkrát pripne. Ďalšie informácie o možnostiach rozpoznania nájdete v článku Ako vylepšiť možnosti rozpoznania na webovej lokalite MSDN.

Postupy a príklady kódu pre pripnuté webové lokality nájdete v časti pojednávajúcej o pripnutých webových lokalitách v Centre pre vývojárov na webovej lokalite MSDN.

Ukážky pripnutých webových lokalít nájdete na testovacej webovej lokalite aplikácie Internet Explorer 9.

Správa verzií platformy

Aplikácia Internet Explorer 8 zaviedla režimy kompatibility dokumentu, ktoré sú rozšírením režimu kompatibility zavedeného v aplikácii Microsoft Internet Explorer 6. Režimy kompatibility dokumentu umožňujú zvoliť konkrétny režim vykresľovania, ktorý aplikácia Internet Explorer používa na zobrazovanie webových stránok ich autorov. Podrobný popis režimov kompatibility je možné nájsť v dokumente Definovanie kompatibility dokumentu na webovej lokalite MSDN.

Nový režim dokumentu

Internet Explorer 9 pridáva nový režim dokumentu – režim štandardov aplikácie Internet Explorer 9, ktorý umožňuje dosiahnuť najvyšší výkon, vďaka škálovaniu zvláda požiadavky moderných aplikácií a implementuje podporu najnovších štandardov.

Internet Explorer 9 v predvolenom nastavení pracuje v režime dokumentu IE9, ak stránka alebo webový server neuvedú iné nastavenie.

Najlepším spôsobom, ako zaistiť, aby Internet Explorer 9 vašu stránku vykreslil v najnovšom režime dokumentu, je použiť direktívu !DOCTYPE pre štandardy bez použitia meta značky X-UA-Compatible alebo hlavičky protokolu HTTP. Direktíva !DOCTYPE pre vyvolanie režimu IE9 vyzerá nasledovne.

<!DOCTYPE html>

Direktívu !DOCTYPE môžete prirodzene použiť spolu s meta značkou X-UA-Compatible alebo hlavičkou protokolu HTTP a zmeniť tak predvolené nastavenie podľa svojho uváženia.

Aktuálny režim dokumentu môžete zistiť tak, že stlačením klávesu F12 otvoríte Nástroje pre vývojárov F12 v aplikácii Internet Explorer, kde túto informáciu nájdete napravo od riadka ponúk. Režim dokumentu môžete zmeniť tak, že v ponuke Režim dokumentu kliknete na položku Štandardy aplikácie Internet Explorer 9.

Identifikačný reťazec prehľadávača

Identifikačný reťazec prehľadávača umožňuje hostiteľským serverom identifikovať prehľadávač a poskytuje určité informácie o systéme. (Ďalšie informácie o identifikačných reťazcoch prehľadávača nájdete v článku Understanding User-Agent Strings na webovej lokalite MSDN.) Internet Explorer 9 sa líši od predchádzajúcich verzií aplikácie Internet Explorer tým, že v predvolenom nastavení odosiela krátky identifikačný reťazec. Táto zmena zvyšuje celkový výkon a zlepšuje vzájomnú funkčnú spoluprácu a kompatibilitu. Internet Explorer 9 už nebude odosielať informácie, ktoré do identifikačného reťazca prehľadávača dopĺňa ďalší softvér nainštalovaný v počítači používateľa, napríklad rozhranie .NET alebo iný softvér.

Internet Explorer 9 odosiela nový identifikačný reťazec prehľadávača Internet Explorer 9. V identifikačnom reťazci prehľadávača pre aplikáciu Internet Explorer 8 boli vykonané štyri zmeny, ktoré by vývojári mali vziať na vedomie:

  1. Verzia aplikácie vzrástla z hodnoty „Mozilla/4.0“ na hodnotu „Mozilla/5.0“, tak aby zodpovedala ostatným prehľadávačom. Táto zmena signalizuje, že Internet Explorer 9 je prehľadávač podporujúci vzájomnú funkčnú spoluprácu.
  2. Token verzie bol zvýšený z hodnoty „MSIE 8.0“ na hodnotu „MSIE 9.0“.
  3. Token Trident bol zvýšený z hodnoty „Trident/4.0“ na hodnotu „Trident/5.0“.
  4. Internet Explorer 9 bude zasielať nasledujúci krátky identifikačný reťazec bez doplnkov ďalšieho softvéru inštalovaného v počítači:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Kompatibilné zobrazenie v aplikácii Internet Explorer 9 je mapované na režim štandardov aplikácie IE7, rovnako ako v aplikácii Internet Explorer 8. (Ďalšie informácie o kompatibilnom zobrazení nájdete v článku Pochopenie zoznamu kompatibilného zobrazenia na webovej lokalite MSDN.) Pri použití kompatibilného zobrazenia Internet Explorer 9 odosiela nasledujúci identifikačný reťazec prehľadávača:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Ďalšie informácie o novom identifikačnom reťazci prehľadávača aplikácie Internet Explorer 9 vám poskytne príspevok blogu tímu aplikácie Internet Explorer Zavedenie identifikačného reťazca prehľadávača aplikácie IE9".

Nástroje pre vývojárov F12

Prístup k nástrojom pre vývojárov F12 v aplikácii Internet Explorer 9 získate stlačením klávesu F12 alebo môžete v ponuke Nástroje kliknúť na položku Nástroje pre vývojárov F12. Ak ste požívali nástroje pre vývojárov v aplikácii Internet Explorer 8, ihneď si všimnete vylepšenia funkcií a výkonu.

Záložka Konzola

Nástroje pre vývojárov F12 v aplikácii Internet Explorer 9 zavádzajú záložku Konzola sprístupňujúcu udalosti skriptov. Pri kontrole skriptov je zobrazených niekoľko prepínacích tlačidiel: Chyba, Upozornenie a Správa. Každé tlačidlo zobrazuje počet správ daného typu.

Záložka Sieť

Internet Explorer 9 do nástrojov pre vývojárov pridáva nástroj na kontrolu siete. K nástroju je možné získať prístup kliknutím na záložku Sieť. Potom je možné:

  • Zachytávať sieťové pakety protokolov HTTP a HTTPS
  • Zobraziť (a uložiť) obsah požiadaviek a odpovedí
  • Zobraziť ďalšie podrobné informácie o zachytených údajoch, napríklad súbory cookie, veľkosť, časovanie alebo informácia o medzipamäti

Nástroj na prepínanie identifikačného reťazca prehľadávača

Nový nástroj na prepínanie identifikačného reťazca prehľadávača umožňuje upraviť identifikačný reťazec prehľadávača, pomocou ktorého webový server identifikuje typ a verziu prehľadávača. (Ďalšie informácie o novom identifikačnom reťazci prehľadávača v aplikácii Internet Explorer 9 nájdete v časti tohto dokumentu User-agent (UA) String.) Zvolený identifikačný reťazec bude cez sieť odosielaný ako hlavička všetkých požiadaviek. Ak chcete zmeniť identifikačný reťazec prehľadávača, v nástrojoch pre vývojárov v ponuke Nástroje vyberte položku Zmeniť identifikačný reťazec prehľadávača a potom zvoľte prehľadávač, ktorého identifikačný reťazec chcete odosielať.

Meranie výkonu pri skutočnom zaťažení

Pomocou nástrojov pre vývojárov F12 v aplikácii Internet Explorer 9 je teraz možné merať ešte viac aspektov výkonu webovej lokality než v predchádzajúcich verziách aplikácie Internet Explorer. Napriek tomu nie je možné merať skutočný výkon, s ktorým sa používatelia stretávajú. Za účelom riešenia tohto problému niektoré webové lokality vyvíjajú svoje vlastné knižnice, ktoré sa snažia priebežne merať okamžitý výkon webových stránok, ale to môže prinášať réžiu, ktorá v skutočnosti stránky pre používateľov spomaľuje. Máme za to, že špecifikácia WebTiming konzorcia W3C, ktorá sa v čase vytvárania tohto dokumentu nachádzala vo fáze pracovného návrhu, poskytuje dobrý koncepčný základ zodpovedného riešenia tohto problému. K funkciám WebTiming poskytuje v aplikácii Internet Explorer 9 prístup rozhranie window.msPerformance modelu DOM. Vývojári taktiež môžu povoliť ladenie skriptov v nástrojoch pre vývojárov F12 a potom pristupovať k objektu window.msPerformance.

Ukážku použitia objektu window.msPerformance vám poskytne testovacia webová lokalita aplikácie Internet Explorer.

História revízií

16. marca 2010: vytvorené pre aplikáciu Internet Explorer Platform Preview.

15. apríla 2010: aktualizované o informácie týkajúce sa:

  • podpory modulu CSS3 pre obory názvov,
  • dodatočnej podpory selektorov šablón štýlov CSS3,
  • ďalších podrobných informácií o podpore modelu DOM,
  • ďalších podrobných informácií o podpore grafiky SVG, vrátane obmedzenia vkladania,
  • podpory profilov farieb ICC.

5. mája 2010: Aktualizované pre zostavenie 2 aplikácie Internet Explorer Platform Preview. Doplnené nasledujúce informácie:

  • ďalšie podrobné informácie o podpore modelu DOM
  • nové funkcie modelu DOM
    • nové rozhrania API jadra modelu DOM
    • kód HTML v modeli DOM
    • prechádzanie modelu DOM
    • nové udalosti modelu DOM úrovne L3:
      • udalosť DOMAttrModified
      • udalosť DOMContentLoaded
      • udalosti kompozície
  • nový identifikačný reťazec prehľadávača
  • zmeny identifikátorov URI údajov
  • doplnky nástrojov pre vývojárov: záložka Konzola a nástroj na prepínanie identifikačného reťazca prehľadávača

23. júna 2010: Aktualizované pre zostavenie 3 aplikácie Internet Explorer Platform Preview. Doplnené nasledujúce informácie:

  • nové funkcie pre špecifikáciu CSS3:
    • nové funkcie pre pozadia a ohraničenia
    • farebné modely HSL a HSLA
    • podpora písem špecifikácie CSS3
    • podpora hodnôt a jednotiek špecifikácie CSS3
    • nové hodnoty vlastnosti display
  • novo pridaná podpora prechádzania elementov modelu DOM
  • nové funkcie pre špecifikáciu HTML5:
    • elementy video, audio a canvas
    • rozhranie Selection
  • novo pridaná podpora selektorov rozhrania API úrovne 2:
    • metóda matchesSelector
  • nové funkcie pre grafiku SVG:
    • orezanie, maskovanie a skladanie
    • prechody a vzorky
    • interaktivita
    • prepojenia a zobrazenia
    • maľovanie a farby
    • Text

4. augusta 2010: Aktualizované pre zostavenie 4 aplikácie Internet Explorer Platform Preview. Doplnené nasledujúce informácie:

  • nové jadro Chakra pre JavaScript
  • vylepšené funkcie modelu DOM
  • novo pripadaná podpora špecifikácie WebIDL
  • objekt window.msPerformance
  • Časť týkajúca sa elementu canvas doplnená o prepojenia na príklady.

15. septembra 2010: Aktualizované pre aplikáciu Internet Explorer 9 Beta. Pridané nové prepojenia a nasledujúce informácie:

  • rozhrania DOMParser a XMLSerializer
  • pripnuté webové lokality

28. októbra 2010: Aktualizované pre zostavenie 6 aplikácie Internet Explorer Platform Preview. Doplnené nasledujúce informácie:

  • 2D transformácie v šablónach štýlov CSS
  • sémantické elementy špecifikácie HTML5
  • opravené číslo podporovanej verzie profilov farieb ICC

10. februára 2011: Aktualizované pre aplikáciu Internet Explorer 9 Release Candidate. Doplnené nasledujúce informácie:

  • určovanie geografickej polohy podľa špecifikácie HTML5
  • pripnuté webové lokality (aktualizované)
  • režim kompatibility (aktualizované)
  • ďalšie rôzne opravy dokumentu

18. februára 2011: Aktualizované o informácie týkajúce sa:

  • pripnutých webových lokalít
  • elementu canvas špecifikácie HTML5

14. marca 2011: Aktualizované pre konečnú verziu (RTW) aplikácie Internet Explorer 9:

  • aktualizovaný názov verzie v texte
  • ECMAScript 5 (pridané prepojenia)
Copyright © 2002 - 2011 CHASTIA s.r.o., Igor Stanek
Portál je hostovaný na serveroch firmy Quantasoft - www.qsh.sk.