Skip to main content

Guide du développeur Internet Explorer 9

14 mars 2011

Le guide du développeur Internet Explorer 9 fournit un aperçu des fonctionnalités et des améliorations apportées à Internet Explorer 9. Ce guide permet aux développeurs et concepteurs web de tirer pleinement parti de ces améliorations. Les développeurs peuvent également essayer la plate-forme en action grâce au site Internet Explorer Test Drive.

Sommaire

Introduction

Des performances complètes de navigation

Une prise charge des normes du web pour un balisage commun

De nouvelles fonctionnalités graphiques exploitant la puissance des PC Windows

Listes des nouvelles fonctionnalités

Une meilleure interopérabilité grâce à la prise en charge des normes

Feuilles de style en cascade, niveau 3 (CSS3)

Module CSS3 Transformations 2D

Module CSS3 Arrière-plans et bordures

Module CSS3 Couleurs

Module CSS3 Polices

Module CSS3 Requêtes média

Module CSS3 Espaces de noms

Module CSS3 Valeurs et unités

Sélecteurs CSS3

Autres fonctionnalités CSS

Module d'affichage CSSOM

URI de données

Améliorations DOM (Document Object Model)

Présentation du DOM optimisé

Analyser et sérialiser du langage XML à destination et à partir du DOM

DOM (Document Object Model) Niveaux 2 et 3

DOM Core (niveaux 2 et 3) et Views (niveau 2)

DOM Element Traversal

DOM de niveaux 2 et 3 Events

DOM de niveau 2 HTML

DOM de niveau 2 Style

DOM de niveau 2 Traversal et Range

Gestion des espaces blancs DOM

ECMAScript 5

HTML5

La géolocalisation HTML5

Éléments HTML5 video et audio

Élément HTML5 canvas

Améliorations de l'analyse HTML

API de sélection HTML5

Éléments sémantiques HTML5

Profils de couleurs ICC

API de sélecteurs de niveau 2

Images SVG (Scaling Vector Graphics)

Formes de base

Découpage, masquage et composition

Systèmes de coordonnées, transformations et unités

Structure de document

Dégradés et motifs

Interactivité

Liens et affichages

Peinture et couleur

Chemins

Texte

Nouveaux outils pour les développeurs web

Sites épinglés

Contrôle de la version de la plate-forme

Nouveau mode de document

Chaîne de l'agent utilisateur (UA)

Outils de développement

Onglet Console

Onglet Réseau

Outil User-agent switcher

Mesure des performances réelles

Historique des révisions

Introduction

Bienvenue dans Windows Internet Explorer 9. En tant que développeur, vous souhaitez connaître les dernières informations concernant les navigateurs utilisés par vous et vos clients. Internet Explorer 9 est la dernière version du navigateur web le plus célèbre au monde. Nous avons conçu Internet Explorer 9 de manière à aider la communauté des développeurs web à créer des applications riches, interopérables et conformes aux normes, en leur fournissant la plate-forme, les outils et les fonctionnalités du web du futur.

Ce document vous présente à vous, développeur web dont les clients font confiance à Internet Explorer, comment utiliser ces nouvelles améliorations au sein de vos sites web et de vos applications. N'oubliez pas de jeter un œil au site du Test Drive pour une démonstration des ces fonctionnalités en action. Pour fournir des commentaires et obtenir des informations supplémentaires sur les nouveautés d'Internet Explorer 9, consultez les notes de publication, ainsi que la section Nouveautés d'Internet Explorer 9 sur le site MSDN. Retrouvez toute l'actualité d'Internet Explorer 9 sur le blog de l'équipe IE. De plus, pour obtenir les toutes dernières informations à destination des développeurs à propos d'Internet Explorer, consultez le Centre de développement Internet Explorer sur le site MSDN.

Internet Explorer 9 est destiné à aider les développeurs à mieux comprendre comment Internet Explorer 9 a évolué dans les domaines suivants de la plate-forme avec notamment :

  • Des performances complètes de navigation
  • Une prise en charge des normes du web afin d'avoir un balisage qui ait le même fonctionnement au sein des différents navigateurs
  • De nouvelles fonctionnalités graphiques exploitant la puissance des PC Windows

Performances complètes de navigation

Les performances de navigation mettent en jeu différents sous-systèmes au sein du navigateur. Différents sites, et différentes activités au sein du même site, placent des charges et des exigences distinctes sur le navigateur. Par exemple, une application web telle que Windows Live Mail ou Microsoft Office Web Apps fait fonctionner les sous-systèmes du navigateur d'une manière complètement différente qu'un site de regroupement d'informations comme Bing News ou Digg.

Présentation de « Chakra », le nouveau moteur JavaScript

Les performances du moteur de script ne représentent qu'une partie de l'ensemble des performances du navigateur. Les performances de script dans Internet Explorer 8 se sont considérablement améliorées par rapport à celles d'Internet Explorer 7. « Chakra », le nouveau moteur JavaScript d'Internet Explorer 9, renouvelle cet exploit. Le moteur Chakra interprète, compile et exécute le code en parallèle et exploite les avantages des multiples cœurs des processeurs, le cas échéant. Pour de plus amples informations, consultez l'article « Le nouveau moteur JavaScript d'Internet Explorer 9 » sur le blog de l'équipe IE.

Bien sûr, l'équipe Internet Explorer examine les caractéristiques des performances de tous les sous-systèmes du navigateur par rapport à la façon dont ils sont utilisés par les véritables sites. L'objectif est de proposer de meilleures performances générales pour les sites réels et non seulement lors des tests d'évaluation.

Prise en charge des normes Web pour un balisage commun

Internet Explorer propose une vaste palette de fonctionnalités interopérables aux développeurs web. L'équipe Internet Explorer sait que vous voulez éviter à tout prix d'avoir à réécrire et retester indéfiniment vos sites web. L'adoption de normes par les fournisseurs de navigateurs est une excellente façon d'atteindre cet objectif.

Avec Internet Explorer 8, l'équipe Internet Explorer a fourni une version hautement interopérable de la norme CSS 2.1 et apporté dans le même temps une série de plus de 7 200 tests au W3C (World Wide Web Consortium). Cela est très important, car sans tests de validation, les normes sont plus difficiles à implémenter de manière cohérente, les rendant ainsi moins fiables pour les développeurs de sites.

Internet Explorer 9 réalise des investissements significatifs en termes de prise en charge des normes et d'interopérabilité. Par exemple, Internet Explorer 9 inclut une nouvelle prise en charge du langage HTML 5, une prise en charge améliorée de nombreuses fonctionnalités CSS3, et, grande première pour Internet Explorer, une prise en charge intégrée du format SVG.

Nouvelles fonctionnalités graphiques exploitant la puissance des PC Windows

L'écosystème Windows fournit une innovation matérielle incroyable. Grâce à Internet Explorer 9, les développeurs web peuvent désormais tirer parti de cette innovation avec un rendu des graphiques et du texte géré par matériel.

Internet Explorer 9 utilise la famille d'interfaces de programmation d'applications (API) Windows DirectX pour offrir toute une série d'améliorations aux développeurs web. Nous avons déplacé l'ensemble du rendu des images et du texte du processeur vers la carte graphique grâce à Direct2D et DirectWrite. L'accélération matérielle graphique se traduit par un rendu plus rapide des sites riches en graphiques sous Windows tout en consommant moins de ressources CPU. De plus, vous pouvez exploiter tous ces changements automatiquement tout en continuant de concevoir des sites avec les mêmes normes auxquelles vous êtes habitué.

Listes des nouvelles fonctionnalités

Pour information, cette liste contient toutes les nouvelles fonctionnalités de développement présentes dans Internet Explorer 9. Pour plus de détails concernant les changements opérés sur les pré-versions d'Internet Explorer 9, voir l'historique des révisions.

  • Prise en charge CSS3 améliorée
    • Coins arrondis grâce à la propriété border-radius
    • Fonctionnalités CSS3 d'arrière-plan et de bordure
    • Propriété opacity
    • Modèles de couleurs RVBA, TSL et TSLA
    • Propriétés de polices CSS3 et nouveaux formats de polices web
    • Requêtes média CSS3
    • Espaces de noms CSS3
    • Valeurs et unités CSS3
    • Sélecteurs CSS3
  • Prise en charge améliorée de l'URI de données
  • Améliorations DOM (Document Object Model)
    • Fonctionnalités de DOM améliorées
    • Analyser et sérialiser à destination et à partir du DOM
    • Nouvelle prise en charge du DOM de niveaux 2 et 3 et comportements mis à jour
      • DOM Core (niveaux 2 et 3) et Views (niveau 2)
      • DOM Element Traversal
      • DOM Events (niveaux 2 et 3)
      • DOM de niveau 2 HTML
      • DOM de niveau 2 Style
      • DOM de niveau 2 Traversal et Range
    • Nouveau comportement de gestion des espaces blancs
  • Améliorations de la fonctionnalité ECMAScript
  • Prise en charge HTML5 supplémentaire
    • Géolocalisation
    • Nouveaux éléments HTML video et audio
    • Élément canvas
    • Interface Selection
    • Analyse améliorée des éléments HTML
    • API de sélection de texte
  • Prise en charge des profils de couleurs ICC v2 et v4 sur les images
  • Nouvelle prise en charge des API de sélecteurs de niveau 2 pour la méthode msMatchesSelector
  • Fonctionnalités SVG
    • Formes de base : rectangles, cercles, ellipses, lignes, polylignes et polygones
    • Découpage, masquage et composition
    • Systèmes de coordonnées, transformations et unités
    • Structure de document, métadonnées et fonctionnalité d'extensibilité
    • Dégradés et motifs
    • Interactivité
    • Liens et affichages
    • Peinture et couleur
    • Chemins, y compris les fonctionnalités complètes de l'élément path et de l'attribut d
    • Texte
  • Fonctionnalités supplémentaires de contrôle de version
    • Sites épinglés
    • Nouveau mode de document
    • Nouvelle chaîne d'agent utilisateur (UA)
  • Ajouts aux outils de développement
    • Améliorations des performances
    • Onglet Console
    • Onglet Réseau
    • Outil User Agent switcher
    • Mesure des performances réelles

Meilleure interopérabilité grâce à la prise en charge des normes

Important   Les nouvelles normes prises en charge dans Internet Explorer 9 exigent que le navigateur soit défini en mode Normes Internet Explorer 9 (« Mode IE9 »). La meilleure façon de procéder consiste à utiliser une directive !DOCTYPE standard et aucune balise meta ou aucun en-tête HTTP compatible X-UA. La directive !DOCTYPE permettant d'appeler le mode IE9 se présente comme suit :

<!DOCTYPE html>

Bien entendu, vous pouvez utiliser la directive !DOCTYPE et la balise meta ou l'en-tête HTTP compatible X-UA pour modifier le paramètre par défaut, si nécessaire.

Pour déterminer le mode de document actif, appuyez sur F12 pour ouvrir les outils de développement Internet Explorer, puis regardez à droite de la barre de menus. Pour remplacer le mode de document, cliquez sur Normes Internet Explorer 9 dans le menu Mode de document.

