Skip to main content

Internet Explorer 9 - Guida per gli sviluppatori

14 marzo 2011

La guida per gli sviluppatori di Internet Explorer 9 fornisce una panoramica su funzionalità e miglioramenti presenti in Internet Explorer 9. Utilizzando questa guida, designer e sviluppatori Web possono sfruttare al meglio queste novità. Inoltre, gli sviluppatori possono iniziare a scoprire la nuova piattaforma visitando il sito Internet Explorer Test Drive.

Sommario

Introduzione

Prestazioni globali del browser

Supporto degli standard Web per uno stesso markup

Nuove funzionalità di grafica grazie alla potenza dei PC Windows

Elenco delle nuove funzionalità

Interoperabilità ottimizzata tramite il supporto degli standard

CSS3 (Cascading Style Sheets, Level 3)

Modulo CSS3 2D Transforms

Modulo CSS3 Backgrounds & Borders

Modulo CSS3 Color

Modulo CSS3 Fonts

Modulo CSS3 Media Queries

Modulo CSS3 Namespaces

Modulo CSS3 Values and Units

Selettori CSS3

Altre funzionalità CSS

Modulo CSSOM View

URI dati

Miglioramenti al modello DOM (Document Object Model)

Presentazione del modello DOM ottimizzato

Analisi e serializzazione XML dal e al modello DOM

Document Object Model (DOM) Level 2 e 3

DOM Core (L2, L3) e Views (L2)

DOM Element Traversal

DOM Events (L2, L3)

DOM L2 HTML

DOM L2 Style

DOM L2 Traversal and Range

Gestione degli spazi nel modello DOM

ECMAScript 5

HTML5

Georilevazione HTML5

Elementi HTML5 video e audio

Elemento HTML5 canvas

Miglioramenti all'analisi HTML

API HTML5 Selection

Elementi semantici HTML5

Profili colore ICC

Selectors API Level 2

SVG (Scalable Vector Graphics)

Forme di base

Ritaglio, mascheramento, compositing

Sistemi di coordinate, trasformazioni, unità di misura

Struttura documenti

Gradienti e motivi

Interattività

Collegamenti e visualizzazioni

Pittura e colore

Percorsi

Testo

Nuovi strumenti per gli sviluppatori Web

Siti aggiunti

Controllo delle versioni

Nuova modalità documento

Stringa UA (agente utente)

Strumenti di sviluppo

Scheda Console

Scheda Rete

Strumento di modifica stringa UA

Valutazione delle prestazioni in un ambiente reale

Cronologia delle revisioni

Introduzione

Ogni sviluppatore desidera conoscere le novità disponibili nei browser utilizzati da lui e dai suoi clienti. Internet Explorer 9 è la nuovissima versione del più famoso e diffuso browser. Con Internet Explorer 9, Microsoft fornisce agli sviluppatori Web una piattaforma ricca di strumenti e funzionalità all'avanguardia che consentiranno loro di dare vita ad applicazioni potenti, interoperabili e conformi agli standard più diffusi.

Questo documento mostra agli sviluppatori come trarre il massimo beneficio dall'utilizzo dei miglioramenti introdotti in Internet Explorer nelle applicazioni e nei siti Web da loro creati. Non dimenticarsi di visitare il sito Test Drive dove sono disponibili numerose demo che illustrano queste funzionalità. Per inviare commenti e suggerimenti e per ottenere ulteriori informazioni sulle novità in Internet Explorer 9, consultare le note sulla versione e vedere Novità in Internet Explorer 9 su MSDN. Per essere sempre aggiornati sulle ultime notizie che hanno per oggetto Internet Explorer 9, visitare il blog del team di IE. Inoltre, per le informazioni più aggiornate su Internet Explorer dedicate proprio agli sviluppatori, visitare il sito Internet Explorer Developer Center su MSDN.

Con Internet Explorer 9, Microsoft desidera aiutare gli sviluppatori a comprendere meglio le novità disponibili in Internet Explorer 9 nei seguenti ambiti:

  • Prestazioni globali del browser
  • Supporto degli standard Web per l'uniformità di funzionamento dei markup nei diversi browser
  • Nuove funzionalità di grafica in grado di sfruttare la potenza dei PC Windows

Prestazioni globali del browser

Le prestazioni del browser coinvolgono i numerosi sottosistemi presenti all'interno del browser. Infatti, il carico di lavoro e le richieste che deve affrontare il browser variano in base ai diversi siti visitati e alle diverse attività eseguite all'interno di uno stesso sito. Ad esempio, un'applicazione Web, quale Windows Live Mail o Microsoft Office Web Apps, utilizza i sottosistemi del browser in modo completamente diverso da un sito di raccolta di notizie, quale Bing News o Digg.

"Chakra", il nuovo motore JavaScript

Le prestazioni del motore di script sono solo uno dei fattori di cui tenere conto quando si valutano le prestazioni globali di un browser. Già in Internet Explorer 8 le prestazioni degli script erano state oggetto di un notevole miglioramento rispetto a Internet Explorer 7 e Internet Explorer 9 Versione finale candidata, con l'introduzione di "Chakra", il suo nuovo motore JavaScript, riesce a fare anche meglio. Il motore Chakra interpreta, compila ed esegue codice in parallelo ed è perfettamente in grado di utilizzare al meglio una CPU multicore, se disponibile. Per ulteriori informazioni, vedere The New JavaScript Engine in Internet Explorer 9 sul blog del team di IE.

Naturalmente, il team di Internet Explorer valuta le prestazioni di tutti i sottosistemi del browser quando questi vengono utilizzati dai siti reali. Il loro obiettivo, infatti, è garantire prestazioni di altissimo livello ai siti reali e non offrire semplicemente dei benchmark da utilizzare come punto di riferimento.

Supporto degli standard Web per uno stesso markup

Gli sviluppatori che scelgono Internet Explorer sanno di poter contare su uno strumento ricco di funzionalità e per il quale 'interoperabilità' non è una semplice parola, ma un vero e proprio credo. Nessuno sviluppatore ama scrivere, riscrive e testare più e più volte i suoi siti ed è evidente che l'utilizzo di specifici standard da parte dei fornitori di browser è un ottimo metodo per evitare lavoro extra.

Con Internet Explorer 8, il team di Internet Explorer ha realizzato un'implementazione perfettamente inteoperabile dello standard CSS 2.1 e ha fornito al W3C (World Wide Web Consortium) ben 7.200 test. Questo è particolarmente importante. Senza dei test che ne convalidino il corretto funzionamento, infatti, gli standard diventano difficili da implementare in modo coerente e ciò significa che gli sviluppatori di siti non possono farvi affidamento.

Internet Explorer 9 punta molto sul supporto degli standard e sulla massima interoperabilità. Ad esempio, Internet Explorer 9 si distingue per il nuovo supporto di HTML5, il supporto di numerose funzionalità CSS3 e, assoluta "new entry" in Internet Explorer, il supporto incorporato di SVG.

Nuove funzionalità di grafica in grado di sfruttare la potenza dei PC Windows

L'ecosistema di Windows si esplica in una serie di eccezionali innovazioni a livello di componenti hardware. Con Internet Explorer 9, gli sviluppatori Web possono quindi puntare a un rendering di grafica e testo senza rivali perché basato sui componenti hardware.

Internet Explorer 9 utilizza la famiglia DirectX delle interfacce API Windows per offrire agli sviluppatori Web importanti vantaggi. Tutte le funzionalità di rendering di grafica e testo sono state trasferite dalla CPU alla scheda grafica tramite Direct2D e DirectWrite. L'accelerazione hardware per la grafica significa che anche i siti più complessi e ad alto contenuto grafico possono essere visualizzati più velocemente su Windows garantendo nel contempo un utilizzo ridotto della CPU. Inoltre, gli sviluppatori possono godere di queste innovazioni automaticamente, proprio mentre creano i siti partendo dagli standard con cui hanno sempre lavorato.

Elenco delle nuove funzionalità

Per maggiore chiarezza, questo elenco raccoglie tutte le nuove funzionalità di sviluppo disponibili in Internet Explorer 9. Per informazioni sui cambiamenti intercorsi dai build delle versioni non definitive di Internet Explorer 9, vedere la cronologia delle revisioni.

  • Supporto CSS3 ottimizzato
    • Angoli arrotondati grazie alla proprietà border-radius
    • Funzionalità di creazione bordi e sfondi CSS3
    • Proprietà opacity
    • Modelli di colore RGBA, HSL, HSLA
    • Proprietà caratteri CSS3 e nuovi formati per i caratteri Web
    • Media query CSS3
    • Spazio dei nomi CSS3
    • Valori e unità di misura CSS3
    • Selettori CSS3
  • Migliore supporto dei dati URI
  • Miglioramenti al modello DOM (Document Object Model)
    • Funzionalità DOM ottimizzate
    • Analisi e serializzazione XML dal e al modello DOM
    • Nuovo supporto DOM Level 2 (L2) e Level 3 (L3) e comportamenti aggiornati
      • DOM Core (L2, L3) e Views (L2)
      • DOM Element Traversal
      • DOM Events (L2, L3)
      • DOM L2 HTML
      • DOM L2 Style
      • DOM L2 Traversal and Range
    • Nuova gestione degli spazi
  • Miglioramenti alla funzionalità ECMAScript
  • Nuovo supporto HTML5
    • Georilevazione
    • Elementi video e audio
    • Elemento canvas
    • Interfaccia Selection
    • Analisi ottimizzata degli elementi HTML
    • API per la selezione del testo
  • Supporto dei profili colore ICC v2 e v4 per le immagini
  • Nuovo supporto per Selectors API Level 2 per il metodo msMatchesSelector
  • Funzionalità SVG
    • Forme di base: rettangoli, cerchi, ellissi, linee, polilinee, poligoni
    • Ritaglio, mascheramento, compositing
    • Sistemi di coordinate, trasformazioni, unità di misura
    • Struttura documenti, metadati, estendibilità
    • Gradienti e motivi
    • Interattività
    • Collegamenti e visualizzazioni
    • Pittura e colore
    • Percorsi, incluse le funzionalità complete dell'elemento path e dell'attributo d
    • Testo
  • Funzionalità di controllo delle versioni su un numero maggiore di piattaforme
    • Siti aggiunti
    • Nuova modalità documento
    • Nuova stringa UA (agente utente)
  • Aggiunte agli strumenti di sviluppo
    • Miglioramenti a livello di prestazioni
    • Scheda Console
    • Scheda Rete
    • Strumento di modifica delle stringhe UA
    • Valutazione delle prestazioni in un ambiente reale

Interoperabilità ottimizzata tramite il supporto degli standard

Importante   Per usufruire del nuovo supporto degli standard disponibile in Internet Explorer 9, è necessario che nel browser sia attivata la modalità degli standard di Internet Explorer 9 ("modalità IE9"). Il modo migliore per ottenere questo risultato è utilizzare una direttiva !DOCTYPE degli standard e nessuna intestazione HTTP o nessun tag meta compatibile con X-UA. La direttiva !DOCTYPE per richiamare la modalità IE9 è la seguente:

