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

Dans la rubrique Activation de la prise en charge des normes, vous avez appris que le type de document d’une page Web contrôle les fonctionnalités prises en charge par la page Web. Afin que Windows Internet Explorer et d’autres navigateurs modernes puissent activer toutes les fonctionnalités prises en charge, les pages Web doivent être en mode standard. Placez vos pages Web en mode standard en déclarant un type de document basé sur les normes, comme illustré dans l’exemple de code suivant.


<!DOCTYPE html>


Si vos pages Web ne déclarent pas un type de document basé sur les normes, les fonctionnalités qui nécessitent la prise en charge de normes ne seront pas affichées avec Internet Explorer. Si une page Web ne s’affiche pas correctement, vous pouvez utiliser les outils du développeur F12 pour résoudre le problème. Dans de nombreux cas, de tels problèmes peuvent être résolus en s’assurant que la page Web utilise une directive !DOCTYPE pour déclarer un type de document basé sur les normes.

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.

La rubrique Activation de la prise en charge des normes permet de comparer deux pages Web, y compris une page avec une autre page Web similaire se trouvant dans l’image suivante.

Une page Web est affichée en mode IE5 Quirks

La conception de cette page Web inclut l’attribut border-radius, un attribut CSS3 (Cascading Style Sheets, Level 3) qui afficher les angles arrondis. Cependant dans l’exemple en cours, les angles des objets sont affichés avec des angles carrés classiques. Cette situation se produit car Internet Explorer ignore les propriétés CSS qui ne sont pas prises en charge par le mode de document utilisé pour afficher une page Web.

Puisque IE5 (Quirks) ne prend pas en charge la propriété border-radius, Internet Explorer ignore cette dernière lorsque les pages Web s’affichent dans ce mode de document.

Grâce à l’utilisation des outils F12, vous pouvez explorer une page Web affichée dans Internet Explorer. Ainsi, vous pouvez identifier les problèmes et les résoudre comme pour les angles carrés affichés dans l’image précédente. Cette rubrique montre une méthode pour identifier des problèmes similaires et inclut les informations suivantes.

Vérification des valeurs d’attribut CSS

Pour vérifier les valeurs d’attributs CSS d’un objet dans votre page Web, procédez comme suit.

  1. Appuyez sur la touche F12 pour ouvrir les outils de développement F12.

    Appuyez sur la touche F12 pour ouvrir les outils de développement.
  2. Cliquez sur le bouton Sélectionner l’élément par clic, puis cliquez sur l’objet contenant les propriétés CSS à vérifier.

    Utilisez l’outil Sélectionner l’élément par clic ou l’arborescence HTML pour sélectionner l’objet que vous souhaitez examiner.
  3. Cliquez sur le bouton Suivre les styles et examinez les attributs des propriétés qui vous intéressent.

    L’outil Suivre les styles affiche les attributs CSS pour l’objet sélectionné dans la page Web.

Dans cet exemple, vous recherchez les valeurs des attributs enfants de l’attribut border-radius, en particulier border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius et border-top-right-radius. Notez cependant que pour cet exemple, ces attributs ne sont pas affichés.

Cette situation se produit car la page Web est affichée en mode IE5. Dans Windows Internet Explorer 9, la propriété border-radius est uniquement prise en charge en mode Normes IE9. Étant donné que le mode IE5 ne prend pas en charge la propriété border-radius, Internet Explorer ignore cette propriété lors de l’affichage des attributs CSS.

La section suivante montre comment effectuer cette vérification en modifiant le mode de document actif de la page Web.

Affichage des pages Web dans des modes de document différents

Pour utiliser les outils F12 afin d’afficher des pages Web dans des modes de document différents, procédez comme suit.

  1. Si les outils F12 ne sont pas déjà ouverts, appuyez sur F12 pour les ouvrir. Notez que le mode de document actif est affiché à droite de la barre de menus de la fenêtre d’outils F12.

    Le mode de document de la page Web est affiché dans la partie supérieure de la fenêtre des outils de développement F12
  2. Lorsque vous cliquez sur le bouton de menu Mode de document, un menu affiche les modes de document supplémentaires qui peuvent être utilisés pour afficher votre page Web.

    Cliquez sur le bouton de mode de document pour afficher un menu des modes de document supplémentaires pour votre page Web.
  3. Cliquez sur l’option Normes d’Internet Explorer 9 du menu pour afficher votre page Web en mode IE9. Si vous avez activé le suivi des attributs de style pour l’objet préalablement sélectionné, les attributs enfants border-radius apparaissent désormais avec les autres attributs CSS.

    La commande des normes d’Internet Explorer 9 affiche une page Web en mode Normes IE9.
  4. Lorsque la page Web s’affiche dans le mode de document approprié, elle apparaît comme prévue et les éléments div s’affichent avec des angles arrondis.

    Les angles sont arrondis lorsque la page Web s’affiche en mode Normes IE9.

N’oubliez pas que les outils F12 modifient uniquement la manière dont la page Web est actuellement affichée par Internet Explorer. Elles ne modifient pas le code source d’origine de la page Web.

S’il s’agit d’un problème de page Web de production, modifiez le balisage sous-jacent pour inclure la directive !DOCTYPE qui indique un type de document basé sur les normes, comme indiqué dans l’exemple de code suivant.


<!DOCTYPE html>


Remarque  Vous pouvez également utiliser un en-tête "compatible X-UA" pour spécifier le mode de document d’une page Web. Pour plus d’informations, voir la rubrique Définition de la compatibilité des documents.

Les outils F12 vous permettent d’identifier rapidement les problèmes liés à vos pages Web et de les résoudre. Dans cet exemple, vous les avez utilisées pour déterminer un problème lié au mode de document d’une page Web. Pour plus d’informations sur les outils F12, voir la rubrique Débogage et dépannage de votre page Web.

Rubriques connexes

Activation de la prise en charge des normes

 

 

Afficher:
© 2014 Microsoft