Pour des informations actualisées sur les comportements des modes de document dans Internet Explorer 9, reportez-vous à la section Contrôle de version de la plate-forme de ce guide.

Feuilles de style en cascade, niveau 3 (CSS3)

Internet Explorer 9 offre une prise en charge des feuilles de style en cascade (CSS) plus complète que tous les navigateurs Microsoft précédents. Poursuivant dans la lignée des travaux réalisés dans Internet Explorer 8, désormais entièrement conforme à la spécification CSS2.1, Internet Explorer 9 ajoute la prise en charge de nombreux composants CSS3.

Remarque  Il convient de rappeler que de nombreux modules CSS3 ont toujours le statut de « Document non définitif » ou de « Dernier appel ». Tant qu'ils n'ont pas atteint le statut de « Recommandation candidate », ils peuvent être modifiés de manière considérable. Pour de plus amples informations, consultez les derniers modules préliminaires CSS3.

Module CSS3 Transformations 2D

Internet Explorer 9 ajoute la prise en charge du module CSS3 Transformations 2D. Les transformations 2D CSS permettent de transformer des éléments rendus par CSS en espace à deux dimensions.

Internet Explorer 9 prend en charge les propriétés Transformations 2D suivantes :

  • La propriété -ms-transform permet d'appliquer une ou plusieurs fonctions de transformation en deux dimensions à un élément.
  • La propriété -ms-transform-origin établit l'origine de la transformation d'un élément. Cette propriété est utile si vous souhaitez modifier l'origine définie par défaut (le centre).

Remarque   Le module CSS Transformations 2D n'ayant pas encore reçu le statut de « Recommandation candidate » par le W3C, les deux propriétés transform et transform-origin doivent être utilisées avec le préfixe -ms- afin d'être reconnues par Internet Explorer 9. Pour de plus amples informations sur les préfixes spécifiques aux fournisseurs, reportez-vous à l'article « IE9, préfixes de fournisseurs et développeurs » sur le blog de l'équipe IE.

Internet Explorer 9 prend en charge les fonctions de transformation suivantes avec la propriété -ms-transform :

  • La fonction matrix(a,b,c,d,e,f) permet de spécifier une transformation 2D sous la forme d'une matrice de transformation de six valeurs (de a à f). 
  • La fonction translate(tx,ty) permet de spécifier une translation 2D selon le vecteur [tx,ty], tx correspondant au premier paramètre de valeur de translation et ty au second paramètre optionnel. Si le paramètre ty n'est pas spécifié, sa valeur est égale à zéro. (Les paramètres de valeur de la translation peuvent être exprimés en pourcentages ou en unités de longueur.)
  • La fonction translateX(tx) permet de spécifier une translation par le nombre donné dans la direction x.
  • La fonction translateY(ty) permet de spécifier une translation par le nombre donné dans la direction y.
  • La fonction scale(sx,sy) permet de spécifier une transformation d'échelle 2D selon le vecteur d'échelle [sx,sy] qui est décrit par les deux paramètres. Si le second paramètre n'est pas spécifié, il est égal à la valeur du premier paramètre.
  • La fonction scaleX(sx) permet de spécifier une transformation d'échelle en utilisant le vecteur d'échelle [sx,1] pour lequel sx représente le paramètre donné.
  • La fonction scaleY(sy) permet de spécifier une transformation d'échelle en utilisant le vecteur d'échelle [1,sy] pour lequel sy représente le paramètre donné.
  • La fonction rotate(angle) permet de spécifier une rotation 2D selon l'angle défini dans le paramètre relatif à l'origine de l'élément précisé par la propriété transform-origin.
  • La fonction skewX(ax) permet de spécifier une transformation par inclinaison le long de l'axe x selon l'angle donné.
  • La fonction skewY(ay) permet de spécifier une transformation par inclinaison le long de l'axe y selon l'angle donné.
  • La fonction skew(ax,ay) permet de spécifier une transformation par inclinaison le long des axes x et y. Le premier paramètre d'angle permet de définir l'inclinaison sur l'axe x. Le second paramètre d'angle permet de définir l'inclinaison sur l'axe y. Si le second paramètre n'est pas spécifié, une valeur égale à zéro est utilisée pour l'angle y (c'est-à-dire, aucune inclinaison sur l'axe y).

La propriété -ms-transform-origin accepte une ou deux valeurs. Chaque valeur peut être un mot clé, une longueur ou un pourcentage. Si la propriété -ms-transform-origin n'est pas définie, la transformation débute au centre (égale à une valeur -ms-transform-origin de 50 % 50 %).

  • La première valeur indique la position horizontale (position le long de l'axe x) et peut être négative. Cette valeur peut être une valeur de longueur (exprimée dans l'une des unités de longueurs prises en charge), un pourcentage (de la longueur totale de la boîte), ou l'un des trois mots clés suivants : left (valeur égale à 0 % ou à une longueur nulle), center (valeur égale à 50 % ou à la moitié de la longueur de la boîte), ou right (valeur égale à 100 % ou à la longueur totale de la boîte).
  • La seconde valeur indique la position verticale (position le long de l'axe y) et peut être négative. Cette valeur peut être une valeur de longueur (exprimée dans l'une des unités de longueurs prises en charge), un pourcentage (de la hauteur totale de la boîte), ou l'un des trois mots clés suivants : left (valeur égale à 0 % ou à une hauteur nulle), center (valeur égale à 50 % ou à la moitié de la hauteur de la boîte), ou right (valeur égale à 100 % ou à la hauteur totale de la boîte).

Si une seule valeur est spécifiée, la seconde est supposée représenter le centre.

Prenons le balisage suivant :

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

Dans Internet Explorer 9, le paramétrage de la propriété -ms-transform-origin sur 60 % 100 % permet de définir le point d'origine de la transformation à 60 % de la longueur et à 100 % de la hauteur de l'élément à transformer. La propriété -ms-transform déplace d'abord l'élément de 200 pixels dans la direction x et de 100 pixels dans la direction y. Elle redimensionne ensuite l'élément selon un facteur de 75 %. Enfin, elle effectue une rotation de l'élément de 40 degrés dans le sens des aiguilles d'une montre autour du point d'origine défini par la propriété -ms-transform-origin.

Pour plus d'informations sur le module CSS3 Transformations 2D, voir la rubrique correspondante sur MSDN.

Module CSS3 Arrière-plans et bordures

Internet Explorer 9 ajoute la prise en charge de plusieurs fonctionnalités du module CSS3 Arrière-plans et bordures. La nouveauté la plus marquante, la propriété border-radius, est également la fonctionnalité de bordure CSS la plus demandée. Internet Explorer 9 introduit également la prise en charge des nouvelles propriétés CSS3 suivantes :

De plus, Internet Explorer 9 ajoute des fonctionnalités aux propriétés CSS d'arrière-plan et de bordure existantes indiquées ci-après :

Propriétés border-radius

Les propriétés border-radius vous permettent d'arrondir les coins des bordures, tout simplement en « remplaçant » les coins par des quarts d'ellipse dont vous précisez l'angle. Il existe différentes propriétés :

Par exemple, prenons le balisage suivant :

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

Lorsqu'il est appliqué à un bloc de texte, le résultat suivant est obtenu :

Module CSS3 Couleurs

Internet Explorer 9 ajoute la prise en charge du module CSS3 Couleurs. Ce module inclut la prise en charge des modèles de couleurs RVBA, TSL et TSLA, de la propriété opacity et du mot-clé currentColor . Internet Explorer 9 accroît également la prise en charge du mot-clé transparent .

Modèle de couleurs RVBA

Le modèle de couleurs RVB a été étendu pour intégrer un canal alpha, également appelé transparence. Le format d'une valeur RVBA est rgba(red, green, blue, alpha). Les composants red, green et blue sont identiques au modèle de couleurs RVB, et sont exprimés sous la forme de nombres entiers ou de pourcentages. Le composant alpha est exprimé par une valeur comprise entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

Par exemple, pour définir la couleur rouge pour l'arrière-plan avec 50 % de transparence, vous pouvez intégrer les deux déclarations CSS suivantes à votre feuille de style :

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

Attention, les valeurs RVBA ne prennent pas en charge les notations hexadécimales, contrairement aux valeurs RVB.

Modèle de couleurs TSL

Internet Explorer 9 prend en charge les valeurs de couleur TSL (teinte, saturation, luminosité) du module CSS3 Couleurs. Dans le modèle de couleurs TSL, la « teinte » est mesurée par un angle de couleur autour de la roue chromatique (par exemple, le rouge est égal à 0 ou 360, le vert à 120 et le bleu à 240). La « saturation » et la « luminosité » sont exprimées par des pourcentages. Par exemple, la déclaration CSS suivante permet de définir un arrière-plan de couleur rouge.

background-color: hsl(0,100%,50%);
Modèle de couleurs TSLA

Internet Explorer 9 intègre également un canal alpha au modèle de couleurs TSL. Comme pour le modèle RVBA, la canal alpha est exprimé par une valeur comprise entre 0.0 et 1.0. Par exemple, la déclaration CSS suivante permet de définir un arrière-plan de couleur rouge, avec 50 % de transparence :

background-color: hsla(0,100%,50%,0.5);
La propriété opacity

Internet Explorer 9 ajoute la prise en charge de la propriété opacity du module CSS3 Couleurs, qui vous permet de contrôler la transparence au niveau d'un élément. Tout comme le composant alpha des valeurs RVBA, la valeur opacity est un nombre compris entre 0.0 (entièrement transparent) et 1.0 (entièrement opaque). La propriété opacity est disponible sur tous les éléments.

L'exemple suivant présente la propriété opacity sur la couleur bleu foncé, avec des valeurs d'opacité réglées par incréments de 0.2 sur une échelle de 0 à 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>

Cet exemple produit le résultat suivant sur une boîte div de 25 pixels sur 125 :

Mots clés couleurs

Le module CSS3 Couleurs établit la liste des mots clés couleurs pour CSS comme pour SVG 1.0. Même si la prise en charge du format SVG est nouvelle dans Internet Explorer 9, ce changement a déjà été mis en œuvre dans Internet Explorer 8.

Internet Explorer 9 introduit le mot-clé currentColor du module CSS3 Couleurs, qui indique la valeur actuelle de la propriété color sur toutes les propriétés acceptant la propriété color. Lorsqu'il est appliqué à la propriété color, currentColor équivaut à color:inherit.

Par ailleurs, Internet Explorer 9 étend l'utilisation du mot-clé transparent au-delà des propriétés border-color et background-color. Il peut désormais être utilisé avec n'importe quelle propriété acceptant la propriété color.

Module CSS3 Polices

Un meilleur contrôle typographique a toujours été une caractéristique constante sur chaque nouvelle version de CSS. En même temps, le manque de formats de police web interopérables peut être frustrant. Internet Explorer 9 améliore la prise en charge existante des polices CSS pour assurer la conformité avec le module CSS3 Polices. Il ajoute également la prise en charge des polices WOFF (Web Open Font Format) et des polices TrueType brutes.