<!DOCTYPE html>

Naturalmente, è possibile utilizzare la direttiva !DOCTYPE e l'intestazione HTTP o il tag meta compatibile con X-UA per modificare il valore predefinito secondo le proprie esigenze.

Per stabilire la modalità documento corrente, premere F12 per aprire gli strumenti di sviluppo di Internet Explorer e controllare l'indicazione fornita sul lato destro della barra dei menu. Per modificare la modalità documento, fare clic su Standard di Internet Explorer 9 nel menu Modalità documento.

Per ulteriori informazioni sul comportamento della modalità documento in Internet Explorer 9, vedere la sezione dedicata al controllo delle versioni in questa guida.

CSS3 (Cascading Style Sheets, Level 3)

Internet Explorer 9 offre un supporto di CSS (Cascading Style Sheets) più esteso rispetto ai precedenti browser Microsoft. Continuando il percorso intrapreso con Internet Explorer 8, che ha reso Internet Explorer completamente compatibile con la specifica CSS2.1, Internet Explorer 9 supporta numerosi componenti di CSS3.

Nota  È importante ricordare che molti moduli CSS3 sono ancora in fase Working Draft o Last Call. Fino a quando non raggiungeranno la fase Candidate Recommendation potrebbero subire modifiche sostanziali. Per ulteriori informazioni, vedere la pagina dedicata ai moduli draft CSS3 più recenti.

Modulo CSS3 2D Transforms

Internet Explorer 9 garantisce il supporto del modulo CSS3 2D Transforms. Il modulo CSS 2D Transforms consente di trasferire in uno spazio bidimensionale tutti quegli elementi che utilizzano il rendering CSS.

Internet Explorer 9 supporta le seguenti proprietà di 2D Transforms:

  • La proprietà -ms-transform applica una o più funzioni di trasformazione bidimensionale a un elemento.
  • La proprietà -ms-transform-origin stabilisce l'origine della trasformazione per un elemento. Questa proprietà è utile quando si desidera cambiare l'origine predefinita (il centro).

Nota   Dal momento che il modulo CSS 2D Transforms non ha ancora raggiunto la fase Candidate Recommendation secondo lo standard W3C, entrambe le proprietà transform e transform-origin devono essere utilizzate con il prefisso -ms- per poter essere riconosciute da Internet Explorer 9. Per ulteriori informazioni sui prefissi specifici per fornitore, vedere IE9, Vendor Prefixes, and Developers sul blog del team di IE.

Internet Explorer 9 supporta l'utilizzo delle seguenti funzioni di trasformazione con la proprietà -ms-transform:

  • La funzione matrix(a,b,c,d,e,f) specifica una trasformazione 2D sotto forma di matrice di trasformazione a sei valori (a - f). 
  • La funzione translate(tx,[ty]) specifica una traslazione 2D rispetto al vettore [tx,ty], dove tx è il primo parametro per il valore di traslazione e ty è il secondo parametro opzionale per il valore di traslazione. Se ty non viene specificato, il suo valore viene impostato su zero. I parametri per il valore di traslazione possono essere espressi come percentuale o lunghezza.
  • La funzione translateX(tx) indica una traslazione di un dato valore nella direzione x.
  • La funzione translateX(tx) indica una traslazione di un dato valore nella direzione x.
  • La funzione scale(sx,[sy]) specifica un'operazione scalare 2D ottenuta tramite il vettore scalare [sx,sy] definito dai due parametri. Se il secondo parametro non viene fornito, assume automaticamente lo stesso valore del primo.
  • La funzione scaleX(sx) specifica un'operazione scalare ottenuta tramite il vettore scalare [sx,1], dove sx è fornito come parametro.
  • La funzione scaleY(sy) specifica un'operazione scalare ottenuta tramite il vettore scalare [1,sy], dove sy è fornito come parametro.
  • La funzione rotate(angle) specifica una rotazione 2D in base all'angolo definito dal parametro intorno all'origine dell'elemento, così come definita dalla proprietà transform-origin.
  • La funzione skewX(ax) specifica un'inclinazione lungo l'asse x in base all'angolo specificato.
  • La funzione skewY(ay) specifica un'inclinazione lungo l'asse y in base all'angolo specificato.
  • La funzione skew(ax,[ay]) specifica un'inclinazione lungo gli assi x e y. Il parametro del primo angolo specifica l'inclinazione rispetto all'asse x. Il parametro del secondo angolo specifica l'inclinazione rispetto all'asse y. Se il secondo parametro non viene specificato, per l'angolo y si utilizza il valore zero (cioè, non è presente alcuna inclinazione rispetto all'asse y).

La proprietà -ms-transform-origin accetta uno o due valori. Ciascun valore può essere una parola chiave, una lunghezza o una percentuale. Se la proprietà -ms-transform-origin non è impostata, la trasformazione inizia al centro (che corrisponde al valore 50% 50% per la proprietà -ms-transform-origin).

  • Il primo valore indica la posizione orizzontale (lungo l'asse x) e può essere negativo. Questo valore può essere espresso sotto forma di lunghezza (in una qualsiasi delle unità di misura supportate per la lunghezza), come percentuale (della lunghezza totale del riquadro) o con una di queste parole chiave: left (uguale a 0% o lunghezza zero); center (uguale a 50% o metà lunghezza del riquadro); right (uguale a 100% o lunghezza totale del riquadro).
  • Il secondo valore indica la posizione verticale (lungo l'asse y) e può essere negativo. Questo valore può essere espresso sotto forma di lunghezza (in una qualsiasi delle unità di misura supportate per la lunghezza), come percentuale (dell'altezza totale del riquadro) o con una di queste parole chiave: top (uguale a 0% o altezza zero); center (uguale a 50% o metà altezza del riquadro); bottom (uguale a 100% o altezza totale del riquadro).

Se viene specificato un solo valore, il secondo viene automaticamente utilizzato center.

Esaminare il seguente markup.

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

In Internet Explorer 9, se si imposta la proprietà -ms-transform-origin su 60% 100%, il punto di origine della trasformazione viene definito in corrispondenza del 60% della lunghezza e del 100% dell'altezza dell'elemento da trasformare. La proprietà -ms-transform sposta l'elemento di 200 pixel nella direzione x e di 100 pixel nella direzione y. Quindi, scala l'elemento del 75%. Infine, ruota l'elemento di 40 gradi in senso orario rispetto al punto di origine definito dalla proprietà -ms-transform-origin.

Per ulteriori informazioni sul modulo CSS3 2D Transforms, vedere MSDN.

Modulo CSS3 Backgrounds and Borders

Internet Explorer 9 supporta numerose funzionalità del modulo CSS3 Backgrounds and Borders. La nuova funzionalità più importante, cioè la proprietà border-radius, è anche la funzionalità bordo CSS più richiesta. In Internet Explorer 9, per la prima volta è anche disponibile il supporto per le seguenti nuove proprietà CSS3:

Inoltre, Internet Explorer 9 aggiunge specifiche funzionalità alle attuali proprietà CSS per sfondi e bordi:

Proprietà border-radius

La proprietà border-radius consente di arrotondare gli spigoli dei bordi sostituendo gli angoli acuti con il quarto di un'ellisse e specificando il raggio di ciascuna ellisse. Le proprietà sono composte dai seguenti elementi:

Ad esempio, esaminare il markup seguente:

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

Una volta applicato a un blocco di testo, il risultato sarà il seguente.

Modulo CSS3 Color

Internet Explorer 9 fornisce il supporto del modulo CSS3 Color. Questo modulo include il supporto dei modelli di colore RGBA; HSL; HSLA, la proprietà opacity e la parola chiave currentColor . Inoltre, Internet Explorer 9 rafforza il supporto della parola chiave transparent .

Modello di colore RGBA

Il modello di colore RGB è stato esteso e ora include un canale alfa (trasparenza). Il formato di un valore RGBA è rgba(rosso,verde,blu,alfa). I componenti rosso, verde e blu sono identici a quelli del modello RGB e vengono espressi sotto forma di numeri interi o percentuali. Il componente alfa è espresso come valore compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).

Ad esempio, per impostare il colore dello sfondo sul rosso con una trasparenza del 50%, è necessario includere nel foglio di stile una delle seguenti dichiarazioni CSS:

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

Tenere presente che solo i valori RGB, e non i valori RGBA, supportano la notazione esadecimale.

Modello di colore HSL

Internet Explorer 9 supporta i valori HSL (tonalità, saturazione e luminosità) del modulo CSS3 Color. Nel modello di colore HSL, la tonalità (H) è definita come l'angolo del colore scelto sulla ruota dei colori (ad esempio, il rosso è 0 o 360, il verde è 120, il blu è 240). La saturazione (S) e la luminosità (L) sono espresse sotto forma di percentuale. Ad esempio, la seguente dichiarazione CSS definisce uno sfondo rosso.

background-color: hsl(0,100%,50%);
Modello di colore HSLA

Internet Explorer 9 estende anche il modello di colore HSL con un canale alfa. Come nel caso del modello RGBA, anche qui il canale alfa è espresso da un valore compreso tra 0.0 e 1.0. Ad esempio, la seguente dichiarazione CSS definisce uno sfondo rosso con una trasparenza del 50%.

background-color: hsla(0,100%,50%,0.5);
Proprietà opacity

Internet Explorer 9 è in grado di gestire la proprietà opacity del modulo CSS3 Color che consente di controllare la trasparenza a livello di elemento. Sotto certi aspetti, il valore opacity può ritenersi simile al componente alfa dei valori RGBA, in quanto anche questo è compreso nell'intervallo 0.0 (completamente trasparente) - 1.0 (completamente opaco). La proprietà opacity è disponibile su tutti gli elementi.

Nel seguente esempio viene mostrata la proprietà opacity sul colore blu scuro (navy) con valori di opacità che procedono con incrementi di 0,2 da 0 a 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>

Applicando un div di 25×125 pixel in questo esempio, si ottiene il seguente risultato.

Parole chiave per il colore

Il modulo CSS3 Color fa sì che l'elenco di parole chiave per i colori di CSS sia identico a quello di SVG 1.0. Sebbene il supporto di SVG sia una novità assoluta in Internet Explorer 9, questa modifica era già stata implementata in Internet Explorer 8.

In Internet Explorer 9 è presente per la prima volta la parola chiave currentColor del modulo CSS3 Color che indica il valore corrente della proprietà color su qualsiasi proprietà che accetta il valore color. Quando impostata sulla proprietà color, currentColor è equivalente a color:inherit.

Internet Explorer 9 rafforza anche l'utilizzo della parola chiave transparent ben oltre le proprietà border-color e background-color. Ora infatti può essere utilizzata con qualsiasi proprietà che accetti il valore color.

Modulo CSS3 Fonts

Un controllo tipografico ottimizzato è ormai una costante in ogni nuova versione di CSS. Nello stesso tempo, però, la mancanza di un formato interoperabile per i caratteri Web può rappresentare un problema. Internet Explorer 9 ottimizza il supporto dei caratteri CSS così da garantire la perfetta compatibilità con il modulo CSS3 Fonts. Inoltre, supporta il formato WOFF (Web Open Font Format) e i caratteri raw TrueType.

Proprietà dei caratteri

La proprietà font-weight è stata aggiornata e ciò permette a Internet Explorer 9 di calcolare lo spessore dei caratteri così come specificato nel modulo CSS3 Fonts.

La proprietà font-size è stata aggiornata e ciò fa sì che il fattore di proporzione della parola chiave corrisponda a quanto definito nel modulo CSS3 Fonts. Inoltre, le parole chiave e le dimensioni delle intestazioni HTML sono mappate come specificato nel modulo CSS3 Fonts.

La proprietà font-stretch fa il suo ingresso in Internet Explorer 9 e consente di selezionare una faccia normale, condensata o espansa all'interno di una famiglia di caratteri. Questa proprietà è disponibile anche come descrittore della regola @font-face.

Regola @font-face

La regola @font-face abilita il collegamento tra caratteri. Ciò significa che, se il foglio di stile fa riferimento a uno specifico file del tipo di carattere, il browser è in grado di scaricarlo e utilizzarlo. Ad esempio, esaminare il seguente markup.

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

In questo esempio, la regola @font-face indirizza il browser all'URL specificato nel descrittore src da dove potrà scaricare il file che contiene il tipo di carattere specificato. In Internet Explorer 8 e nelle versioni precedenti, il descrittore src veniva erroneamente ignorato se conteneva una stringa format, come quella inserita nell'esempio precedente. In Internet Explorer 9, il descrittore src viene analizzato correttamente.

Internet Explorer 9 supporta anche il descrittore unicode-range che consente di specificare l'intervallo di caratteri Unicode supportati da un dato carattere. Ad esempio, nel seguente esempio viene specificato l'intervallo di caratteri ASCII di base.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Formati dei caratteri Web

Microsoft ha creato Internet Explorer 9 per massimizzare la scelta di caratteri Web. A questo scopo, si è scelto di procedere nel seguente modo:

  • Garantire la compatibilità con le versioni precedenti tramite il supporto del tipo di carattere EOT (Embedded OpenType)
  • Aggiungere il supporto del formato WOFF (Web Open Font Format) che reimpacchetta i file dei caratteri basati su sfnt (TrueType, OpenType, Open Font Format) comprimendo in formato ZIP ciascuna tabella
  • Aggiungere il supporto dei caratteri TrueType raw (senza bit di autorizzazione incorporamento impostati) installabili

Per un esempio di caratteri Web in Internet Explorer 9, vedere la demo " Web Fonts" o " More Web Fonts" sul sito Internet Explorer Test Drive

Per ulteriori informazioni sui caratteri CSS3 in Internet Explorer 9, vedere MSDN.

Modulo CSS3 Media Queries

Il modulo CSS3 Media Queries consente di specificare i metodi per permettere agli sviluppatori Web di applicare un foglio di stile a un gruppo di funzionalità per uno specifico dispositivo. Ad esempio, è possibile che al momento di sviluppare le pagine Web si voglia differenziare tra utenti che utilizzano un dispositivo mobile (schermo molto piccolo, tavolozza dei colori limitata, bassa risoluzione e così via), un netbook (schermo piccolo, tavolozza dei colori completa, alta risoluzione e così via) o un computer standard (schermo grande, tavolozza dei colori completa, alta risoluzione e così via). L'elenco completo di proprietà supportate dal modulo CSS3 Media Queries include width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution.

La dichiarazione riportata di seguito è un esempio di tipica query che ha per oggetto il dispositivo e utilizza la regola @media.

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

In questo caso, screen indica il tipo di dispositivo di destinazione e max-width è la proprietà di questo dispositivo. La dichiarazione afferma che le regole specificate (nessun bordo sugli elementi div ) devono essere applicate esclusivamente se la pagina viene visualizzata su uno schermo con una larghezza fino a 400 pixel. È possibile combinare diverse proprietà del dispositivo per creare query ancora più specifiche, come quella riportata di seguito.

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

Questa dichiarazione applica le regole specificate quando il dispositivo ha uno schermo con larghezza fino a 400 pixel e altezza fino a 600 pixel.

Per scoprire altre query per i dispositivi, visitare il sito Internet Explorer Test Drive.

Internet Explorer 9 introduce il supporto delle query per i dispositivi in CSS, HTML, XML e XHTML. Per ulteriori informazioni sulle query che hanno per oggetto i dispositivi in Internet Explorer 9, vedere MSDN.

Modulo CSS3 Namespaces

Internet Explorer 9 supporta un gran numero di funzionalità del modulo CSS3 Namespaces. CSS Namespaces consente agli sviluppatori di dichiarare uno spazio dei nomi predefinito per i file CSS. Ciò significa che, per impostazione predefinita, anche eventuali elementi o attributi utilizzeranno quello spazio dei nomi.

Con CSS Namespaces, gli sviluppatori possono anche creare dei prefissi per lo spazio dei nomi e utilizzarli poi nel file CSS. Infine, Internet Explorer 9 consente di dichiarare uno spazio dei nomi destinato agli elementi SVG.

Regola @namespace

La regola @namespace dichiara uno spazio dei nomi XML (ed eventualmente il suo prefisso) e lo associa a una stringa che rappresenta il nome dello spazio. Ad esempio, la seguente regola dichiara uno spazio dei nomi predefinito.

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

Lo spazio dei nomi predefinito viene applicato ai nomi che non dispongono di un componente spazio-dei-nomi esplicito.

Se una regola @namespace è dichiarata con un prefisso, questo può essere utilizzato nei nomi a cui si applica quello spazio dei nomi. Ad esempio, partendo dalla seguente dichiarazione dello spazio dei nomi per uno spazio prfx

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

…il seguente selettore individua nello spazio dei nomi gli elementi E che contengono il prefisso prfx.

prfx|E

L'esempio che segue è leggermente più complesso.

@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;}

