Comment activer la prise en charge des normes

Les versions récentes de Windows Internet Explorer prennent désormais en charge différentes normes établies et nouvelles, telles que HTML5, CSS3, SVG, etc. Pour afficher les pages Web qui incorporent des fonctionnalités issues de ces normes et d’autres normes modernes, les pages Web doivent être affichées en mode normes.

Vous allez découvrir ici les modes de document, qui contrôlent le mode d’affichage d’une page Web dans Internet Explorer. Vous allez également apprendre à activer la prise en charge des normes ainsi qu’à identifier et résoudre les problèmes liés aux modes de document.

Introduction

Pour créer une page Web qui s’affiche en mode standard lorsque vous la consultez via Internet Explorer, utilisez la directive relative au type de document HTML5, comme le montre l’exemple de code suivant :


<!DOCTYPE html>
<html>
<head>
  <title>Enabling Standards Support</title>
</head>
<body>
  <p>
     Because this webpage uses the HTML5 document 
     type, it is displayed in IE9 Standards mode.
  </p>
</body>


La directive relative au type de document HTML5 indique à un navigateur Web d’afficher les pages Web en mode standard. Plus précisément, la !DOCTYPE directive dans cet exemple spécifie un type de document basé sur les normes. Par conséquent, Internet Explorer affiche cette page Web en mode standard. Cela permet une prise en charge maximale des normes établies et nouvelles, et l’affichage par Internet Explorer de pages Web incorporant des fonctions telles que celles présentées dans la liste (non exhaustive) suivante :

Si votre page Web utilise une ou plusieurs fonctionnalités qui nécessitent le mode standard et que vous n’incluez pas de !DOCTYPE directive conforme aux normes, le comportement obtenu dépend de la version d’Internet Explorer utilisée pour afficher la page Web :

  • Internet Explorer 10 affiche la page Web en mode Quirks, mais prend en charge les fonctionnalités définies dans des normes modernes, sauf si la page est affichée dans un mode de document hérité.
  • Windows Internet Explorer 9, Windows Internet Explorer 8, Windows Internet Explorer 7 et Microsoft Internet Explorer 6 affichent la page Web comme pour une version encore plus ancienne du navigateur.
  • Les applications du Windows Store en JavaScript affichent la page Web en mode standard. Les applications du Windows Store en JavaScript ne prennent pas en charge les modes de document hérités.

Comme vous pouvez l’imaginer, cela peut aboutir à des résultats inattendus. Toutefois, si votre page Web contient une directive relative au type de document conforme aux normes (telle que l’exemple HTML5 présenté ci-dessus), toutes les versions d’Internet Explorer affichent la page Web en mode standard. Cela permet ensuite d’assurer la prise en charge maximale des normes disponibles pour cette version du navigateur. Pour plus d’informations, voir Définition de la compatibilité des documents.

Présentation des modes de document

La !DOCTYPE directive contrôle le mode de document d’une page Web. Si votre page Web ne comprend pas de !DOCTYPE directive ou si elle indique un type de document en mode autre que standard, Internet Explorer affiche cette page en mode IE5 (Quirks). Si tel est le cas, Internet Explorer ignore les fonctionnalités de votre page Web qui requièrent le mode standard.

L’image suivante présente deux pages Web, contenant chacune trois objets.

Image présentant une page Web affichée en mode Normes IE9, et la même page Web affichée en mode IE5 (Quirks).

Bien que les images soient similaires, des différences sont notables. La page Web de gauche, par exemple, affiche des objets en utilisant des coins arrondis, tandis que celle de droite utilise les coins à angle droit traditionnels. De plus, chaque page Web positionne et dimensionne les objets différemment.

Malgré ces différences, chaque page utilise quasiment le même balisage. L’exemple de code suivant présente le balisage de la page Web de gauche, celle qui s’affiche en mode Normes IE9.


<!DOCTYPE html>
<html>
  <head>
    <title>IE9 Standards Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>


L’exemple de code suivant présente le balisage de l’image de droite, celle qui s’affiche en mode IE5.


<html>
  <head>
    <title>IE5 Quirks Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>


Si vous comparez les deux exemples, vous verrez que la seule différence entre chaque page, en dehors de l’élément title, est que le premier exemple utilise une !DOCTYPE directive pour déclarer un type de document normalisé. Le deuxième exemple ne déclare aucun type de document.

Vous remarquerez aussi que chaque page contient un style element qui précise l’attribut border-radius afin de définir des coins arrondis pour chaque élément div de la page Web. L’attribut border-radius est défini dans le cadre de la spécification CSS3 et n’est par conséquent pris en charge que sur les pages Web affichées en mode normes.

Cependant, la page Web de droite (deuxième exemple) ne déclare pas de type de document. Par conséquent, Internet Explorer affiche la page Web en mode IE5, soit le mode de document conçu pour ne prendre en charge que les fonctionnalités prises en charge dans des versions antérieures du navigateur.

La !DOCTYPE directive est un élément primordial dont vous devez tenir compte pour les sites Web normalisés (et nécessaire afin de valider une page Web). Pour obtenir de meilleurs résultats, les sites Web publics doivent inclure des !DOCTYPE directives qui activent le mode standard, comme le type de document HTML5 présenté dans l’exemple qui suit.


<!DOCTYPE html>


Pour plus d’informations, voir Définition de la compatibilité des documents.

Dans cette section

RubriqueDescription

Résolution des problèmes liés au mode de document

Cette rubrique vous permet de comprendre comment utiliser les outils de développement F12 pour rechercher et identifier un problème relatif au type de document d’une page Web.

 

 

 

Afficher:
© 2015 Microsoft