Propriétés font

La propriété font-weight a été mise à jour afin qu'Internet Explorer 9 puisse calculer les épaisseurs de police selon les spécifications du module CSS3 Polices.

La propriété font-size a été mise à jour afin que chaque facteur d'échelle d'un mot-clé corresponde aux définitions du module CSS3 Polices. De plus, les mots clés et les tailles des titres HTML sont désormais mappés selon les spécifications du module CSS Polices.

La propriété font-stretch est une nouveauté d'Internet Explorer 9. Elle permet de sélectionner, à partir d'une famille de polices, une police normale, condensée ou étendue. Cette propriété est également disponible en tant que descripteur de règle @font-face.

La règle @font-face

La règle @font-face permet d'établir un lien vers des polices. Une feuille de style peut ainsi faire référence à un fichier de polices spécifique que le navigateur peut télécharger et utiliser. Par exemple, prenons le balisage suivant :

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

Dans cette exemple, la règle @font-face indique au navigateur de se rendre à l'URL spécifiée par le descripteur src pour télécharger le fichier des polices contenant la police en question. Dans Internet Explorer 8 et les versions précédentes, le descripteur src était ignoré s'il contenait une chaîne format facultative, comme celle présente dans l'exemple précédent. Dans Internet Explorer 9, le descripteur src est correctement analysé.

Par ailleurs, Internet Explorer 9 ajoute la prise en charge du descripteur unicode-range, qui vous permet de spécifier l'étendue des caractères Unicode pris en charge par une police donnée. Par exemple, le code suivant spécifie l'étendue des caractères ASCII de base :

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Formats de polices web

Microsoft a créé Internet Explorer 9 dans le but d'optimiser le choix des polices web. Pour ce faire, nous avons effectué les opérations suivantes :

  • Nous avons assuré la compatibilité avec les versions précédentes et la prise en charge continue du format EOT (Embedded OpenType).
  • Nous avons ajouté une prise en charge du format WOFF (Web Open Font Format) qui reconditionne les fichiers de polices sfnt (polices TrueType, OpenType, et Open Font Format) en compressant chaque tableau individuellement via un format de compression ZIP.
  • Nous avons ajouté une prise en charge pour les polices TrueType brutes installables (aucune permission intégrée).

Pour obtenir un exemple de polices web dans Internet Explorer 9, visionnez les démonstrations « Polices web » ou « Polices web supplémentaires » sur le site Internet Explorer Test Drive

Pour de plus amples informations sur les polices CSS3 disponibles dans Internet Explorer 9, consultez le site MSDN.

Module CSS3 Requêtes média

Le module CSS3 Requêtes média permet de spécifier les méthodes permettant aux développeurs web de faire correspondre une feuille de style à une série de fonctionnalités de périphériques précises. Par exemple, vous souhaitez concevoir des pages différemment pour des utilisateurs naviguant sur un appareil mobile (très petit écran, palette de couleurs limitée, résolution basse) par rapport à des utilisateurs sur netbooks (petit écran, palette de couleurs complète, haute résolution) ou à des utilisateurs sur ordinateur (écran large, palette de couleurs complète, haute résolution). La liste complète des propriétés média prises en charge par les requêtes média CSS3 est la suivante : width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, et resolution.

La déclaration suivante représente une requête média classique utilisant la règle @media :

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

Dans ce cas précis, screen indique le type de média cible, et max-width la propriété de média cible. La déclaration indique que les règles spécifiées (pas de bordure sur les éléments div) sont à appliquer uniquement lorsque la page est affichée sur un écran dont la largeur est d'au moins 400 pixels. Vous pouvez utiliser plusieurs propriétés de média pour créer des requêtes encore plus spécifiques, telles que les suivantes :

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

Cette déclaration applique les règles spécifiées lorsque le média est un écran d'une largeur inférieure ou égale à 400 pixels et d'une hauteur inférieure ou égale à 600 pixels.

Vous pouvez examiner les requêtes média en action sur le site Internet Explorer Test Drive.

Internet Explorer 9 intègre la prise en charge des requêtes média dans les langages CSS, HTML, XML et XHTML. Pour de plus amples informations sur les requêtes média dans Internet Explorer 9, consultez le site MSDN.

Module CSS3 Espaces de noms

Internet Explorer 9 prend en charge la quasi-totalité du module CSS3 Espaces de noms. Les espaces de noms CSS permettent au développeur de déclarer un espace de noms par défaut pour un fichier CSS. Ce qui signifie que par défaut, chaque sélecteur d'élément ou d'attribut utilise également cet espace de noms.

Les espaces de noms CSS permettent au développeur de créer des préfixes d'espaces de noms qui peuvent être utilisés ultérieurement au sein du fichier CSS. En outre, Internet Explorer 9 vous permet de déclarer un espace de noms ciblant des éléments SVG.

La règle-at @namespace

La règle-at @namespace déclare un espace de noms XML (et éventuellement son préfixe) et l'associe à une chaîne qui représente un nom d'espace de noms. Par exemple, la règle suivante déclare un espace de noms par défaut :

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

L'espace de noms par défaut est appliqué aux noms qui ne disposent pas d'un composant d'espace de noms explicite.

Si une règle @namespace est déclarée avec un préfixe, celui-ci peut être utilisé dans les noms d'espace de noms qualifiés. Par exemple, prenons la déclaration d'espace de noms suivante : prfx...

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

…le sélecteur suivant correspond aux éléments E dans l'espace de noms indiqué par le préfixe prfx :

prfx|E

L'exemple suivant est légèrement plus compliqué.

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

Dans cet exemple, deux préfixes d'espaces de noms sont créés. D'abord, les éléments p dans tous les espaces de noms sont de couleur rouge. Tous les éléments p dans l'espace de noms prfx sont ensuite recolorés en bleu, et les éléments p dans l'espace de noms msft sont recolorés en vert.

L'exemple suivant concerne le style d'un élément SVG.

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

En utilisant l'espace de noms et la déclaration de cet exemple, on obtient un remplissage rouge dans tous les cercles créés avec SVG.

Pour de plus amples informations, consultez la page de référence consacrée à la règle @namespace sur le site MSDN.

Module CSS3 Valeurs et unités

Internet Explorer 9 ajoute la prise en charge de nombreuses valeurs et unités nouvelles décrites dans le module CSS3 Valeurs et unités. La plupart de ces valeurs et unités sont requises pour prendre en charge les autres fonctionnalités CSS3 décrites dans ce document.