In questo esempio, sono stati creati due prefissi per lo spazio dei nomi. Innanzitutto, gli elementi p in qualsiasi spazio dei nomi sono colorati di rosso. Quindi, eventuali elementi p nello spazio dei nomi prfx vengono ricolorati in blu e gli elementi p nello spazio dei nomi msft vengono ricolorati in verde.

Nel seguente esempio viene creato un elemento SVG.

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

In base allo spazio dei nomi e alla dichiarazione di questo esempio, a tutti i cerchi creati con SVG verrà aggiunto un riempimento rosso.

Per ulteriori informazioni, vedere la pagina relativa alla regola @namespace su MSDN.

Modulo CSS3 Values and Units

Internet Explorer 9 supporta molti nuovi valori e unità di misura descritti nel modulo CSS3 Values and Units. La maggior parte di questi nuovi valori e unità di misura sono necessari per supportare le altre funzionalità di CSS3 illustrate in questo documento.

Internet Explorer 9 supporta i seguenti nuovi valori e unità di misura:

  • deg: gradi (unità di misura angolo)
  • grad: gradi centesimali (unità di misura angolo)
  • rad: radianti (unità di misura angolo)
  • turn: giri (unità di misura angolo)
  • ms: millisecondi (unità di misura tempo)
  • s: secondi (unità di misura tempo)
  • rem: dimensione carattere dell'elemento radice (unità di misura lunghezza relativa)
  • vw: larghezza riquadro di visualizzazione (unità di misura lunghezza relativa)
  • vh: altezza riquadro di visualizzazione (unità di misura lunghezza relativa)
  • vm: inferiore a larghezza o altezza riquadro di visualizzazione (unità di misura lunghezza relativa)
  • ch: larghezza zero (larghezza del glifo zero nel carattere di rendering; unità di misura lunghezza relativa)

Inoltre, Internet Explorer 9 aggiorna la funzione attr() utilizzata per i contenuti generati. Ora infatti può essere applicata a tutte le proprietà e accettare argomenti multipli.

La seguente funzione CSS3 è nuova in Internet Explorer 9:

  • calc(): Calcola i valori tramite operatori aritmetici e può essere utilizzata ovunque siano consentiti i valori di lunghezza

Per ulteriori informazioni sulle funzioni CSS, vedere CSS Values and Units Reference su MSDN.

Selettori CSS3

Internet Explorer 9 supporta le modifiche alla sintassi dei selettori CSS illustrate in CSS3 Selectors Proposed Recommendation. Di seguito sono elencati i selettori che sono nuovi in Internet Explorer 9. Per informazioni dettagliate sul supporto dei selettori in Internet Explorer, vedere CSS Compatibility and Internet Explorer su MSDN.

Per ulteriori informazioni, vedere la sezione relativa ai selettori CSS su MSDN.

Per vedere un esempio di selettori CSS3 in azione, visitare il sito Internet Explorer Test Drive.

Pseudo-classi strutturali

Le pseudo-classi strutturali consentono di selezionare, sulla base di informazioni extra nell'albero del documento, elementi che altrimenti non potrebbero essere selezionati con selettori o combinatori standard.

Il seguente comando consente di selezionare un elemento E che è la radice del documento.

E:root 

Il seguente comando consente di selezionare un elemento E che è l'ennesimo elemento figlio dell'elemento padre.

E:nth-child(n)

Il seguente comando consente di selezionare un elemento E che è l'ennesimo elemento figlio dell'elemento padre, partendo dall'ultimo.

E:nth-last-child(n) 

Il seguente comando consente di selezionare un elemento E che è l'ennesimo elemento di pari livello del tipo specificato.

E:nth-of-type(n) 

Il seguente comando consente di selezionare un elemento E che è l'ennesimo elemento di pari livello del tipo specificato, partendo dall'ultimo.

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

Il seguente comando consente di selezionare un elemento E che è l'ultimo elemento figlio dell'elemento padre.

E:last-child 

Il seguente comando consente di selezionare un elemento E che è il primo elemento di pari livello del tipo specificato.

E:first-of-type 

Il seguente comando consente di selezionare un elemento E che è l'ultimo elemento di pari livello del tipo specificato.

E:last-of-type 

Il seguente comando consente di selezionare un elemento E che è l'unico elemento figlio dell'elemento padre.

E:only-child

Il seguente comando consente di selezionare un elemento E che è l'unico elemento di pari livello del tipo specificato.

E:only-of-type

Il seguente comando consente di selezionare un elemento E che non ha elementi figlio (inclusi i nodi di testo).

E:empty
Pseudo-classe di destinazione

La pseudo-classe target consente di selezionare l'elemento di destinazione dell'URI di riferimento. Per identificare un punto all'interno di una pagina, si utilizza un identificatore del frammento costituito dal simbolo cancelletto (#) seguito da un identificatore di ancoraggio (ad esempio, http://www.example.com/mypage.html#section_3).

Il seguente comando consente di selezionare l'elemento div con classe important che è l'elemento di destinazione dell'URI di riferimento. Se l'URI del documento non ha alcun identificatore del frammento, non ci sono elementi di destinazione.