Internet Explorer 9 ajoute la prise en charge des nouvelles valeurs et unités suivantes :

  • deg : degrés (unité d'angle)
  • grad : grads (unité d'angle)
  • rad : radians (unité d'angle)
  • turn : tours (unité d'angle)
  • ms : millisecondes (unité de temps)
  • s : secondes (unité de temps)
  • rem : taille de police de l'élément racine (unité de longueur relative)
  • vw : largeur de la fenêtre d'affichage (unité de longueur relative)
  • vh : hauteur de la fenêtre d'affichage (unité de longueur relative)
  • vm : la plus petite largeur ou hauteur de la fenêtre d'affichage (unité de longueur relative)
  • ch : largeur du zéro (largeur du glyphe zéro dans la police rendue, unité de longueur relative)

De plus, Internet Explorer 9 met à jour la fonction attr() qui est utilisée pour le contenu généré. Elle peut désormais être attribuée à n'importe quelle propriété et accepte plusieurs arguments.

La fonction CSS3 suivante est nouvelle dans Internet Explorer 9 :

  • calc() : calcule les valeurs à l'aide d'opérateurs arithmétiques et est utilisable partout où les valeurs de longueur sont permises

Pour de plus amples informations sur les fonctions CSS, reportez-vous à l'article Référence des valeurs et unités CSS sur le site MSDN.

Sélecteurs CSS3

Internet Explorer 9 prend en charge les ajouts à la syntaxe des sélecteurs CSS spécifiés dans la recommandation proposée de sélecteurs CSS3. Vous trouverez ci-dessous une liste des nouveaux sélecteurs intégrés à Internet Explorer 9 (pour des informations détaillées sur la prise en charge des sélecteurs dans Internet Explorer, reportez-vous à l'article Compatibilité CSS et Internet Explorer sur le site MSDN).

Pour plus d'informations, voir la section de référence sur les sélecteurs CSS sur MSDN.

Pour voir un exemple de sélecteurs CSS3 en action, consultez le site Internet Explorer Test Drive.

Pseudo-classes structurelles

Les pseudo-classes structurelles permettent d'effectuer des sélections selon les informations supplémentaires présentes dans l'arborescence des documents qui ne peuvent être sélectionnées à l'aide de simples sélecteurs ou combinateurs.

La ligne suivante permet de sélectionner un élément E qui est la racine du document :

E:root 

La ligne suivante permet de sélectionner un élément E qui est l'enfant numéro n de son parent :

E:nth-child(n)

La ligne suivante permet de sélectionner un élément E qui est l'enfant numéro n de son parent, en partant du dernier :

E:nth-last-child(n) 

La ligne suivante permet de sélectionner un élément E qui est le frère numéro n de son type :

E:nth-of-type(n) 

La ligne suivante permet de sélectionner un élément E qui est le frère numéro n de son type, en partant du dernier :

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

La ligne suivante permet de sélectionner un élément E qui est le dernier enfant de son parent :

E:last-child 

La ligne suivante permet de sélectionner un élément E qui est le premier frère de son type :

E:first-of-type 

La ligne suivante permet de sélectionner un élément E qui est le dernier frère de son type :

E:last-of-type 

La ligne suivante permet de sélectionner un élément E qui est le seul enfant de son parent :

E:only-child

La ligne suivante permet de sélectionner un élément E qui est le seul frère de son type :

E:only-of-type

La ligne suivante permet de sélectionner un élément E qui n'a pas d'enfant (ni de nœuds de texte) :

E:empty
Pseudo-classes de cibles

La pseudo-classe de cible permet de sélectionner l'élément cible de l'URI de référence. Un identificateur de fragment est utilisé pour identifier un emplacement au sein d'une page et se forme à l'aide d'un chiffre suivi d'un identificateur d'ancre, par exemple : http://www.example.com/mypage.html#section_3.

Voici comment sélectionner l'élément div de la classe important qui est l'élément cible de l'URI de référence. Si l'URI du document ne dispose d'aucun identificateur de fragment, il n'existe pas d'élément cible.

div.important:target
Pseudo-classes d'état des éléments UI

Les pseudo-classes d'état des éléments UI permettent de sélectionner des éléments UI (contrôles de formulaire, tels que des cases d'option ou des cases à cocher) qui se trouvent dans un certain état (activé, désactivé ou sélectionné/coché).

La ligne suivante permet de sélectionner un élément de contrôle de formulaire E qui est activé :

E:enabled

La ligne suivante permet de sélectionner un élément de contrôle de formulaire E qui est désactivé :

E:disabled 

La ligne suivante permet de sélectionner un élément de contrôle de formulaire E qui est sélectionné :

E:checked 

La pseudo-classe : indeterminate sélectionne les cases d'option et les cases à cocher dont l'état ne peut être déterminé : elles ne sont ni cochées (sélectionnées), ni décochées (désactivées). La ligne suivante permet de sélectionner un élément de contrôle de formulaire E dont l'état ne peut être déterminé :

E:indeterminate

Remarque   La pseudo-classe :indeterminate n'est plus définie dans la spécification CSS3 actuelle, mais est prise en charge par de nombreux navigateurs.

Pseudo-classes de négation

La pseudo-classe de négation prend un simple sélecteur comme argument pour sélectionner des éléments qui ne sont pas sélectionnés par ce dernier. Voici comment sélectionner un élément E qui ne correspond pas au sélecteur simple s :

E:not(s)
Le pseudo-élément de fragments d'élément d'interface utilisateur

Le pseudo-élément de fragments d'élément UI, ::selection, est utilisé pour sélectionner n'importe quelle partie de la page mise en surbrillance par l'utilisateur, y compris le texte se trouvant dans un champ de texte modifiable. Ce pseudo-élément peut être appliqué aux propriétés color et background-color. Voici comment sélectionner un texte sélectionné par l'utilisateur au sein d'un élément E :

E::selection 

Remarque   La pseudo-classe ::selection n'est plus définie dans la spécification CSS3 actuelle, mais est prise en charge par de nombreux navigateurs.

Autres fonctionnalités CSS

Une prise en charge de la version préliminaire du module CSS Affichage du modèle d'objet a été implémentée dans Internet Explorer 9.

Module d'affichage CSSOM

Le module d'affichage CSSOM sert à définir les API qui permettent aux développeurs web d'inspecter et de modifier par programmation les propriétés visuelles d'un document et de son contenu, y compris la disposition du positionnement des boîtes, la largeur de la fenêtre d'affichage et le défilement des éléments. Internet Explorer 8 avait entamé la prise en charge d'une partie de ce module. Internet Explorer 9 étend la prise en charge à un nombre accru d'API d'affichage CCSOM :

URI de données

Une URI de données est un moyen d'intégrer des données directement dans le contexte d'une page web. L'exemple le plus fréquent est celui d'une petite image intégrée dans une page web telle que la suivante :

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Lorsque ce texte est placé dans l'attribut src d'un élément img, il intègre efficacement l'image dans le balisage de la page. Les URI de données ont été introduites pour la première fois dans Internet Explorer 8.

Grâce à Internet Explorer 9, les développeurs peuvent désormais utiliser une URI de données dans l'attribut src d'un élément script. De plus, la taille limite pour les URI de données est passée de 32 Ko dans Internet Explorer 8 à 4 Go dans Internet Explorer 9.

Améliorations DOM (Document Object Model)

Internet Explorer 9 inclut un modèle DOM (Document Object Model) considérablement amélioré. Outre la prise en charge étendue des niveaux 2 et 3 du DOM du W3C (World Wide Web Consortium), Internet Explorer 9 propose un DOM optimisé ainsi qu'une gestion améliorée des espaces blancs.

Présentation du DOM optimisé

Le DOM optimisé d'Internet Explorer 9 améliore les performances globales du mode Normes Internet Explorer 9 (mode IE9), en accélérant notamment la couche d'exécution des scripts entre « Chakra », le nouveau moteur JavaScript, et le moteur de disposition Trident, et en déplaçant les points d'entrée du DOM vers le moteur Chakra. Pour plus d'informations à propos du mode IE9, voir la rubrique intitulée Une meilleure interopérabilité grâce à la prise en charge des normes dans ce même document. Le DOM amélioré fournit également de manière simultanée la hiérarchie DOM correcte d'héritage des objets, comme préconisé par les spécifications de niveaux 2 et 3 du DOM du W3C.

Les types d'objet DOM améliorés sont désormais reflétés dans les outils de développement F12 lors de l'exécution des pages en mode Normes Internet Explorer 9 (pour plus d'informations sur les nouveaux outils de développement F12 d'Internet Explorer 9, reportez-vous à la section Outils de développement F12 de ce document). Plutôt que de montrer les types hérités basés COM (qui consistent en un assortiment d'interfaces et d'objets d'affichage), les pages en mode IE9 rapportent les noms de types d'objet DOM améliorés en cours d'utilisation par le moteur Chakra, en conformité avec les normes de niveaux 2 et 3 du DOM du W3C (par exemple, NodeList, DocumentType, HTMLBodyElement, et ainsi de suite).

Le DOM optimisé d'Internet Explorer 9 améliore de manière considérable l'interopérabilité entre Internet Explorer 9 et les autres navigateurs. De plus, il fournit simultanément de meilleures performances dans une multitude de cas, principalement grâce aux objets DOM qui sont représentés en tant qu'objets JavaScript natifs.

Le DOM amélioré étend la large gamme des nouvelles fonctionnalités proposées par « Chakra », le nouveau moteur JavaScript, aux objets et API fournis par le DOM, dont les suivantes :

  • L'extensibilité sélective des objets DOM (via Object.preventExtensions)
  • La mutabilité de l'API DOM (en mutant les descripteurs de propriété de l'API DOM ou en supprimant complètement les propriétés)
  • La prise en charge JSON des objets DOM
  • Les fonctionnalités natives d'objets JavaScript via l'héritage (hasOwnProperty, toString, etc.)
  • Les fonctionnalités natives des fonctions JavaScript via l'héritage (call, apply, bind)

Ces fonctionnalités unifient l'expérience de programmation entre les objets natifs du moteur JavaScript et le DOM. De plus, les nouvelles fonctionnalités DOM suivantes ont été ajoutées :

  • Exceptions DOM du W3C : les exceptions DOM sont des nouveaux types d'objets d'erreurs rejetés à cause des défaillances de l'API DOM. Les codes d'erreur pour ces exceptions correspondent aux constantes définies sur l'exception elle-même.
  • Les propriétés constantes DOM du W3C (par exemple Node.ELEMENT_NODE) : les propriétés constantes sont des champs simples qui fournissent des noms à de nombreuses valeurs numériques renvoyées les autres API DOM. Par exemple, le nombre renvoyé par l'API DOM nodeType peut être comparé à la constante afin de créer un code plus lisible : if (myElement.nodeType == Node.ELEMENT_NODE)

Analyser et sérialiser du langage XML à destination et à partir du DOM

Même si Internet Explorer prenait déjà en charge l'analyse et la sérialisation du langage XML à destination et à partir du DOM natif, il n'existait pas de manière simple pour le script d'accéder à cette fonctionnalité au sein des documents HTML. Pour cette raison, Internet Explorer 9 ajoute la prise en charge des interfaces DOMParser et XMLSerializer. Ces interfaces sont largement prises en charge par les autres navigateurs.

L'exemple suivant de script montre comment analyser une chaîne dans un document XML en utilisant l'interface DOMParser :

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

L'exemple suivant de script montre comment sérialiser un nœud DOM (y compris les nœuds de documents HTML) vers une chaîne XML en utilisant l'interface XMLSerializer :

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

DOM (Document Object Model) Niveaux 2 et 3

Internet Explorer 9 étend la prise en charge des niveaux 2 et 3 du DOM et améliore la prise en charge du niveau 2 du DOM sur les implémentations existantes dans Internet Explorer.  Il ajoute également la prise en charge de la spécification non définitive WebIDL.

Internet Explorer 9 prend dorénavant en charge les fonctionnalités DOM suivantes :

DOM Core (niveaux 2 et 3) et Views (niveau 2)

Internet Explorer 9 accroît la prise en charge de plusieurs nouvelles API DOM Core de niveau 2, y compris les suivantes :

Il ajoute également la prise en charge interopérable des espaces de noms DOM, telle que la prise en charge de méthodes *NS et des propriétés relatives aux espaces de noms (createElementNS, namespaceURI, localName, prefix et autres). Internet Explorer 9 prend également en charge la plupart des méthodes et propriétés DOM Core de niveau 3 les plus couramment utilisées :

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

Internet Explorer 9 assure la prise en charge complète des propriétés DOM Views de niveau 2.

Pour plus d'informations, voir la section de référence sur les fonctionnalités DOM Core et Views sur MSDN.

DOM Element Traversal

La spécification Element Traversal définit l'interface ElementTraversal. Cette interface permet la navigation au sein des éléments d'une arborescence DOM à l'aide de scripts, tels que les nœuds d'éléments dans les documents HTML, XML ou SVG. Internet Explorer 9 introduit la prise en charge de l'interface ElementTraversal et de ses cinq propriétés.

DOM de niveaux 2 et 3 Events

La spécification DOM Events décrit le système d'événements DOM, qui permet l'enregistrement des gestionnaires d'événements, décrit le flux des événements à l'aide d'une arborescence des documents et définit l'information contextuelle des événements. Pour plus d'informations sur le modèle d'événement, voir Comprendre le modèle d'événement sur MSDN.

L'un des principaux objectifs du système d'événements d'Internet Explorer 9 est de s'aligner avec le système interopérable spécifié par le W3C. Cela vous permet de vous détacher du modèle propriétaire attachEvent d'Internet Explorer, éliminant tout besoin de concevoir votre code pour différents navigateurs.

Remarque   Les événements de mutation du DOM sont inclus à des fins d'exhaustivité, mais sont obsolètes dans la norme W3C.

DOM de niveau 2 HTML

Internet Explorer 9 ajoute la prise en charge des API DOM de niveau 2 HTML qui n'étaient pas disponibles dans les versions précédentes d'Internet Explorer, y compris les API HTML5, telles que getElementsByClassName et characterSet. Internet Explorer 9 a amélioré le modèle d'objet dans les tableaux, notamment en ce qui concerne les opérations du DOM pour l'ajout et la suppression d'éléments.

getElementsByClassName

La méthode getElementsByClassName renvoie tous les nœuds d'éléments dont les attributs de classe correspondent à la chaîne d'entrée. Cette fonctionnalité est similaire à celle de la méthode getElementsByTagName.

characterSet

L'attribut characterSet renvoie le nom MIME favori de l'encodage de caractères du document actif.

DOM de niveau 2 Style

La spécification DOM de niveau 2 Style définit les API de manière à ce qu'elles puissent accéder par programmation à la fois aux styles de chaque élément et aux feuilles de style, et qu'elles puissent les modifier en supprimant ou en changeant les règles. Les versions précédentes d'Internet Explorer étaient en mesure d'accomplir ces tâches à l'aide de méthodes propriétaires. Internet Explorer 9 ajoute la prise en charge des API normalisées définies dans la spécification DOM de niveau 2 Style. De plus, une prise en charge a été ajoutée des API normalisées qui n'ont pas d'équivalent dans Internet Explorer, telles que la méthode getComputedStyle. Un exemple d'application de la méthode getComputedStyle est fourni sur le site Internet Explorer Test Drive.

Pour plus d'informations, voir la rubrique DOM Style sur MSDN.

DOM de niveau 2 Traversal et Range

La partie DOM Range de la spécification DOM de niveau 2 Traversal et Range définit une manière générale de sélectionner du contenu au sein d'un document entre deux points limites. Les points limites sont spécifiés par un conteneur (l'élément parent contenant le point) et un décalage (l'emplacement dans le conteneur où se trouve le point). Associées à l'interface HTML5 Selection, les fonctionnalités Range du DOM permettent de récupérer une étendue, de sélectionner un enfant et de supprimer une sélection.

Internet Explorer 9 prend en charge toutes les API du modèle DOM de niveau 2 Range, ainsi que toutes les API de sélection HTML5, telles que la méthode setSelectionRange déjà largement répandue.

Pour plus d'informations, voir la spécification DOM Range sur MSDN.

La partie DOM Traversal de la spécification DOM de niveau 2 Traversal et Range permet de définir la manière de vous déplacer dans un document et d'éliminer les nœuds si nécessaire. Internet Explorer 9 prend en charge les deux façons de traverser le DOM (NodeIterator et TreeWalker), ainsi que les deux méthodes de filtrage des nœuds (whatToShow et NodeFilter) qui sont définies dans la spécification du W3C.

Pour plus d'informations, voir la spécification DOM Traversal sur MSDN.

Gestion des espaces blancs DOM

L'exposition des espaces blancs dans le DOM a été gérée différemment dans Internet Explorer par rapport aux autres navigateurs. Le manque d'interopérabilité dans ce domaine représentait une source de frustration chez les développeurs web. Dans les versions précédentes, Internet Explorer réduisait les espaces blancs qu'il rencontrait et ne les plaçait pas au sein des nœuds de texte dans le DOM. Dans Internet Explorer 9, les espaces blancs sont préservés et placés au sein des nœuds de texte dans le DOM, comme prévu. Ce comportement est cohérent avec celui des autres principaux navigateurs.

ECMAScript 5

Internet Explorer 9 apporte des améliorations à la fonctionnalité de langage JavaScript, ainsi que des performances JavaScript accrues. En décembre 2009, l'ECMA a approuvé la cinquième édition de ECMA-262 en tant que successeur de la troisième édition (la quatrième édition n'ayant jamais été publiée). Au cours de cette même année, Microsoft a commencé à travailler sur les éléments d'ECMAScript 5 (ES5) lorsque la prise en charge JSON natif pour les objets JavaScript et la prise en charge des accesseurs pour les objets DOM ont été ajoutées à Internet Explorer 8. Au-delà de la prise en charge JSON et des accesseurs DOM, ES5 normalise de nombreuses améliorations significatives apportées au langage JavaScript.

De nombreuses fonctionnalités ECMAScript 5 importantes sont implémentées dans Internet Explorer 9, parmi lesquelles :

Internet Explorer 9 remédie également à divers problèmes existants dans les implémentations précédentes de JavaScript dans Internet Explorer. Pour plus d'informations, consultez le blog de l'équipe IE. Pour voir la prise en charge d'ECMAScript 5, consultez le site du Internet Explorer Test Drive.

HTML5

Une prise en charge de certaines fonctionnalités de la version non définitive de la spécification HTML 5 a été introduite dans Internet Explorer 8, dont notamment :

Internet Explorer 9 s'inspire des travaux réalisés sur la conformité de HTML 5 dans Internet Explorer 8 et implémente les nouvelles fonctionnalités suivantes :

Remarque  Il est important de savoir qu'au moment où nous écrivons ces lignes, la spécification HTML5 n'est toujours pas un document définitif. Tant qu'il n'a pas le statut « Recommandation candidate », il peut encore être modifié de manière considérable. Pour plus d'informations, voir le dernier brouillon de la spécification HTML5.

La géolocalisation HTML5

Internet Explorer 9 intègre la prise en charge de la géolocalisation. L'API de géolocalisation permet à une application web d'accéder à l'emplacement géographique actuel de l'ordinateur exécutant Internet Explorer. La page web peut ensuite personnaliser l'expérience de l'utilisateur en fonction de l'emplacement, par exemple, pour afficher la position sur une carte ou afficher des informations locales actualisées, telles que les bulletins météo ou d'informations. Les données de l'emplacement sont renvoyées sous la forme de coordonnées de latitude et de longitude. Les API de géolocalisation d'Internet Explorer 9 sont conformes aux normes énoncées dans la spécification API de géolocalisation.

Pour voir la géolocalisation en action, consultez le site Internet Explorer 9 Test Drive.

Pour de plus amples informations sur la géolocalisation, consultez le site MSDN.

Éléments HTML5 vidéo et audio

Les deux fonctionnalités les plus attendues de HTML5 désormais prises en charge dans Internet Explorer 9 sont les nouveaux éléments vidéo et audio. Les éléments vidéo et audio sont tous deux définis dans la section Contenu intégré de la spécification HTML5.

En fait, les éléments vidéo et audio permettent d'intégrer des contenus vidéo et audio dans une page HTML. Les développeurs web peuvent aussi spécifier plusieurs attributs pour les deux éléments. Par exemple, prenons le balisage suivant :

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

Dans Internet Explorer 9, le fichier image s'affichera dans un espace de 400 sur 300 pixels (attributs width et height) "frame.png" (attribut poster) pendant le chargement de la vidéo. Le fichier vidéo, "video.mp4" (attribut src), se lancera automatiquement dès la fin du chargement de la page (attribut autoplay), et les contrôles de la vidéo s'afficheront (attributcontrols). La vidéo se répète indéfiniment (attribut loop). Si le format vidéo n'est pas pris en charge, le texte au sein de l'élément video (Ce contenu s'affiche...) s'affichera à la place de la vidéo. L'élément video prend également en charge l'élément preload, qui indique au navigateur l'approche adoptée par le développeur web pour optimiser l'expérience de l'utilisateur.

Pour obtenir un exemple d'application de l'élément video, visionnez la démonstration « Panorama vidéo » sur le site Internet Explorer Test Drive.

Internet Explorer 9 prend également en charge l'élément video avec des sources multiples, chacune d'elles étant spécifiées par l'élément enfant source. Par exemple, prenons le balisage suivant :

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

Ici, Internet Explorer 9 retient le premier format pris en charge de la liste (dans ce cas, le deuxième élément source) et lit le fichier source correspondant.

L'élément audio est défini de façon similaire à l'élément video, mais sans les attributs width, height et poster. Pour voir un exemple de l'élément audio en action, consultez le site Internet Explorer Test Drive.

Internet Explorer 9 prend en charge les formats de contenu suivants :

Nom de l'élémentFormats pris en charge
vidéo

conteneur MP4, vidéo H.264, tous les profils : audio au format AAC ou MP3

Vidéo WebM, si le codec VP8 est installé sur votre ordinateur

audioAAC ou MP3

Pour plus d'informations, voir les éléments vidéo et audio HTML5 sur MSDN.

Élément HTML5 canvas

Autre nouvelle fonctionnalité HTML5 attendue dans Internet Explorer 9 : le nouvel élément canvas utilisé en association avec l'API Canvas 2D. L'élément canvas, tel que défini dans la spécification HTML5, permet le rendu des images sur un canevas bitmap dépendant de la résolution. Pour dessiner sur le canevas, des « contextes » sont utilisés, tels que le « contexte » Canvas 2D précisé dans la spécification API Canvas 2D du W3C. Internet Explorer 9 introduit la prise en charge de l'élément canvas en utilisant l'API de dessin 2D Canvas en tant que contexte. (Dans Internet Explorer 9, le contexte Canvas 2D est représenté par l'objet CanvasRenderingContext2D ou l'interface ICanvasRenderingContext2D.) Comme tous les graphiques dans Internet Explorer 9, l'élément canvas est accéléré matériellement à l'aide de Windows et du processeur graphique.

Canvas permet de dessiner des scénarios comprenant des rectangles, des chemins, des lignes, des remplissages, des arcs et des courbes quadratiques et des courbes de Bézier. De plus, l'élément canvas d'Internet Explorer 9 prend en charge les attributs width et height. (Les valeurs par défaut pour la largeur et la hauteur sont respectivement de 300 et 150 pixels et la couleur par défaut est noir transparent.)

Canvas est une manière de programmer des images sur le web. La balise canvas est un « mode immédiat » (les commandes de dessin sont directement envoyées au matériel graphique), une surface de dessin en deux dimensions que vous pouvez utiliser pour obtenir des graphiques en temps réel, des animations ou des jeux interactifs sans avoir à télécharger un plug-in séparé. Grâce aux API définies par l'objet CanvasRenderingContext2D, l'élément canvas permet les scénarios de dessin suivants :

Vous pouvez utiliser JavaScript pour animer les dessins canvas ou créer des expériences interactives qui peuvent réagir aux saisies clavier, aux clics de souris ou à n'importe quel événement du navigateur. Cet exemple sur le site Internet Explorer Test Drive permet notamment de produire, en seulement quelques lignes de JavaScript, des lignes colorées et rayonnantes qui se déplacent au hasard.

L'élément canvas d'Internet Explorer 9 prend en charge les attributs width et height. (Les valeurs par défaut pour la largeur et la hauteur sont respectivement de 300 et 150 pixels et la couleur par défaut est noir transparent.)

Internet Explorer 9 prend en charge les API Canvas 2D Context suivantes (membres exposés par l'objet CanvasRenderingContext2D) :

Pour une présentation détaillée de HTML5 Canvas dans Internet Explorer 9, consultez le site MSDN. Vous pouvez aussi vous rendre sur le site Internet Explorer Test Drive pour voir davantage de démonstrations de l'élément canvas. Pour des informations techniques sur l'élément canvas d'Internet Explorer 9, consultez la page de référence consacrée à l'élément canvas sur le site MSDN.

Améliorations de l'analyse HTML

L'analyse HTML dans Internet Explorer 9 a été améliorée pour s'aligner plus étroitement avec le comportement décrit dans la spécification préliminaire HTML5.

Analyse des images SVG dans le langage HTML

Internet Explorer 9 prend en charge les images SVG directement intégrées dans le langage HTML. Pour plus d'informations sur le format SVG, voir la rubrique SVG (Scalable Vector Graphics) de ce guide.

Analyse du langage XHTML

Internet Explorer 9 analysera les documents dont le langage XHTML est un type mime application/xhtml+xml.

Éléments génériques

Auparavant, Internet Explorer analysait les éléments qu'il ne pouvait reconnaître en tant qu'éléments « inconnus ». Ces éléments étaient aplatis, ce qui empêchait les règles de style CSS de s'y appliquer et cela ne correspondait pas à la spécification non définitive HTML5. Internet Explorer 9 modifie ce comportement et analyse désormais les éléments non reconnus en tant qu'éléments « génériques », ce qui leur permet de fonctionner comme des éléments normaux. Les développeurs n'ont donc plus besoin de recourir à des solutions de contournement, comme par exemple, appeler document.createElement pour forcer Internet Explorer à reconnaître un élément.

Vous trouverez ci-dessous un exemple simple d'élément générique, dans ce cas un élément indéfini appelé 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 ignore la balise mydiv et ses règles CSS associées. La phrase suivante se présente comme suit :

Internet Explorer 9 analyse la balise mydiv comme prévu et affiche la phrase suivante :

Balises chevauchantes

Si votre code HTML contient des balises chevauchantes, Internet Explorer 8 et les versions précédentes ne peuvent les analyser. Ce comportement est contraire à la spécification non définitive HTML5. Si certains éléments se chevauchent pour des raisons liées au script (comme l'exemple présenté ici) et cela peut conduire à des erreurs de script. Internet Explorer 9 suit la spécification préliminaire HTML5 et résout les balises chevauchantes lors de l'analyse.

Vous trouverez ci-dessous un exemple simple de script qui convertit le texte inséré entre les balises i et b chevauchantes en rouge :

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

Dans Internet Explorer 8 et les versions précédentes, ce balisage produisait un résultat inattendu.

Dans Internet Explorer 9, le balisage s'affiche conformément aux attentes.

Analyse des changements opérés sur les blocs de script et de style

Internet Explorer 8 et les versions précédentes ne conservent pas le texte, ni dans un bloc de script ou de style vers les nœuds de texte dans le DOM. Internet Explorer 9 conserve le texte dans des blocs de script ou de style vers le DOM sous la forme de nœuds de texte, comme prévu. Le code source est ainsi disponible dans le DOM en tant que nœud de texte afin que vous puissiez le manipuler avec le script.

API de sélection HTML5

Internet Explorer 9 ajoute la prise en charge de trois API HTML5 de sélection de texte. L'objet Selection représente une liste d'objets Range qui sont activés par la nouvelle prise en charge de la spécification DOM de niveau 2 Range dans Internet Explorer 9. Pour de plus amples informations, reportez-vous à la section Améliorations du DOM (Document Object Model) plus haut dans ce document.

La méthode getSelection

La méthode getSelection renvoie l'objet Selection vers la fenêtre qui représente le texte actuellement sélectionné.

La propriété selectionStart

La propriété selectionStart contient la position du début du texte actuellement sélectionné, mais peut également définir le début de la sélection.

La propriété selectionEnd

La propriété selectionEnd contient la position de fin du texte actuellement sélectionné, mais peut également définir la fin de la sélection.

Éléments sémantiques HTML5

Internet Explorer 9 améliore la prise en charge de plusieurs éléments sémantiques HTML5. Un élément « sémantique » dans ce contexte se définit comme un élément dont le nom de balise décrit son contenu, mais qui n'a aucun comportement spécifique. Les balises sémantiques sont particulièrement utiles pour l'accessibilité.

Internet Explorer 9 apporte les modifications suivantes à la prise en charge des éléments sémantiques :

  • Les éléments héritent désormais de l'interface HTMLElement, et non de l'interface HTMLUnknownElement, conformément à la spécification HTML5.
  • Par défaut, les styles sont appliqués aux éléments conformément à la spécification HTML5.

Les éléments sémantiques suivants sont désormais reconnus :

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

Profils de couleurs ICC

L'ICC (International Color Consortium) publie les profils de couleurs qui décrivent les attributs de couleurs des logiciels et du matériel.

Internet Explorer 9 introduit la prise en charge des profils de couleurs ICC v2 et v4 dans les images, tels que définis dans les spécifications ICC.

API de sélecteurs de niveau 2

La spécification API de sélecteurs de niveau 2 définit une série d'API (interfaces de programmation d'applications) qui vous permettent d'évaluer les sélecteurs dans le DOM (Document Object Model).

Internet Explorer 8 a implémenté les API de sélecteurs querySelector et querySelectorAll. Internet Explorer 9 ajoute la prise en charge de la méthode msMatchesSelector.

Images SVG (Scaling Vector Graphics)

La prise en charge des images SVG est devenue l'une des fonctionnalités les plus demandées au niveau de son implémentation dans Internet Explorer. Elle constitue une manière puissante d'ajouter des éléments visuels haute fidélité et facilement évolutifs, des plus petits et plus simples aux plus grands et plus complexes, à un site web sans avoir besoin d'un plug-in ou d'une visionneuse séparée.

Grâce à Internet Explorer 9, Microsoft est fier d'introduire la prise en charge de l'ensemble de fonctionnalités de base SVG. La prise en charge du format SVG dans Internet Explorer 9 repose sur la recommandation de spécification SVG 1.1 (Deuxième édition) (pour les navigateurs). Les fonctionnalités suivantes ont été implémentées :

  • La plupart des structures de document SVG, l'interactivité (événements script) et le style (inline et via CSS)
  • De nombreux éléments de présentation, leurs attributs ainsi que les interfaces DOM, y compris :
    • les formes de base
    • le remplissage, le tracé, le marqueur et la couleur
    • les dégradés et les motifs
    • les chemins
    • le texte

Internet Explorer 9 prend en charge les méthodes suivantes pour afficher le balisage SVG :

  • Les fragments SVG intégrés dans le code HTML5, sans utiliser d'objet étranger (c'est-à-dire, intégrer une balise <svg>dans votre code HTML)
  • Le format SVG en tant que type de document complet (avec une extension de fichier .svg)
  • Le format SVG dans le code XML ou XHTML (similaire à la méthode HTML5, uniquement avec les fichiers XML ou XHTML)
  • Le format SVG en tant qu'image CSS
  • Le format SVG utilisant l'élément object, comme dans l'exemple suivant (remarquez les attributs type, height et width) :
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • Le format SVG utilisant les éléments img, embed, iframe, ou frame, comme dans l'exemple suivant :
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Pour de plus amples informations sur la prise en charge du format SVG dans Internet Explorer 9, consultez le site MSDN.

Pour plus d'informations à propos du format SVG, voir la page de référence consacrée à l'élément svg sur MSDN.

Formes de base

Internet Explorer 9 introduit la prise en charge de l'analyse et du rendu de tous les éléments de formes de base, de leur attributs et des interfaces DOM associées, comme spécifié dans le module Formes de base de la spécification SVG 1.1 (Deuxième édition). L'ensemble de formes de base prises en charge dans Internet Explorer 9 comprend les éléments de formes suivants :

Internet Explorer 9 prend également en charge les interfaces DOM associées à ces éléments.

Voici quelques exemples d'éléments des formes susmentionnées. Le balisage est suivi d'une capture d'écran du résultat correspondant dans Internet Explorer 9.

Rectangles : Élément 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"/>

Pour de plus amples informations, consultez la page de référence consacrée à l'élément rect sur le site MSDN.

Cercles : Élément circle
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

Pour de plus amples informations, consultez la page de référence consacrée à l'élément circle sur le site MSDN.

Ellipses : Élément ellipse
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

Pour de plus amples informations, consultez la page de référence consacrée à l'élément ellipse sur le site MSDN.

Lignes : Élément 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"/>

Pour de plus amples informations, consultez la page de référence consacrée à l'élément line sur le site MSDN.

Polylignes : Élément polyline

Une « polyligne » se définit dans SVG comme un ensemble de lignes reliées entre elles qui produisent souvent une forme « ouverte » ou un polygone dont un ou plusieurs côtés sont manquants ou non convexes.

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

Pour de plus amples informations, consultez la page de référence consacrée à l'élément polyline sur le site MSDN.

Polygones : Élément polygon

Un polygone est une forme fermée.

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

Pour de plus amples informations, consultez la page de référence consacrée à l'élément polygon sur le site MSDN.

Découpage, masquage et composition

Internet Explorer 9 prend en charge le découpage des images SVG, les chemins de découpe, le masquage et l'opacité, comme spécifié dans le module Découpage, masquage et composition de la spécification SVG 1.1 (Deuxième édition). (Les chemins SVG sont abordés dans la section Chemins de ce document.)

Découpage

Un chemin de découpe coupe ou découpe la zone dessinée par une couleur, un motif ou une image. Toutes les parties de l'élément graphique qui se trouvent en dehors du chemin de découpe ne sont pas dessinées. Les chemins de découpe sont entièrement opaques. La partie de l'élément graphique se trouvant en dehors du chemin de découpe est complètement invisible.

Dans le format SVG, les propriétés overflow et clip établissent les chemins de découpe initiaux ou des formes dans lesquelles des contenus vont être affichés. Par défaut, le chemin de découpe initial est défini en tant que fenêtre d'affichage SVG, ou en tant que zone rectangulaire de la page où le contenu SVG est affiché.

L'élément clipPath sert à définir un chemin de découpe. Le chemin de découpe est ensuite référencé à l'aide de la propriété clip-path. La propriété clip-rule s'applique aux éléments graphiques au sein d'un élément clipPath, et l'attribut clipPathUnits définit un système de coordonnées pour le contenu du clipPath. Les chemins de découpe peuvent s'appliquer à du texte, des couleurs, des motifs et des images.

Vous pouvez accéder à la fonctionnalité de découpe par programmation grâce à l'interface DOM SVGClipPathElement.

Voici un exemple simple d'un chemin de découpe 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>

Cet exemple utilise l'élément clipPath pour définir un chemin de découpe dans un cercle. La propriété clip-path est ensuite utilisée pour appliquer le chemin de découpe à un rectangle. Le résultat obtenu dans Internet Explorer 9 est le suivant :

Masquage

Un masque fonctionne de la même manière qu'un chemin de découpe, sauf qu'il est semi-transparent. Les masques sont souvent utilisés pour la composition des objets du premier plan avec l'arrière-plan actif.

L'élément mask définit un masque. Le masque est ensuite référencé à l'aide la propriété mask.

Voici un exemple simple de masque 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>

Cet exemple utilise la propriété mask pour définir un masque de la forme de trois cercles adjacents de couleurs différentes. La propriété mask est ensuite utilisée pour appliquer le masque à un rectangle violet. Le résultat obtenu dans Internet Explorer 9 est le suivant :

Systèmes de coordonnées, transformations et unités

Internet Explorer 9 introduit la prise en charge des systèmes de coordonnées SVG, des transformations et des unités, comme spécifié dans le module Systèmes de coordonnées, transformations et unités de la spécification préliminaire SVG 1.1 (Deuxième édition). Internet Explorer 9 prend en charge les fonctionnalités suivantes :

  • Unités et pourcentages.
  • Transformations arbitraires sur tout élément et l'attribut transform.
  • Propriétés viewBox et preserveAspectRatio (y compris l'interaction avec la propriété overflow).
  • Prise en charge des transformations et des types de listes de transformation.

Internet Explorer 9 prend également en charge les interfaces DOM associées aux systèmes de coordonnées SVG et aux transformations.

Structure de document

Internet Explorer 9 introduit la prise en charge de la structure de document de base SVG, des métadonnées et de la fonction d'extensibilité, comme spécifié dans le module Structure de document, Métadonnées et Extensibilité de la spécification SVG 1.1 (Deuxième édition). Internet Explorer 9 prend en charge les éléments suivants :

Internet Explorer 9 prend également en charge les interfaces DOM associées à ces éléments.

Dégradés et motifs

Le format SVG permet de peindre ou de tracer des formes et du texte à l'aide de couleurs, de dégradés ou de motifs. Internet Explorer 9 prend en charge les dégradés et les motifs SVG, comme spécifié dans le module Dégradés et motifs de la spécification SVG 1.1 (Deuxième édition).

Dégradés

La prise en charge des dégradés est possible grâce aux éléments linearGradient et radialGradient) et aux attributs ( gradientUnits et gradientTransform) de dégradés. Les couleurs de dégradés sont définies par l'élément stop. Les éléments de dégradés peuvent être utilisés dans les propriétés fill et stroke des formes SVG. Par exemple, prenons le balisage suivant :

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

Ce balisage définit un rectangle avec un dégradé linéaire. Les deux éléments stop spécifient les points de dégradé le long d'un vecteur pour les transitions de couleurs : un point jaune à 10 % et un point bleu à 90 %. Dans Internet Explorer 9, ce balisage se présente comme suit :

Motifs

La prise en charge des motifs est possible grâce à l'élément pattern et à ses attributs. Comme les éléments de dégradés, les éléments de motifs peuvent être utilisés dans les propriétés fill et stroke des formes SVG. Par exemple, prenons le balisage suivant :

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

Dans cet exemple, l'élément pattern définit un motif qui consiste en une alternance entre un carré bleu et un minuscule cercle jaune. Un remplissage de ce motif est appliqué à l'ellipse. L'image suivante illustre son affichage dans Internet Explorer 9 :

Interactivité

Les contenus SVG peuvent être interactifs, ils peuvent réagir en réponse à une entrée de l'utilisateur. Internet Explorer 9 prend en charge les fonctionnalités d'interactivité SVG, comme spécifié dans le module Interactivité de la spécification SVG 1.1 (Deuxième édition), notamment :

Internet Explorer 9 prend également en charge l'interface DOM SVGCursorElement du module Interactivité.

De plus, Internet Explorer 9 prend en charge l'attribut focusable, comme spécifié dans le module Interactivité de la spécification SVG Tiny 1.2

Le balisage suivant présente un exemple très simple d'interactivité SVG en action :

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

Lorsque cet extrait est chargé, un petit cercle rouge s'affiche :

Lorsque vous cliquez sur le cercle, sa taille est multipliée par deux :

Vous pouvez obtenir le même résultat grâce aux événements mouseover et mouseout, en passant simplement le pointeur de la souris au-dessus du cercle :

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

Liens et affichages

Le format SVG permet la liaison de contenus SVG vers d'autres pages ainsi que des affichages prédéfinis de documents SVG. Les affichages sont utiles lorsque vous souhaitez effectuer un lien directement vers un gros plan sur un diagramme.

Internet Explorer 9 prend en charge les liens et les affichages SVG, comme spécifié dans le module Liens de la spécification SVG 1.1 (Deuxième édition). Cela comprend également la prise en charge des éléments a et view.

Les interfaces DOM associées au module Liens, SVGAElement et SVGViewElement, sont également prises en charge.

Liens

Tout comme dans le langage HTML, l'élément a est utilisé pour créer un hyperlien dans SVG. Par exemple, le balisage suivant permet d'obtenir un lien hypertexte sur un rectangle :

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

Les affichages peuvent être utilisés pour demander au navigateur d'afficher une image SVG d'une certaine manière. Par exemple, le balisage suivant définit un lien vers un affichage :

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

Dans cet exemple, l' rect-view affichage est défini en tant que viewBox avec les coordonnées spécifiées. Lorsque vous cliquez sur le lien « Go to Rectangle » (Voir le rectangle), rect-view l'affichage du rectangle rouge apparaît à l'écran.

Le balisage suivant définit un autre lien vers un affichage :

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

Dans cet exemple, circle-view l'affichage a l'attribut preserveAspectRatio. none. Cela signifie que même si la forme est un cercle, elle ne s'adaptera pas de manière uniforme pour remplir le rectangle viewBox spécifié lorsque l'affichage est invoqué. Au lieu de cela, le cercle s'agrandira de manière non uniforme de sorte afin que son cadre englobant corresponde au rectangle viewBox. Le résultat se présente comme suit dans Internet Explorer 9 lorsque la page est chargée pour la première fois :

Lorsque vous cliquez sur « Go to Circle » (Voir le rectangle), circle-view l'affichage est invoqué et le cercle s'étend pour remplir le rectangle viewBox. Il se présente sous la forme d'une ellipse.

Peinture et couleur

La peinture et la couleur sont deux composants essentiels du format SVG. Le concept de peinture englobe les remplissages (couleurs solides, dégradés, motifs), les tracés (lignes dessinées le long de chemins), les symboles de marqueur (appliqués à la fin des segments de lignes, par exemple des flèches) et parfois l'opacité. Les remplissages et les tracés peuvent s'appliquer aux chemins, au texte et aux formes.

Internet Explorer 9 introduit la prise en charge de la peinture et de la couleur SVG, comme spécifié dans le module Peinture : remplissage, tracés et symboles de marqueur et dans le module Couleur de la spécification SVG 1.1 (Deuxième édition). La prise en charge inclut :

Les interfaces DOM associées au module Peinture, SVGPaint et SVGMarkerElement, sont également prises en charge.

Plusieurs exemples de remplissages et de tracés au format SVG sont inclus dans la section Chemins de ce document.

Chemins

Les chemins SVG sont des contours de formes. Ils peuvent être remplis, tracés (une ligne est dessinée le long du chemin) ou utilisés en tant que chemins de découpe (pour découper d'autres formes).

Internet Explorer 9 introduit la prise en charge des chemins SVG, comme spécifié dans le module Chemins de la spécification SVG 1.1 (Deuxième édition). Est inclue la prise en charge de l'élément path ainsi que de la propriété d qui permet l'analyse des données des chemins.

Les interfaces DOM associés au module Chemins sont également prises en charge.

L'élément path permet des scénarios de développeur nombreux et variés. Voici quelques exemples. Le balisage est suivi d'une capture d'écran du résultat correspondant dans Internet Explorer 9.

Forme fermée avec lignes droites et remplissage
<?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>

Courbe de Bézier (quadratique)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Ligne avec arc
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

Texte

Les documents SVG peuvent inclure du texte. Le texte est rendu comme n'importe quel autre élément graphique au format SVG, ce qui signifie que les transformations de système de coordonnées, la peinture, le découpage et le masquage peuvent tous être appliqués à du texte.

Internet Explorer 9 prend en charge le rendu de texte, comme spécifié dans le module Texte de la spécification SVG 1.1 (Deuxième édition).

L'élément text sert à spécifier les caractères devant être dessinés. Le format SVG n'effectuant pas automatiquement les sauts de ligne et les retours automatiques à la ligne, vous devez déterminer les sauts de ligne à l'avance. Pour régler les propriétés de texte (par exemple la police, l'épaisseur de la police, la couleur, et bien d'autres encore) au sein d'une ligne de texte, le format SVG propose l'élément tspan.

Internet Explorer 9 prend également en charge les interfaces DOM associées au module Texte.

Nouveaux outils pour les développeurs web

Cette section décrit en premier lieu les « sites épinglés », une nouvelle façon de renforcer la connexion entre votre site web et vos utilisateurs. Ensuite, elle décrit la nouvelle méthode d'affectation des versions dans Internet Explorer 9 afin de remédier aux problèmes de compatibilité dans la nouvelle version d'Internet Explorer. Enfin, vous découvrirez les améliorations apportées aux outils de développement d'Internet Explorer, qui étaient auparavant intégrés directement au navigateur dans Internet Explorer 8.

Sites épinglés

Lorsque vous tirez parti des sites épinglés, les utilisateurs s'immergent totalement dans votre site web. Les sites épinglés constituent un nouvel ensemble d'outils incluant une interface d'utilisateur optimisée pour le web, une icône Favoris (favicon) agrandie, ainsi que des boutons Précédent et Suivant et d'autres éléments d'interface qui peuvent être harmonisés avec la marque et l'aspect général du site. L'intégration à Windows 7 offre aux utilisateurs de nouvelles manières d'explorer les sites web de développeurs à l'aide des dernières API Windows pour créer des listes de raccourcis de sites web, des barres d'outils de miniatures et des notifications. (les sites épinglés sont uniquement pris en charge avec la barre des tâches Windows 7).

Épinglage de sites à la barre des tâches

Les utilisateurs peuvent effectuer l'une des opérations suivantes pour épingler un site à la barre des tâches :

  • « Détachez » un onglet en cliquant dessus et le faisant glisser vers la barre des tâches
  • Faites glisser l'icône Favoris (icône favorite) de la barre d'adresse vers la barre des tâches
  • Faites glisser une image personnalisée de la classe « msPinSite » (une image « glisser pour épingler ») vers la barre des tâches

Après avoir épinglé un site, celui-ci s'affiche avec des améliorations personnalisées. Par exemple, les boutons Précédent et Suivant s'adaptent au jeu de couleurs du site web. Les sites peuvent être également épinglés au menu Démarrer.

Listes de raccourcis

Les tâches de liste de raccourcis sont des actions spécifiques aux applications que l'on adapte à un site web épinglé. Elles s'appuient sur la même fonctionnalité pour les applications de Windows 7. Grâce aux tâches de liste de raccourcis, un site web peut mettre en évidence ses commandes les plus fréquemment utilisées. Vous pouvez définir des tâches de liste de raccourcis en fonction des fonctionnalités de votre site web et des principales actions attendues de la part d'un utilisateur. Les tâches fournissent un ensemble de liens statiques auxquels les utilisateurs peuvent accéder à tout moment, même si Internet Explorer n'est pas exécuté. Pour plus d'informations sur les tâches de listes de raccourcis, voir Comment créer des listes de raccourcis dynamiques sur MSDN.

Barres d'outils de miniatures

Une barre d'outils de miniatures est essentiellement un « contrôle à distance » de votre site Web. La barre d'outils apparaît en dessous de l'aperçu miniature lorsque vous pointez sur le bouton de la barre des tâches d'un site épinglé. Cette fonctionnalité est particulièrement utile pour des sites implémentant une lecture vidéo ou audio, mais les barres d'outils de miniatures présentent de nombreuses utilisations potentielles. Les boutons de barres d'outils de miniatures peuvent inclure des commandes de contrôle de lecture, d'ajout ou de partage de favoris, de recherche, de changement d'état en ligne, d'achats instantanés, ou de classement de pages Web. Pour plus d'informations sur la création de barres d'outils de miniatures, voir Comment créer des barres d'outils de miniatures sur MSDN.

Notifications

Tout comme les applications de Windows 7, les sites épinglés peuvent envoyer des notifications et indiquer l'état aux utilisateurs en affichant une icône de superposition en haut du bouton de la barre des tâches du site épinglé. Les icônes de superposition permettent d'attirer l'attention sur un site web lorsque l'affichage de la fenêtre du site épinglé est bloqué, par exemple, quand la fenêtre du navigateur est réduite ou bloquée par une autre fenêtre. Vous pouvez utiliser des icônes de superposition pour fournir des informations ou des notifications importantes concernant l'état, telles que l'état du réseau, l'état en ligne ou l'existence d'un nouveau message. Pour plus d'informations sur les notifications, voir Comment fournir des notifications sur MSDN.

Découverte de sites épinglés

Internet Explorer 9 ne notifiera pas un utilisateur que le site peut être épinglé. C'est au développeur de décider d'indiquer ces fonctionnalités. Vous disposez de nombreux moyens d'aviser vos utilisateurs des fonctionnalités des sites épinglés de votre site Web, notamment fly-ins, menus déroulants, bannières et effets div ; images et icônes glisser pour épingler ; et expérience de première exécution qui indique les fonctionnalités de votre site épinglé après que l'utilisateur a épinglé le site pour la première fois. Pour plus d'informations sur la fonctionnalité de découverte, voir Comment améliorer la fonctionnalité Découverte sur MSDN.

Pour obtenir des informations utiles et des exemples de code sur les sites épinglés, voir le Centre de développement MSDN sur les sites épinglés.

Pour une démonstration de sites épinglés, voir le site Internet Explorer 9 Test Drive.

Contrôle de la version de la plate-forme

Internet Explorer 8 avait introduit les modes de compatibilité des documents, qui sont une extension du mode de compatibilité introduit par Microsoft Internet Explorer 6. Les modes de document vous permettent de choisir un mode de rendu spécifique utilisé par Internet Explorer pour afficher vos pages web. Ils sont décrits en détail à la rubrique Définition de la compatibilité des documents sur MSDN.

Nouveau mode de document

Internet Explorer 9 ajoute un nouveau mode de document, le mode Normes Internet Explorer 9, qui accélère considérablement les performances, évolue pour satisfaire les exigences des applications web modernes et implémente la prise en charge des dernières normes.

Internet Explorer 9 exécute le mode de document IE9 par défaut, sauf indication contraire sur la page ou du serveur web.

Le meilleur moyen de s'assurer qu'Internet Explorer 9 affiche votre page dans le dernier mode de document consiste à utiliser une directive !DOCTYPE standard et aucune balise meta ou aucun en-tête HTTP compatible X-UA. La directive !DOCTYPE permettant d'appeler le mode Normes IE9 se présente comme suit :

<!DOCTYPE html>

Bien entendu, vous pouvez utiliser la directive !DOCTYPE et la balise meta ou l'en-tête HTTP compatible X-UA pour modifier le paramètre par défaut, si nécessaire.

Pour déterminer le mode de document actif, appuyez sur F12 pour accéder aux outils de développement F12 d'Internet Explorer, puis regardez à droite de la barre de menus. Pour remplacer le mode de document, cliquez sur Normes Internet Explorer 9 dans le menu Mode de document.

Chaîne de l'agent utilisateur (UA)

La chaîne UA identifie le navigateur pour les serveurs hôtes et fournit certains détails système. (Pour plus d'informations sur les chaînes UA, voir Comprendre la chaîne user-agent sur MSDN.) Internet Explorer 9 est différent des versions précédentes d'Internet Explorer, car il envoie la chaîne UA courte par défaut. L'ensemble des performances, l'interopérabilité et la compatibilité sont ainsi améliorées. Internet Explorer 9 n'enverra plus les ajouts à la chaîne UA effectués par les autres logiciels installés sur l'ordinateur de l'utilisateur, tels que .NET ou autres.

Internet Explorer 9 envoie la nouvelle chaîne UA Internet Explorer 9. Quatre changements sont à distinguer par rapport à la chaîne UA d'Internet Explorer 8 et auxquels les développeurs doivent faire attention :

  1. La version de l'application passe de « Mozilla/4.0 » à « Mozilla/5.0 » pour correspondre aux autres navigateurs. Ce changement indique qu'Internet Explorer 9 est un navigateur interopérable.
  2. Le jeton de version passe de « MSIE 8.0 » à « MSIE 9.0 ».
  3. Le jeton Trident passe de « Trident/4.0 » à « Trident/5.0 ».
  4. Internet Explorer 9 enverra la chaîne UA courte suivante sans les ajouts effectués par d'autres logiciels installés sur l'ordinateur :

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

L'affichage de compatibilité dans Internet Explorer 9 correspond au mode Normes IE7, tout comme dans Internet Explorer 8. (Pour plus d'informations sur l'affichage de compatibilité, voir Comprendre la liste d'affichage de compatibilité sur MSDN.) En mode Affichage de compatibilité, Internet Explorer 9 envoie la chaîne UA suivante :

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

Pour plus d'informations sur la chaîne UA pour Internet Explorer 9, consultez l'article correspondant sur le blog de l'équipe Internet Explorer « Présentation de la chaîne user-agent d'IE9 ».

Outils de développement F12

Pour accéder aux outils de développement F12 d'Internet Explorer 9, appuyez sur F12, ou, dans le menu Outils, cliquez sur Outils de développement F12. Si vous avez utilisé les outils de développement d'Internet Explorer 8, vous remarquerez d'emblée l'amélioration des fonctionnalités et l'accélération des performances.

Onglet Console

Les outils de développement F12 d'Internet Explorer 9 intègrent un onglet appelé Console pour l'exposition des événements de script. Lorsque vous examinez le script, plusieurs boutons bascule s'affichent : Erreur, Avertissement et Message. Chaque bouton affiche le nombre de messages de chaque type.

Onglet Réseau

Internet Explorer 9 ajoute un outil d'inspection du réseau à ses outils de développement. Pour accéder à l'outil, cliquez sur l'onglet Réseau. Vous pouvez ensuite :

  • Capturer le trafic réseau HTTP et HTTPS.
  • Afficher (et enregistrer) les contenus des requêtes et réponses capturées.
  • Afficher les détails supplémentaires à propos des données capturées telles que les informations concernant les cookies, les tailles, les durées et le cache.

Outil User-Agent Switcher

Grâce au nouvel outil User-agent switcher, vous pouvez modifier la chaîne UA qui identifie le type et la version de navigateur pour le serveur web. (Pour plus d'informations sur la nouvelle chaîne UA d'Internet Explorer 9, reportez-vous à la section Chaîne d'agent utilisateur de ce document.) La chaîne UA choisie sera envoyée à travers le réseau en tant que header dans chaque requête. Pour modifier la chaîne UA du navigateur, dans le menu Outils des outils de développement, pointez vers Modifier la chaîne d'agent utilisateur, puis choisissez le navigateur dont vous souhaitez envoyer la chaîne UA.

Mesure des performances réelles

Grâce aux outils de développement F12 d'Internet Explorer 9, vous pouvez désormais mesurer des aspects encore plus nombreux des performances d'un site web que dans les versions précédentes d'Internet Explorer. Cependant, vous ne pouvez pas mesurer les performances que les utilisateurs connaissent réellement. Pour résoudre ce problème, certains sites développent leurs propres bibliothèques pour essayer de mesurer en direct les performances dans les pages web, mais cela peut introduire des surcharges qui ralentissent les pages pour les utilisateurs. Nous pensons que la spécification WebTiming du W3C, qui au moment où nous écrivons ces lignes est toujours en cours, constitue une bonne base conceptuelle pour résoudre ce problème. Vous pouvez accéder à la fonctionnalité WebTiming dans Internet Explorer 9 via l'interface window.msPerformance dans le DOM. Les développeurs peuvent également activer le débogage des scripts dans les outils de développement F12, puis accéder à l'objet window.msPerformance.

Pour afficher une démonstration de l'objet window.msPerformance en utilisation, voir le site Internet Explorer Test Drive.

Historique des révisions

16 mars 2010 : Créé pour Internet Explorer Platform Preview.

15 avril 2010 : Mise à jour des informations concernant :

  • la prise en charge du module CSS3 Espaces de noms
  • la prise charge des sélecteurs CSS3
  • plus de détails à propos de la prise en charge du DOM
  • plus de détails à propos de la prise en charge du format SVG, y compris les limitations d'intégration
  • la prise en charge des profils de couleurs ICC

5 mai 2010 : Mise à jour pour Internet Explorer Platform Preview Build 2 avec des informations concernant :

  • plus de détails à propos de la prise en charge du DOM
  • Nouvelles fonctionnalités DOM :
    • nouvelles API DOM Core
    • DOM HTML
    • DOM Traversal
    • Nouveaux événements DOM de niveau 3 :
      • événement DOMAttrModified
      • événement DOMContentLoaded
      • événements de composition
  • Nouvelle chaîne d'agent utilisateur (UA)
  • Modifications de l'URI de données
  • Ajouts aux Outils de développement : onglet Console et outil UA switcher

23 juin 2010 : Mise à jour pour Internet Explorer Platform Preview Build 3 avec des informations concernant :

  • Nouvelles fonctionnalités CSS3 :
    • Nouvelles fonctionnalités CSS3 d'arrière-plan et de bordure
    • Modèles de couleurs TSL et TSLA
    • Prise en charge des polices CSS3
    • Prise en charge du module CSS3 Valeurs et unités
    • Nouvelles valeurs de la propriété display
  • Nouvelle prise en charge de DOM Element Traversal
  • Nouvelles fonctionnalités HTML5 :
    • éléments video, audio, et canvas
    • interface Selection
  • Nouvelle prise en charge des API de sélecteurs de niveau 2 :
    • méthode matchesSelector
  • Nouvelles fonctionnalités SVG :
    • Découpage, masquage et composition
    • Dégradés et motifs
    • Interactivité
    • Liens et affichages
    • Peinture et couleur
    • Texte

4 août 2010 : Mise à jour pour Internet Explorer Platform Preview Build 4 avec des informations concernant :

  • « Chakra », le nouveau moteur JavaScript
  • Fonctionnalités de DOM améliorées
  • Nouvelle prise en charge de la spécification WebIDL
  • Objet window.msPerformance
  • Section canvas contenant des liens vers des exemples

15 septembre 2010 : Mise à jour pour Internet Explorer 9 version bêta avec de nouveaux liens et informations concernant :

  • DOMParser et XMLSerializer
  • Sites épinglés

28 octobre 2010 : Mise à jour pour Internet Explorer Platform Preview Build 6 avec des informations concernant :

  • Transformations 2D CSS
  • Éléments sémantiques HTML5
  • Numéro de version des profils de couleur ICC pris en charge résolu

10 février 2011 : Mise à jour de la version RC d'Internet Explorer 9 avec des informations sur :

  • La géolocalisation HTML5
  • Les sites épinglés (mis à jour)
  • Le mode de compatibilité (mis à jour)
  • D'autres correctifs de document divers

18 février 2011 : Mise à jour des informations complémentaires concernant :

  • Sites épinglés
  • HTML5 Canvas

14 mars 2011 : Mise à jour d'Internet Explorer 9 (RTW) :

  • texte de la version mise à jour
  • ECMAScript 5 (liens ajoutés)
Microsoft réalise une enquête en ligne pour comprendre votre opinion sur le site Web de. Si vous choisissez de participer, l’enquête en ligne vous sera présentée lorsque vous quitterez le site Web de.

Souhaitez-vous y participer ?