div.important:target
Pseudo-classi per lo stato dell'elemento UI

Le pseudo-classi per lo stato dell'elemento UI consentono di selezionare gli elementi UI (controlli quali pulsanti di opzioni o caselle di controllo) che sono in un determinato stato, cioè abilitato, disabilitato o selezionato.

Il seguente comando consente di selezionare un elemento di controllo E che è abilitato.

E:enabled

Il seguente comando consente di selezionare un elemento di controllo E che è disabilitato.

E:disabled 

Il seguente comando consente di selezionare un elemento di controllo E che è selezionato.

E:checked 

La pseudo-classe : indeterminate consente di selezionare i pulsanti di opzione e le caselle di controllo per i quali non è possibile stabilire lo stato perché non sono né selezionati né deselezionati. Il seguente comando consente di selezionare l'elemento di controllo E per il quale non è possibile stabilire lo stato.

E:indeterminate

Nota   La pseudo-classe :indeterminate non è più definita nell'attuale specifica CSS3, ma è supportata dai browser più diffusi.

Pseudo-classe di negazione

La pseudo-classe di negazione utilizza un selettore come argomento per selezionare gli elementi che non sono selezionati da quell'argomento. Il seguente comando consente di selezionare un elemento E che non corrisponde al selettore s:

E:not(s)
Pseudo-elemento per i frammenti di un elemento UI

Lo pseudo-elemento per i frammenti di un elemento UI, ::selection, consente di selezionare qualsiasi parte di una pagina che l'utente ha evidenziato, incluso il testo all'interno di un campo modificabile. Questo pseudo-elemento può essere applicato alle proprietà color e background-color. Il seguente comando consente di selezionare il testo evidenziato dall'utente all'interno dell'elemento E.

E::selection 

Nota   Lo pseudo-elemento ::selection non è più definito nell'attuale specifica CSS3, ma è supportato dai browser più diffusi.

Altre funzionalità CSS

In Internet Explorer 9 è fornito un supporto parziale del modulo CSS Object Model (OM) View (Working Draft).

Modulo CSSOM View

Il modulo CSSOM View definisce le API che consentono agli sviluppatori Web di esaminare e modificare tramite programma le proprietà di visualizzazione di un documento e del suo contenuto, inclusi posizionamento delle caselle, larghezza del riquadro di visualizzazione e scorrimento degli elementi. Il supporto di alcune funzionalità di questo modulo era già stato introdotto in Internet Explorer 8. Internet Explorer 9 estende questo supporto e include un numero maggiore di API CSSOM View:

URI dati

Lo strumento URI dati consente di incorporare dei dati direttamente nel contesto della pagina Web. L'esempio più ovvio è dato da un'immagine di piccole dimensioni incorporata in una pagina Web, come la seguente:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Quando viene posizionato nell'attributo src di un elemento img, questo testo incorpora l'immagine nel markup della pagina. Internet Explorer 8 ha introdotto gli URI dati in Internet Explorer.

In Internet Explorer 9, gli sviluppatori possono utilizzare un URI dati nell'attributo src di un elemento script. Inoltre, il limite per la dimensione degli URI dati è stato aumentato, passando da 32 KB in Internet Explorer 8 a 4 GB in Internet Explorer 9.

Miglioramenti al modello DOM (Document Object Model)

Internet Explorer 9 può contare su un modello DOM notevolmente migliorato. Oltre al supporto del modello DOM Level 2 (L2) e L3 del W3C (World Wide Web Consortium), Internet Explorer 9 offre un modello DOM ottimizzato e una migliore gestione degli spazi.

Presentazione del modello DOM ottimizzato

Il modello DOM disponibile in Internet Explorer 9 ottimizza le prestazioni della modalità degli standard di Internet Explorer 9 (modalità IE9) velocizzando l'esecuzione degli script tra "Chakra", il nuovo motore JavaScript, e il motore di rendering Trident e spostando i punti di ingresso del modello DOM nel motore Chakra. Per ulteriori informazioni sulla modalità IE9, vedere Interoperabilità ottimizzata tramite il supporto degli standard in questo documento. Nel contempo, questo modello DOM ottimizzato è in grado di offrire la corretta gerarchia degli oggetti di ereditarietà DOM come indicato nelle specifiche DOM L2 e L3 del W3C.

I tipi di oggetti DOM ottimizzati sono ora disponibili negli strumenti di sviluppo F12 quando si creano le pagine nella modalità degli standard di Internet Explorer 9. Per ulteriori informazioni sui nuovi strumenti di sviluppo F12 in Internet Explorer 9, vedere Strumenti di sviluppo F12 in questo documento. Non vengono più mostrati i tipi di oggetto legacy basati su COM (costituiti da un assortimento di interfacce e oggetti Disp); al loro posto, le pagine nella modalità IE9 riportano i nomi dei tipi di oggetti DOM ottimizzati utilizzati dal motore Chakra, conformemente a quanto stabilito dagli standard DOM L2 e L3 del W3C (ad esempio, NodeList, DocumentType, HTMLBodyElement e così via).

Il modello DOM ottimizzato disponibile in Internet Explorer 9 rafforza l'interoperabilità tra Internet Explorer 9 e gli altri browser. Nel contempo, garantisce migliori prestazioni in diverse situazioni in quanto gli oggetti DOM vengono rappresentati come oggetti JavaScript nativi.

Il modello DOM ottimizzato rende disponibili negli oggetti e nelle API DOM una vasta gamma di nuove funzionalità di "Chakra", il nuovo motore JavaScript, tra cui:

  • Estendibilità oggetti DOM selettiva (tramite Object.preventExtensions)
  • Modificabilità delle API DOM (tramite la modifica dei descrittori delle proprietà delle API DOM o la rimozione di dette proprietà)
  • Supporto JSON degli oggetti DOM
  • Funzionalità degli oggetti JavaScript native tramite l'ereditarietà (hasOwnProperty, toString e così via)
  • Funzionalità delle funzioni JavaScript native tramite l'ereditarietà (call, apply, bind)

Queste funzionalità uniformano le operazioni di programmazione che coinvolgono oggetti nativi del motore JavaScript e modello DOM. Inoltre, sono state aggiunte le seguenti nuove funzionalità DOM:

  • Eccezioni DOM del W3C. Le eccezioni DOM sono nuovi tipi di errore risultanti da errori delle API DOM. I codici di errore per queste eccezioni sono mappati alle costanti definite nell'eccezione stessa.
  • Proprietà "const" del modello DOM del W3C (ad esempio, Node.ELEMENT_NODE). Le proprietà "const" sono semplici campi che forniscono i nomi dei valori numerici restituiti da altre API DOM. Ad esempio, il numero restituito dall'API nodeType può essere confrontato con la costante per rendere il codice più facilmente leggibile: if (myElement.nodeType == Node.ELEMENT_NODE)

Analisi e serializzazione XML dal e al modello DOM

Sebbene Internet Explorer fornisse già il supporto dell'analisi e della serializzazione XML dal e al modello DOM nativo, per gli script non era facile accedere a questa funzionalità dai documenti HTML. Per questo motivo, in Internet Explorer 9 è stato aggiunto il supporto delle interfacce DOMParser e XMLSerializer. Queste interfacce sono supportate dai browser più diffusi.

Il seguente script di esempio mostra come analizzare una stringa in un documento XML usando l'interfaccia DOMParser:

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

Il seguente script di esempio mostra come serializzare un nodo DOM (inclusi i nodi di documenti HTML) in una stringa XML usando l'interfaccia XMLSerializer:

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

Document Object Model (DOM) Level 2 e 3

Internet Explorer 9 supporta un numero maggiore di modelli DOM Level 2 (DOM L2) e Level 3 (DOM L3) e fornisce un supporto di DOM L2 ottimizzato rispetto alla precedenti versioni di Internet Explorer. Inoltre, garantisce il supporto della specifica WebIDL (Working Draft).

Per la prima volta, in Internet Explorer 9 è disponibile il supporto delle seguenti funzionalità DOM.

DOM Core (L2, L3) e Views (L2)

Internet Explorer 9 fornisce il supporto di numerose nuove API DOM L2 Core, tra cui:

Inoltre, garantisce il supporto dell'interoperabilità per lo spazio dei nomi DOM come, ad esempio, il supporto dei metodi *NS e delle proprietà legate allo spazio dei nomi (createElementNS, namespaceURI, localName, prefix e così via). Internet Explorer 9 supporta inoltre un numero sempre crescente di metodi e proprietà DOM L3 Core:

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

Internet Explorer 9 fornisce il supporto completo di entrambe le proprietà DOM L2 Views.

Per ulteriori informazioni, vedere la sezione relativa a DOM Core e Views su MSDN.

DOM Element Traversal

La specifica Element Traversal definisce l'interfaccia ElementTraversal. Questa interfaccia consente di utilizzare uno script per spostarsi tra gli elementi di un albero DOM, quali i nodi nei documenti HTML, XML o SVG. Internet Explorer 9 supporta l'interfaccia ElementTraversal e le sue cinque proprietà.

DOM Events (L2, L3)

Le specifiche DOM Events descrivono il sistema di eventi DOM che consente di eseguire registrazioni a livello di gestori eventi, descrivere il flusso di eventi nell'albero del documento e definire le informazioni contestuali per gli eventi. Per ulteriori informazioni sul modello degli eventi, vedere Understanding the Event Model su MSDN.

Il sistema di eventi in Internet Explorer 9 ha tra i suoi obiettivi la messa a punto di un sistema interoperabile così come specificato dal W3C. In questo modo, è possibile allontanarsi dal modello attachEvent di Internet Explorer, eliminando la necessità di creare dei branch del codice per diversi browser.

Nota   Gli eventi di modifica DOM sono stati inclusi per completezza, ma sono obsoleti nello standard W3C.

DOM L2 HTML

Internet Explorer 9 supporta le API DOM L2 HTML che non erano disponibili nelle versioni precedenti di Internet Explorer, incluse API HTML5 quali getElementsByClassName e characterSet. In Internet Explorer 9, il modello oggetto nelle tabelle è stato notevolmente migliorato, soprattutto con riferimento alle operazioni DOM di aggiunta e rimozione degli elementi.

getElementsByClassName

Il metodo getElementsByClassName restituisce tutti i nodi degli elementi la cui classe corrisponde alla stringa immessa. Il suo funzionamento è simile a quello del metodo getElementsByTagName.

characterSet

L'attributo characterSet restituisce il nome MIME preferito della codifica dei caratteri del documento corrente.

DOM L2 Style

La specifica DOM L2 Style definisce le API per accedere e cambiare tramite programma gli stili dei singoli elementi e i fogli di stile rimuovendo o modificando le regole. Nelle precedenti versioni di Internet Explorer era possibile eseguire queste operazioni utilizzando metodi proprietari; Internet Explorer 9 supporta le API standardizzate definite nella specifica DOM L2 Style. Inoltre, supporta API standardizzate per le quali non è disponibile un corrispondente in Internet Explorer come, ad esempio, il metodo getComputedStyle. Per vedere un esempio del metodo getComputedStyle in azione, visitare il sito Internet Explorer Test Drive.

Per ulteriori informazioni, vedere DOM Style su MSDN.

DOM L2 Traversal and Range

La parte Range della specifica DOM L2 Traversal and Range definisce un metodo generico per selezionare il contenuto dei documenti tra una coppia di punti di divisione. I punti di divisione sono specificati da un contenitore (l'elemento padre che contiene il punto) e da un offset (la posizione nel contenitore in cui si trova il punto). Insieme all'interfaccia HTML5 Selection, le funzionalità DOM Range consentono di recuperare un intervallo, selezionare elementi figlio ed eliminare una selezione tramite programma.

Internet Explorer 9 supporta tutte le API DOM L2 Range, così come tutte le API HTML5 Selection come il diffuso metodo setSelectionRange.

Per ulteriori informazioni, vedere DOM Range su MSDN.

La parte Traversal della specifica DOM L2 Traversal and Range definisce un modo per spostarsi all'interno di un documento ed escludere i nodi, se necessario. Internet Explorer 9 supporta i metodi di spostamento DOM (NodeIterator e TreeWalker) e di esclusione dei nodi (whatToShow e NodeFilter) definiti nella specifica W3C.

Per ulteriori informazioni, vedere DOM Traversal su MSDN.

Gestione degli spazi nel modello DOM

La visualizzazione degli spazi DOM in Internet Explorer è sempre stata gestita diversamente dagli altri browser e la mancanza di interoperabilità in questo ambito ha indubbiamente rappresentato un problema per gli sviluppatori Web. Nelle versioni precedenti, Internet Explorer comprimeva gli spazi rilevati e non li inseriva nei nodi di testo nel modello DOM. In Internet Explorer 9, lo spazio viene mantenuto e inserito nei nodi di testo nel modello DOM, come previsto. Questo comportamento rispecchia quello dei principali browser.

ECMAScript 5

In Internet Explorer 9 sono stati apportati degli importanti miglioramenti al linguaggio JavaScript che si vanno ad aggiungere alle prestazioni JavaScript ottimizzate. A dicembre 2009, l'associazione internazionale ECMA ha approvato la quinta edizione dello standard ECMA 262 che segue la terza edizione (la quarta non è mai stata pubblicata) e quello stesso anno Microsoft ha inserito degli elementi per il supporto di ECMAScript 5 (ES5) quando è stato aggiunto a Internet Explorer 8 il supporto JSON nativo e della funzione di accesso per gli oggetti DOM. ES5 ha il merito di andare oltre il supporto JSON e della funzione di accesso DOM nella standardizzazione di importanti miglioramenti al linguaggio JavaScript.

Tra le numerose funzionalità ECMAScript 5 implementate in Internet Explorer 9 vi sono:

Inoltre, Internet Explorer 9 risolve numerosi problemi rilevati nelle precedenti implementazioni di JavaScript in Internet Explorer. Per ulteriori informazioni, visitare il blog del team di Internet Explorer. Per vedere il supporto di ECMAScript 5 in azione, visitare il sito Internet Explorer Test Drive.

HTML5

Già in Internet Explorer 8 era stato reso disponibile il supporto di alcune funzionalità della specifica HTML5 (Working Draft), tra cui:

Facendo leva sul lavoro svolto in Internet Explorer 8 per garantire la conformità con HTML5, in Internet Explorer 9 sono state rese disponibili le seguenti nuove funzionalità:

Nota  È importante ricordare che, al momento in cui questo documento è stato redatto, la specifica HTML5 era ancora in fase Working Draft. Fino a quando non raggiungerà la fase Candidate Recommendation potrebbe subire modifiche sostanziali. Per ulteriori informazioni, vedere la pagina dedicata alla specifica HTML5 aggiornata (Working Draft).

Georilevazione HTML5

Internet Explorer 9 supporta la georilevazione. L'API per la georilevazione consente a un'applicazione Web di accedere ai dati sulla posizione geografica corrente del PC su cui è in esecuzione Internet Explorer. La pagina Web può quindi personalizzare il contenuto in base a questa informazione visualizzando, ad esempio, la località sulla mappa o informazioni locali aggiornate (ad esempio, previsioni meteorologiche o notizie). Le informazioni sulla posizione dell'utente sono fornite sotto forma di coordinate che indicano la latitudine e la longitudine. Le API per la georilevazione disponibili in Internet Explorer 9 sono conformi agli standard della Geolocation API Specification.

Per vedere come funziona effettivamente la georilevazione, visitare il sito Internet Explorer 9 Test Drive.

Per ulteriori informazioni sulla georilevazione, vedere MSDN.

Elementi HTML5 audio e video

Tra le funzionalità HTML5 di maggiore interesse per gli sviluppatori, è indubbio che il supporto dei nuovi elementi video e audio in Internet Explorer 9 sia tra i più apprezzati. Gli elementi video e audio sono entrambi definiti nella sezione Embedded content della specifica HTML5.

Fondamentalmente, gli elementi video e audio consentono di incorporare contenuti video e audio in una pagina HTML. Gli sviluppatori Web possono inoltre specificare un numero non indifferente di attributi per entrambi gli elementi. Ad esempio, esaminare il seguente markup.

<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>

In Internet Explorer 9, questo markup visualizzerà, in uno spazio di 400×300 (attributi width e height), il file immagine "frame.png" durante il caricamento del contenuto del video (attributo poster). Il file video, "video.mp4" (attributo src), verrà riprodotto automaticamente al completamento della pagina (attributo autoplay) e verranno visualizzati i comandi per controllare la riproduzione del video (attributo controls). Una volta terminato, il video verrà ripetuto (attributo loop). Se il formato del video non è supportato, verrà visualizzato il testo all'interno dell'elemento video ("This content appears…"). L'elemento video supporta anche l'elemento preload che suggerisce al browser ciò che lo sviluppatore Web ritiene possa ottimizzare l'esperienza dell'utente.

Per vedere un esempio dell'elemento video in azione, vedere la demo " Video Panorama" sul sito Internet Explorer Test Drive.

Internet Explorer 9 supporta anche l'elemento video con origini multiple, ognuna delle quali è specificata dall'elemento figlio source. Ad esempio, esaminare il seguente markup.

<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>

In questo caso, Internet Explorer 9 seleziona il primo formato supportato (in questo caso, il secondo elemento source) e riproduce il file di origine ad esso associato.

La definizione dell'elemento audio è simile a quella dell'elemento video, ma il primo non dispone degli attributi width, height e poster. Per vedere un esempio dell'elemento audio in azione, visitare il sito Internet Explorer Test Drive.

Internet Explorer 9 supporta i seguenti formati per il contenuto:

Nome elementoFormati supportati
video

Contenitore MP4, video H.264, tutti i profili—audio in AAC o MP3

Video WebM, se è installato il codec VP8

audioAAC o MP3

Per ulteriori informazioni, vedere la sezione relativa agli elementi HTML5 video e audio su MSDN.

Elemento HTML5 canvas

Un'altra funzionalità HTML5 nuova in Internet Explorer 9 è rappresentata dall'elemento canvas, utilizzato insieme all'API Canvas 2D. L'elemento canvas, così come è definito nella specifica HTML5, consente di eseguire il rendering della grafica su un canvas in formato bitmap che dipende dalla risoluzione. Per disegnare sul canvas, si utilizzano i contesti, come ad esempio quello presente nella specifica API Canvas 2D del W3C. Internet Explorer 9 supporta l'elemento canvas, utilizzando l'API di disegno 2D Canvas come contesto. In Internet Explorer 9, il contesto Canvas 2D è rappresentato dall'oggetto CanvasRenderingContext2D o dall'interfaccia ICanvasRenderingContext2D interface. Come tutti gli elementi grafici in Internet Explorer 9, anche l'elemento canvas è un componente hardware che può essere reso più veloce tramite l'utilizzo di Windows e della GPU.

L'elemento canvas rende possibili disegni che includono rettangoli, percorsi, linee, riempimenti, archi, curve quadratiche e di Bézier. Inoltre, l'elemento canvas in Internet Explorer 9 supporta gli attributi width e height. I valori predefiniti degli attributi width e height sono, rispettivamente, 300 e 150 pixel e il colore predefinito è il nero trasparente.

L'elemento canvas rappresenta un utile strumento per programmare la grafica sul Web. Il tag canvas rappresenta una superficie di disegno bidimensionale in "modalità immediata" (ciò significa che i comandi di disegno vengono inviati direttamente ai componenti hardware per la grafica) che consente di realizzare grafici, animazioni o giochi interattivi senza dover scaricare un apposito plug-in. Utilizzando le API definite dall'oggetto CanvasRenderingContext2D, l'elemento canvas consente di realizzare disegni di:

È possibile utilizzare JavaScript per animare i disegni su canvas o creare dei contenuti interattivi in grado di rispondere alle immissioni tramite tastiera, ai clic del mouse o a eventi che coinvolgono il browser. Ad esempio, nel sito Internet Explorer Test Drive è disponibile un esempio che mostra come, con poche righe JavaScript, sia possibile creare delle linee colorate luminescenti con posizionamento casuale.

L'elemento canvas in Internet Explorer 9 supporta gli attributi width e height. I valori predefiniti degli attributi width e height sono, rispettivamente, 300 e 150 pixel e il colore predefinito è il nero trasparente.

Internet Explorer 9 supporta le seguenti API Canvas 2D Context (membri esposti dall'oggetto CanvasRenderingContext2D):

Per informazioni più approfondite su HTML5 Canvas in Internet Explorer 9, vedere il MSDN. Inoltre, visitare il sito Internet Explorer Test Drive per alcune demo dell'elemento canvas. Per informazioni tecniche sull'elemento canvas in Internet Explorer 9, vedere la pagina di riferimento relativa all'elemento canvas su MSDN.

Miglioramenti all'analisi HTML

L'analisi HTML in Internet Explorer 9 è stata ottimizzata per adattarsi meglio al comportamento descritto nella specifica HTML5 Draft.

Analisi SVG in HTML

Internet Explorer 9 supporta l'incorporamento di elementi SVG direttamente in HTML. Per ulteriori informazioni su SVG, vedere SVG (Scalable Vector Graphics) in questa guida.

Analisi XHTML

Internet Explorer 9 analizza i documenti con tipologia MIME application/xhtml+xml come XHTML.

Elementi generici

In passato, Internet Explorer analizzava gli elementi non riconosciuti come elementi "sconosciuti". Questi elementi venivano appiattiti e ciò, oltre a non permettere di applicarvi le regole di stile CSS standard, non era conforme alla specifica HTML5 Draft. Internet Explorer 9, invece, analizza gli elementi non riconosciuti come elementi "generici", consentendo loro di comportarsi come elementi normali. In questo modo, gli sviluppatori potranno evitare di cercare soluzioni alternative, come chiamare un elemento document.createElement perché Internet Explorer possa riconoscerlo.

Di seguito è fornito l'esempio di un elemento generico, in questo caso un elemento non definito chiamato 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 ignora il tag mydiv e le regole CSS ad esso associate. La frase viene visualizzata come segue.

Internet Explorer 9 analizza correttamente il tag mydiv e la frase viene visualizzata come segue.

Tag sovrapposti

Se il documento HTML contiene tag sovrapposti, Internet Explorer 8 e le versioni precedenti non erano in grado di risolverli in fase di analisi. Questo comportamento, però, non è conforme alla specifica HTML5 Draft. Se nella creazione dello script si sovrappongono alcuni elementi (come nel caso mostrato qui), è possibile che si ricevano dei messaggi di errore poco chiari relativi allo script. Internet Explorer 9 è conforme alla specifica HTML5 Draft e risolve i tag sovrapposti in fase di analisi.

Di seguito è fornito un esempio di uno script che fa diventare rosso il testo tra i tag sovrapposti i e 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>

In Internet Explorer 8 e nelle versioni precedenti, questo markup portava a una visualizzazione diversa da quella desiderata.

In Internet Explorer 9, il markup visualizza correttamente la frase.

Analisi delle modifiche a blocchi di stile e script

Internet Explorer 8 e le versioni precedenti non mantenevano il testo presente in un blocco script o di stile nei nodi di testo nel modello DOM. Internet Explorer 9 mantiene il testo presente nel blocco script o di stile nel modello DOM sotto forma di nodi di testo, come previsto. In questo modo, il codice di origine è disponibile nel modello DOM sotto forma di testo e può essere manipolato senza problemi.

API HTML5 Selection

Internet Explorer 9 supporta le tre API HTML5 per la selezione del testo. L'oggetto Selection rappresenta un elenco di oggetti Range, abilitati dal supporto di DOM L2 Range in Internet Explorer 9. Per ulteriori informazioni, vedere Miglioramenti al modello DOM (Document Object Model) in questo documento.

Metodo getSelection

Il metodo getSelection restituisce l'oggetto Selection per la finestra e ciò rappresenta il testo selezionato al momento.

Proprietà selectionStart

La proprietà selectionStart definisce l'offset rispetto all'inizio del testo selezionato e può anche essere utilizzata per impostare l'inizio della selezione.

Proprietà selectionEnd

La proprietà selectionEnd definisce l'offset rispetto alla fine del testo selezionato e può anche essere utilizzata per impostare la fine della selezione.

Elementi semantici HTML5

Internet Explorer 9 supporta un numero maggiore di elementi semantici HTML5. In questo contesto, con il termino “semantico” si indicano quegli elementi in cui il nome del tag ne descrive il contenuto, ma che non presentano comportamenti particolari. I tag semantici possono risultare particolarmente utili per l'accessibilità.

In Internet Explorer 9 sono stati introdotti i seguenti cambiamenti a livello di supporto degli elementi semantici:

  • Adesso, gli elementi ereditano le loro caratteristiche dall'interfaccia HTMLElement e non più dall'interfaccia HTMLUnknownElement, come indicato nella specifica HTML5.
  • Per impostazione predefinita, agli elementi viene assegnato lo stile indicato nella specifica HTML5.

Ora è possibile gestire i seguenti elementi semantici:

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

Profili colore ICC

I profili ICC (International Color Consortium) sono profili colore che descrivono gli attributi di colore per componenti software e hardware.

Internet Explorer 9 supporta i profili colore ICC v2 e v4 per le immagini, come illustrato nelle specifiche ICC.

Selectors API Level 2

La specifica Selectors API Level 2 definisce un gruppo di API (Application Programming Interface) che consentono di valutare i selettori nel modello DOM (Document Object Model).

Internet Explorer 8 implementava le API querySelector e querySelectorAll. Internet Explorer 9 supporta anche il metodo msMatchesSelector.

SVG (Scalable Vector Graphics)

L'implementazione del supporto SVG in Internet Explorer era una delle richieste più pressanti in quanto questa tipologia di grafica consente di aggiungere a un sito Web effetti visivi ad alta fedeltà e facilmente scalabili (da quelli più piccoli a quelli più grandi e complessi) senza dover utilizzare un plug-in o un apposito visualizzatore.

In Internet Explorer 9, Microsoft ha dato seguito a questa richiesta e ha introdotto il supporto per le funzionalità SVG di base. Il supporto SVG in Internet Explorer 9 si basa sulla specifica SVG 1.1 (Second Edition) (per browser desktop). È stata implementata la seguente funzionalità:

  • Numerose funzionalità SVG legate alla struttura, all'interattività (eventi script) e allo stile (inline e tramite CSS) del documento
  • Numerosi elementi per le presentazioni con i corrispondenti attributi e interfacce DOM, tra cui:
    • Forme di base
    • Riempimento, tratteggio, indicatore, colore
    • Gradienti e motivi
    • Percorsi
    • Testo

Internet Explorer 9 supporta i seguenti metodi per la visualizzazione del markup SVG:

  • Incorporamento di frammenti SVG nel documento HTML5 senza utilizzare oggetti estranei, cioè includendo esclusivamente il tag <svg> nel documento HTML
  • SVG come tipo di documento (con estensione file .svg)
  • SVG in XML o XHTML (simile al metodo HTML5, ma con file XML o XHTML)
  • SVG come immagine CSS
  • SVG tramite l'elemento object, come nel seguente esempio (notare gli attributi type, height, width):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • SVG tramite l'elemento img, embed, iframe o frame, come nel seguente esempio:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Per ulteriori informazioni sul supporto SVG in Internet Explorer 9, vedere MSDN.

Per ulteriori informazioni su SVG, vedere la pagina relativa all'elemento svg su MSDN.

Forme di base

Internet Explorer 9 supporta l'analisi e il rendering di tutti gli elementi con forme di base, dei loro attributi e delle interfacce DOM associate, come specificato nel modulo Basic Shapes della specifica SVG 1.1 (Second Edition). Gli elementi che costituiscono le forme di base supportate da Internet Explorer 9 sono:

Internet Explorer 9 supporta anche le interfacce DOM associate a questi elementi.

Di seguito sono forniti degli esempi dei suddetti elementi di forma. Dopo il markup è riportato il risultato corrispondente in Internet Explorer 9.

Rettangoli: elemento 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"/>

Per ulteriori informazioni, vedere la pagina relativa all'elemento rect su MSDN.

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

Per ulteriori informazioni, vedere la pagina relativa all'elemento circle su MSDN.

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

Per ulteriori informazioni, vedere la pagina relativa all'elemento ellipse su MSDN.

Linee: elemento 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"/>

Per ulteriori informazioni, vedere la pagina relativa all'elemento line su MSDN.

Polilinee: elemento polyline

Una "polilinea" in SVG è definita come numerose linee connesse tra loro che creano una forma "aperta" oppure un poligono con uno o più lati mancanti o forme non convesse.

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

Per ulteriori informazioni, vedere la pagina relativa all'elemento polyline su MSDN.

Poligoni: elemento polygon

Un poligono è una forma chiusa.

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

Per ulteriori informazioni, vedere la pagina relativa all'elemento polygon su MSDN.

Ritaglio, mascheramento, compositing

Internet Explorer 9 supporta il ritaglio, i percorsi di taglio, il mascheramento e l'opacità SVG come specificato nel modulo Clipping, Masking, and Compositing della specifica SVG 1.1 (Second Edition). I percorsi SVG sono illustrati nella sezione Percorsi di questo documento.

Ritaglio

Un tracciato di ritaglio taglia o delimita l'area di disegno per un colore, un motivo o un'immagine. Tutte le parti dell'elemento grafico che si trovano al di fuori del tracciato di ritaglio non vengono inserite nel disegno. I tracciati di ritaglio sono completamente opachi e la parte dell'elemento grafico che si trova oltre questo tracciato è completamente invisibile.

In SVG, le proprietà overflow e clip stabiliscono i tracciati di ritaglio iniziali o le forme in cui verrà visualizzato il contenuto. Per impostazione predefinita, il tracciato di ritaglio iniziale è definito sulla base del riquadro di visualizzazione SVG o dell'area rettangolare della pagina in cui è visualizzato il contenuto SVG.

L'elemento clipPath definisce un tracciato di ritaglio. Questo tracciato viene poi referenziato tramite la proprietà clip-path. La proprietà clip-rule si applica agli elementi grafici all'interno di un elemento clipPath e l'attributo clipPathUnits definisce un sistema di coordinate per il contenuto di clipPath. I tracciati di ritaglio possono essere applicati a testo così come a colori, motivi e immagini.

È possibile accedere tramite programma alla funzionalità di ritaglio con l'interfaccia SVGClipPathElement DOM.

Di seguito è fornito un esempio di tracciato di ritaglio 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>

In questo esempio viene utilizzato l'elemento clipPath per definire un tracciato di ritaglio in un cerchio. Quindi, viene utilizzata la proprietà clip-path per applicare il tracciato di ritaglio a un rettangolo. In Internet Explorer 9 si ottiene il seguente risultato.

Mascheramento

Una maschera è simile a un tracciato di ritaglio, ma è semitrasparente. Generalmente le maschere vengono utilizzate per eseguire il compositing degli elementi in primo piano nello sfondo.

L'elemento mask definisce una maschera. Questa maschera viene poi referenziata tramite la proprietà mask.

Di seguito è fornito un esempio di maschera 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>

In questo esempio viene utilizzata la proprietà mask per definire una maschera con la forma di tre cerchi adiacenti, ognuno con un colore diverso. Quindi, viene utilizzata la proprietà mask per applicare la maschera a un rettangolo viola. In Internet Explorer 9 si ottiene il seguente risultato.

Sistemi di coordinate, trasformazioni, unità di misura

Internet Explorer 9 supporta i sistemi di coordinate, le trasformazioni e le unità di misura SVG come specificato nel modulo Coordinate Systems, Transformations and Units della specifica SVG 1.1 (Second Edition). Tra le funzionalità supportate da Internet Explorer 9 vi sono:

  • Unità di misura e percentuali.
  • Trasformazione arbitraria di qualsiasi elemento e attributo transform.
  • Proprietà viewBox e preserveAspectRatio (inclusa la loro interazione con la proprietà overflow).
  • Supporto delle trasformazioni e dei tipi di trasformazioni.

Inoltre, Internet Explorer 9 supporta l'interfaccia DOM associata a sistemi di coordinate e trasformazioni SVG.

Struttura documenti

Internet Explorer 9 supporta le funzionalità di base di struttura documenti, metadati, estendibilità SVG, come specificato nei moduli Document Structure, Metadata e Extensibility della specifica SVG 1.1 (Second Edition). Tra gli elementi supportati da Internet Explorer 9 vi sono:

Internet Explorer 9 supporta anche le interfacce DOM associate a questi elementi.

Gradienti e motivi

SVG consente di disegnare o tratteggiare delle forme e del testo utilizzando colori, gradienti e motivi. Internet Explorer 9 supporta gradienti e motivi SVG, come specificato nel modulo Gradients and Patterns della specifica SVG 1.1 (Second Edition).

Gradienti

Il supporto dei gradienti è disponibile tramite gli elementi linearGradient e radialGradient e gli attributi gradientUnits e gradientTransform. I colori dei gradienti sono definiti dall'elemento stop. Gli elementi gradient possono essere utilizzati nelle proprietà fill e stroke delle forme SVG. Ad esempio, esaminare il seguente markup:

<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>

Questo markup definisce un rettangolo con un gradiente lineare. I due elementi stop specificano le interruzioni di colore lungo un vettore di transizioni cromatiche: uno giallo in corrispondenza del 10% e uno blu in corrispondenza del 90%. In Internet Explorer 9 si ottiene il seguente risultato:

Motivi

Il supporto dei motivi è fornito tramite l'elemento pattern e i suoi attributi. Come gli elementi gradient, anche gli elementi pattern possono essere utilizzati nelle proprietà fill e stroke delle forme SVG. Ad esempio, esaminare il seguente markup.

<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>

In questo esempio, l'elemento pattern definisce un motivo costituito dall'alternanza di quadratini blu e circoletti gialli. L'ellisse specificata viene riempita con questo motivo. In Internet Explorer 9 si ottiene il seguente risultato.

Interattività

Il contenuto SVG può essere interattivo, cioè può modificarsi a seguito di input dell'utente. Internet Explorer 9 supporta l'interattività SVG, come specificato nel modulo Interactivity della specifica SVG 1.1 (Second Edition). Tra le funzionalità supportate vi sono:

Inoltre, Internet Explorer 9 supporta l'interfaccia SVGCursorElement DOM del modulo Interactivity.

Infine, Internet Explorer 9 supporta l'attributo focusable come specificato nel modulo Interactivity della specifica SVG Tiny 1.2.

Il seguente markup mostra un esempio estremamente semplice di interattività 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>

Quando questo frammento viene caricato, visualizza un piccolo cerchio rosso.

Se si fa clic sul cerchio, la sua dimensione raddoppia.

È possibile ottenere lo stesso effetto con gli eventi mouseover e mouseout che faranno aumentare o ridurre la dimensione del cerchio a seconda che il cursore venga spostato sull'immagine o lontano da essa.

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

Collegamenti e visualizzazioni

SVG supporta il collegamento del contenuto SVG ad altre pagine, così come le visualizzazioni predefinite di documenti SVG. Le visualizzazioni sono utili quando, ad esempio, si desidera eseguire un collegamento diretto a una rappresentazione ingrandita di un diagramma.

Internet Explorer 9 supporta collegamenti e visualizzazioni SVG, come specificato nel modulo Linking della specifica SVG 1.1 (Second Edition). Questo include il supporto per gli elementi a e view.

Sono supportate le interfacce DOM associate al modulo Linking, SVGAElement e SVGViewElement.

Collegamento

Proprio come nel linguaggio HTML, anche in SVG l'elemento a viene utilizzato per creare un collegamento ipertestuale. Ad esempio, il seguente markup crea un collegamento ipertestuale a un rettangolo.

<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>
Visualizzazioni

È possibile utilizzare le visualizzazioni per fornire al browser le istruzioni affinché visualizzi un'immagine SVG in un determinato modo. Ad esempio, il seguente markup definisce un collegamento a una visualizzazione.

...
<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"/>
...

In questo esempio, la visualizzazione rect-view è definita come viewBox con le coordinate specificate. Quando si fa clic sul collegamento (il testo “Go to Rectangle”), appare la visualizzazione rect-view che mostra il rettangolo rosso.

Il seguente markup definisce un altro collegamento a una visualizzazione.

...
<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"/>
...

In questo esempio, la visualizzazione circle-view ha l'attributo preserveAspectRatio impostato su none. Ciò significa che, sebbene la forma sia un cerchio, il suo ridimensionamento non sarà uniforme al momento di riempire il rettangolo viewBox quando viene richiesta la visualizzazione. Anzi, il suo allungamento non sarà uniforme e ciò permetterà al riquadro che la delimita di adattarsi perfettamente al rettangolo viewBox. La prima volta che la pagina viene caricata, questo markup crea la seguente visualizzazione in Internet Explorer 9.

Quando si fa clic su “Go to Circle”, viene richiesta la visualizzazione circle-view e il cerchio viene allungato per riempire il rettangolo viewBox. Ciò lo rende simile a un'ellisse.

Pittura e colore

Pittura e colore sono componenti fondamentali di SVG. Il concetto di "pittura" racchiude i riempimenti (tinta unita, gradienti, motivi), i tratti (linee disegnate lungo dei percorsi) e i simboli indicatore (applicati alla fine dei segmenti come, ad esempio, le punte delle frecce); può includere anche l'opacità. Riempimenti e tratti possono essere applicati a percorsi, testo e forme.

Internet Explorer 9 supporta pittura e colore SVG, come specificato nel modulo Painting: Filling, Stroking and Marker Symbols e nel modulo Color della specifica SVG 1.1 (Second Edition). È fornito il supporto di:

Sono supportate le interfacce DOM associate al modulo Painting, SVGPaint e SVGMarkerElement.

Numerosi esempi di riempimenti e tratti in SVG sono riportati nella sezione Percorsi di questo documento.

Percorsi

I percorsi SVG sono contorni di forme. Possono essere riempiti, tratteggiati (una linea viene disegnata lungo il percorso) oppure utilizzati come come tracciati di ritaglio (ritagli di altre forme).

Internet Explorer 9 supporta i percorsi SVG, come specificato nel modulo Paths della specifica SVG 1.1 (Second Edition). Ciò include il supporto dell'elemento path, così come della proprietà d, che consente di analizzare i dati del percorso.

Sono supportate le interfacce DOM associate al modulo Paths.

L'elemento path rende possibili diversi scenari di sviluppo. Di seguito è fornito solo qualche esempio. Dopo il markup è riportato il risultato corrispondente in Internet Explorer 9.

Forma chiusa con linee dritte e riempimento
<?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>

Percorso curva di Bezier (quadratica)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Linea con arco
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

Testo

I documenti SVG possono includere del testo. Il testo viene visualizzato come qualsiasi altro elemento grafico in SVG e ciò significa che è possibile applicarvi trasformazioni del sistema di coordinate, pittura, ritagli e mascheramento.

Internet Explorer 9 supporta il rendering del testo, come specificato nel modulo Text della specifica SVG 1.1 (Second Edition).

L'elemento text specifica i caratteri da disegnare. Dal momento che SVG non interrompe le righe e non dispone del ritorno a capo automatico, è necessario determinare in anticipo le interruzioni di riga. Per le modifiche alle proprietà del testo (carattere, spessore, colore, spaziatura e così via) in una riga, SVG dispone dell'elemento tspan.

Inoltre, Internet Explorer 9 supporta l'interfaccia DOM associata al modulo Text.

Nuovi strumenti per gli sviluppatori Web

Questa sezione inizia con una descrizione di Siti aggiunti, un nuovo modo per rafforzare la connessione tra sito Web e utenti. Quindi, illustra un nuovo modo per assegnare le versioni in Internet Explorer 9 così da risolvere eventuali problemi di compatibilità nel passaggio alla versione più nuova di Internet Explorer. Infine, verranno fornite alcune indicazioni sui miglioramenti apportati a Strumenti di sviluppo di Internet Explorer, incorporati nel browser per la prima volta in Internet Explorer 8.

Siti aggiunti

Quando si utilizza la funzionalità Siti aggiunti è possibile aumentare il coinvolgimento degli utenti nel sito Web. I siti aggiunti sono un nuovo set di strumenti che forniscono un'interfaccia utente ottimizzata con una grande icona dei preferiti, i pulsanti Avanti e Indietro e altri elementi dell'interfaccia personalizzati per riflettere il marchio e l'aspetto globale del sito. L'integrazione con Windows 7 consente agli utenti di interagire con i siti Web degli sviluppatori utilizzando le API Windows più nuove per creare Jump List dei siti, barre degli strumenti di anteprima e notifiche. L'aggiunta dei siti è supportata solo con la barra delle applicazioni di Windows 7.

Aggiunta dei siti alla barra delle applicazioni

Per aggiungere un sito alla barra delle applicazioni, effettuare una delle seguenti operazioni:

  • Fare clic su una scheda e trascinarla sulla barra delle applicazioni
  • Trascinare l'icona dei preferiti (favicon) dalla barra degli indirizzi alla barra delle applicazioni
  • Trascinare un'immagine personalizzata con classe "msPinSite" sulla barra delle applicazioni

Dopo che il sito è stato aggiunto, il suo aspetto viene personalizzato (ad esempio, ai pulsanti Avanti e Indietro viene applicata la combinazione di colori del sito Web). I siti possono anche essere aggiunti al menu Start.

Jump List

Le attività delle Jump List sono azioni specifiche dell'applicazione personalizzate per riflettere un sito Web aggiunto. Si basano sulla stessa funzionalità disponibile per le applicazioni in Windows 7.  Utilizzando le attività delle Jump List, un sito Web può far sì che gli utenti visualizzino i comandi utilizzati più spesso. È possibile definire le attività delle Jump List in base alle funzionalità del sito Web e alle azioni che l'utente deve eseguire. Le attività forniscono un insieme di collegamenti statici a cui gli utenti possono accedere in qualsiasi momento, anche quando Internet Explorer non è in esecuzione. Per ulteriori informazioni sulle attività delle Jump List, vedere How to Create Dynamic Jump Lists su MSDN.

Barre degli strumenti di anteprima

Fondamentalmente, una barra degli strumenti di anteprima è una sorta di "telecomando" per il sito Web. La barra degli strumenti viene visualizzata sotto l'anteprima quando si muove il cursore del mouse sul pulsante di un sito Web aggiunto sulla barra delle applicazioni. Questa funzionalità è particolarmente utile per i siti che offrono la possibilità di riprodurre file audio e video, ma ha numerosi altri potenziali utilizzi. Tra i pulsanti disponibili sulla barra degli strumenti di anteprima vi possono essere comandi per la riproduzione, l'aggiunta o la condivisione dei preferiti, la ricerca, la modifica dello stato online, gli acquisti istantanei o la classificazione delle pagine Web. Per ulteriori informazioni sulla creazione delle barre degli strumenti di anteprima, vedere How to Create Thumbnail Toolbars su MSDN.

Notifiche

Proprio come le applicazioni in Windows 7, anche i siti aggiunti possono fornire all'utente informazioni sullo stato e notifiche visualizzando un'icona sovrapposta sul pulsante del sito aggiunto sulla barra delle applicazioni. Le icone sovrapposte consentono di attirare l'attenzione dell'utente su un sito Web quando la visualizzazione della finestra del sito è bloccata perché, ad esempio, la finestra del browser è ridotta a icona o bloccata da un'altra finestra. È possibile utilizzare le icone sovrapposte per fornire all'utente informazioni sullo stato o notifiche di una certa rilevanza che hanno per oggetto, ad esempio, lo stato della rete, lo stato di connessione o l'arrivo di nuovi messaggi di posta elettronica. Per ulteriori informazioni sulle notifiche, vedere How to Provide Notifications su MSDN.

Individuazione dei siti aggiunti

Internet Explorer 9 non informa l'utente se il sito può essere aggiunto. Pubblicizzare queste funzionalità è compito dello sviluppatore. Per illustrare agli utenti i vantaggi di cui possono usufruire scegliendo di aggiungere il sito alla barra delle applicazioni è possibile scegliere tra menu a discesa, banner e diversi tipi di effetti; icone e immagini di tipo "trascina e aggiungi"; una demo che mostra le funzionalità a cui può avere accesso l'utente dopo aver aggiunto il sito per la prima volta. Per ulteriori informazioni sull'individuazione, vedere How to Improve Discoverability su MSDN.

Per informazioni pratiche ed esempi di codice sui siti aggiunti, visitare il sito MSDN Developer Center on Pinned Sites.

Per una demo sui siti aggiunti, visitare il sito Internet Explorer 9 Test Drive.

Controllo delle versioni

Internet Explorer 8 è stata introdotta la modalità di compatibilità dei documenti, uno sviluppo della modalità di compatibilità presente in Microsoft Internet Explorer 6. Le modalità documento consentono agli sviluppatori di scegliere la modalità di rendering che Internet Explorer dovrà utilizzare per visualizzare le pagine Web e sono illustrate in dettaglio in Defining Document Compatibility su MSDN.

Nuova modalità documento

Internet Explorer 9 può contare su una nuova modalità documento, la modalità degli standard di Internet Explorer 9, che garantisce la massima velocità in termini di prestazioni, si adatta alle applicazioni Web più moderne e dispone del supporto degli standard di ultima generazione.

La modalità degli standard IE9 è la modalità predefinita di Internet Explorer 9, a meno che nella pagina o nel server Web non sia stata specificata un'altra modalità.

Per accertarsi che Internet Explorer 9 visualizzi la pagina nella modalità documento più recente, utilizzare una direttiva !DOCTYPE degli standard e nessuna intestazione HTTP o nessun tag meta compatibile con X-UA. La direttiva !DOCTYPE per richiamare la modalità degli standard IE9 è la seguente:

<!DOCTYPE html>

Naturalmente, è possibile utilizzare la direttiva !DOCTYPE e l'intestazione HTTP o il tag meta compatibile con X-UA per modificare il valore predefinito secondo le proprie esigenze.

Per stabilire la modalità documento corrente, premere F12 per aprire gli strumenti di sviluppo F12 di Internet Explorer e controllare l'indicazione fornita sul lato destro della barra dei menu. Per modificare la modalità documento, fare clic su Standard di Internet Explorer 9 nel menu Modalità documento.

Stringa UA (agente utente)

La stringa UA (agente utente) identifica il browser sui server host e fornisce alcuni dettagli sul sistema. Per ulteriori informazioni sulle stringhe UA, vedere Understanding User-Agent Strings su MSDN. Internet Explorer 9 è diverso dalla versioni precedenti di Internet Explorer in quando invia una breve stringa UA per impostazione predefinita. Questa modifica migliora le prestazioni globali, l'interoperabilità e la compatibilità. Internet Explorer 9 non invia più aggiunte alla stringa UA apportate da altri programmi software installati sul computer dell'utente (ad esempio, .NET e altri).

Internet Explorer 9 invia la nuova stringa UA Internet Explorer 9. Sono state applicate quattro modifiche alla stringa UA di Internet Explorer 8 che è importante gli sviluppatori ricordino:

  1. La versione dell'applicazione è passata da "Mozilla/4.0" a "Mozilla/5.0" per uniformità con gli altri browser. Questa modifica indica che Internet Explorer 9 è un browser interoperabile.
  2. Il token della versione è passato da "MSIE 8.0" a "MSIE 9.0".
  3. Il token Trident è passato da "Trident/4.0" a "Trident/5.0".
  4. Internet Explorer 9 invierà la seguente breve stringa UA senza aggiunte apportate da altri programmi software installati sul computer:

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

La funzionalità di Visualizzazione Compatibilità in Internet Explorer 9 è associata alla modalità degli standard IE7, proprio come accede in Internet Explorer 8. Per ulteriori informazioni su Visualizzazione Compatibilità, vedere Understanding the Compatibility View List su MSDN. Quando è attivata la Visualizzazione Compatibilità, Internet Explorer 9 invia la seguente stringa UA:

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

Per ulteriori informazioni sulla nuova stringa UA per Internet Explorer 9, vedere il post Introducing IE9’s User Agent String nel blog del team di Internet Explorer.

Strumenti di sviluppo F12

Per accedere agli strumenti di sviluppo F12 in Internet Explorer 9, premere F12 oppure, nel menu Strumenti, fare clic su Strumenti di sviluppo F12. Chi ha già utilizzato gli strumenti di sviluppo in Internet Explorer 8 noterà subito i miglioramenti apportati.

Scheda Console

Gli strumenti di sviluppo F12 in Internet Explorer 9 dispongono di una scheda Console per la visualizzazione degli eventi script. Quando si esamina uno script, sono disponibili numerosi pulsanti: Errore, Avviso e Messaggio. Ciascun pulsante indica il numero di messaggi di quel tipo.

Scheda Rete

Tra gli strumenti di sviluppo, Internet Explorer 9 dispone di uno strumento per l'ispezione della rete. Per accedere a questo strumento, fare clic sulla scheda Rete. A quel punto è possibile:

  • Raccogliere i dati sul traffico di rete HTTP e HTTPS.
  • Visualizzare (e salvare) il contenuto delle richieste e delle risposte raccolte.
  • Visualizzare ulteriori dettagli sui dati raccolti, quali informazioni su cookie, dimensioni, tempistica e cache.

Strumento di modifica stringa UA

Con il nuovo strumento di modifica delle stringhe UA è possibile modificare la stringa che indica il tipo e la versione del browser al server Web. Per ulteriori informazioni sulla nuova stringa UA in Internet Explorer 9, vedere Stringa UA (agente utente) in questo documento. La stringa UA scelta verrà inviata attraverso la rete sotto forma di intestazione in ogni richiesta. Per modificare la stringa UA del browser, nel menu Strumenti degli strumenti di sviluppo, selezionare Modifica stringa agente utente e quindi scegliere il browser per il quale si desidera inviare la stringa UA.

Valutazione delle prestazioni in un ambiente reale

Con gli strumenti di sviluppo F12 disponibili in Internet Explorer 9, è possibile valutare un numero ancora maggiore di aspetti delle prestazioni dei siti Web rispetto a quanto non fosse possibile fare nelle precedenti versioni di Internet Explorer. Tuttavia, non è possibile misurare le prestazioni effettivamente rilevate dagli utenti. Per risolvere questo problema, alcuni siti sviluppano delle proprie librerie che tentano di misurare le prestazioni reali delle pagine Web, ma è possibile che in questo modo gli utenti rilevino un rallentamento delle pagine a causa delle sovraccarico di lavoro. Microsoft è convinta che la specifica W3C WebTiming (attualmente in fase Working Draft) sia un ottimo punto di partenza per risolvere questo problema. È possibile accedere alla funzionalità WebTiming in Internet Explorer 9 usando l'interfaccia window.msPerformance nel modello DOM. Inoltre, gli sviluppatori possono abilitare il debug degli script negli strumenti di sviluppo F12 e quindi accedere all'oggetto window.msPerformance.

Per visualizzare una demo dell'oggetto window.msPerformance in uso, visitare il sito Internet Explorer Test Drive.

Cronologia delle revisioni

16 marzo 2010: Creato per Internet Explorer Platform Preview.

15 aprile 2010: Aggiornato con informazioni su:

  • Supporto del modulo CSS3 Namespaces
  • Supporto di altri selettori CSS3
  • Ulteriori dettagli sul supporto del modulo DOM
  • Ulteriori dettagli sul supporto SVG, incluse le limitazioni di incorporamento
  • Supporto dei profili colore ICC

5 maggio 2010: Aggiornamento per Internet Explorer Platform Preview Build 2 con informazioni su:

  • Ulteriori dettagli sul supporto del modulo DOM
  • Nuove funzionalità del modulo DOM:
    • Nuove API DOM Core
    • DOM HTML
    • DOM Traversal
    • Nuovi eventi DOM L3:
      • Evento DOMAttrModified
      • Evento DOMContentLoaded
      • Eventi di composizione
  • Nuova stringa UA (agente utente)
  • Modifiche agli URI dati
  • Aggiunte agli strumenti di sviluppo: Scheda Console e strumento di modifica delle stringhe UA

23 giugno 2010: Aggiornamento per Internet Explorer Platform Preview Build 3 con informazioni su:

  • Nuove funzionalità CSS3:
    • Nuove funzionalità di creazione bordi e sfondi
    • Modelli di colore HSL e HSLA
    • Supporto di CSS3 Fonts
    • Supporto di CSS3 Values and Units
    • Nuovi valori per la proprietà display
  • Nuovo supporto di DOM Element Traversal
  • Nuove funzionalità HTML5:
    • Elementi video, audio e canvas
    • Interfaccia Selection
  • Nuovo supporto di Selectors API Level 2:
    • Metodo matchesSelector
  • Nuove funzionalità SVG:
    • Ritaglio, mascheramento, compositing
    • Gradienti e motivi
    • Interattività
    • Collegamenti e visualizzazioni
    • Pittura e colore
    • Testo

4 agosto 2010: Aggiornamento per Internet Explorer Platform Preview Build 4 con informazioni su:

  • "Chakra", il nuovo motore JavaScript
  • Funzionalità DOM ottimizzate
  • Nuovo supporto per la specifica WebIDL
  • L'oggetto window.msPerformance
  • Evidenziazione della sezione canvas con collegamenti agli esempi

15 settembre 2010: Aggiornamento per Internet Explorer 9 Beta con nuovi collegamenti e informazioni su:

  • DOMParser e XMLSerializer
  • Siti aggiunti

28 ottobre 2010: Aggiornamento per Internet Explorer Platform Preview Build 6 con informazioni su:

  • Modulo CSS 2D Transforms
  • Elementi semantici HTML5
  • Numero versione con supporto dei profili colore ICC corretto

10 febbraio 2011: Aggiornamento per Internet Explorer 9 Versione finale candidata con informazioni su:

  • Georilevazione HTML5
  • Siti aggiunti (aggiornamento)
  • Modalità compatibilità (aggiornamento)
  • Altre correzioni varie al documento

18 febbraio 2011: Aggiornamento con l'aggiunta di informazioni su:

  • Siti aggiunti
  • HTML5 Canvas

14 marzo 2011: Aggiornamento per Internet Explorer 9 (RTW):

  • testo versione aggiornata
  • ECMAScript 5 (collegamenti aggiunti)
Microsoft sta conducendo un sondaggio in linea per comprendere l'opinione degli utenti in merito al sito Web di. Se si sceglie di partecipare, quando si lascia il sito Web di verrà visualizzato il sondaggio in linea.

Si desidera partecipare?