次の方法で共有


Internet Explorer 9 Les outils de développement en détails - Partie 2 : Html & CSS

Ce billet est le second d'une série sur les Developer Tools inclus avec Internet Explorer (et ce depuis la version 8) visant à vous aider à améliorer vos sites Web grâce à des outils d'examen de contenu, à diagnostiquer des problèmes, à améliorer les performances, et bien plus encore:

 Si vous ne connaissez pas les outils de développement (encore appelés F12 Tools ou encore Developer Tools), je vous recommande commencer par lire le billet d'introduction.

Travailler avec HTML et CSS

Une des principales fonctionnalités des outils de développement (appuyez sur la touche F12 ou par le menu Outils -> F12 Developer Tools) est la manipulation de la structure et du design des pages. Habituellement, vous commencerez par sélectionner un élément en particulier. Vous pouvez parcourir le contenu de l'onglet HTML pour trouver le contenu recherché manuellement, mais il existe trois autres façons de faire :

Sélectionner l'élément par clic

Très simple. Il suffit de cliquer sur la flèche Select Element by Click (ou CTRL + B) et de cliquer sur l'élément que vous souhaitez. L'élément sera mis en évidence la page et sélectionné dans l'affichage HTML.

Find Element by Click

Zone de recherche

Ensuite il y a la zone de recherche, disponible sur tous les onglets sauf Console. Entrez le texte à rechercher et, si des correspondances sont trouvées, elles seront mises en évidence dans le volet principal et les boutons précédent / suivant Search Forward/Back seront activés.

Sur l'onglet HTML, la recherche supporte les sélecteurs qui sont utilisés par les feuilles de style CSS (et les sélecteurs jQuery de base), mais vous devez précéder votre expression d'un "@", sans cela elle sera considérée comme une recherche littérale.

Par exemple, une recherche de "@.navigation-list li" sur mon blog retourne les éléments li auxquels ont été associés la classe CSS «navigation-list» :

Search

Search Results

Les éléments correspondants sont mis en évidence dans l'onglet HTML (ou CSS) et la première occurrence encadrée dans la fenêtre du navigateur..

Appliquer un contour aux éléments

Si vous souhaitez parcourir rapidement le contenu d'une page pour trouver une catégorie d'éléments, utilisez la fonctionnalité Outils -> "Appliquer un contour aux éléments..." (CTRL + O):

Outline Elements

Ajoutez des éléments et/ou des sélecteurs (et leur couleur) et ils seront encadrés dans la fenêtre du navigateur:

Outline Elements Dialog

Par exemple, les deux sélecteurs actifs ci-dessus sélectionnent toutes les images et liens non-locaux:

Effect of Outline Elements

Contrairement à la recherche, la fonction de contour des éléments ne s'applique que sur fenêtre principale du navigateur, et ne met pas en avant les occurrences dans l'onglet HTML. Cependant, vos sélections seront mise en évidence sur toutes les pages que vous visitez tan que les outils de développement seront ouverts.

Travailler avec HTML

Maintenant que vous avez trouvé le contenu recherché, l'onglet HTML vous permettra de visualiser, modifier et enregistrer les modifications à votre page.

Tout attribut existant peut être édité, et de nouveaux peuvent êtres ajoutés par un clic droit sur l'élément et en choisissant "Ajouter un attribut". Vous pouvez également modifier le code HTML directement en cliquant sur Modifier Edit (ALT+E).

HTML tab

Les modifications de contenu ne modifient que votre version locale, vous aurez donc besoin de mettre à jour votre site manuellement. Vous pouvez cliquer sur Enregistrer Save pour sauver les fichiers HTML ou CSS, mais un moyen pratique d'isoler un changement est la fonction Source de l'élément avec le style Element Source with Style (CTRL+T). Il affiche le balisage html de cet élément, ainsi que tous les styles CSS appliqués.

Vous pouvez également afficher le DOM, soit pour toute la page ou pour juste un élément via la menu Affichage -> Source:

View Source

Dans le prochaine billet sur CSS, nous verrons le contenu affiché dans les volets sur le côté droit de l'onglet HTML, mais il faut noter que tous les sous-volets de la partie droite traite du CSS, le sous-volet Attributs s'applique à la fois au CSS et aux attributs HTML.

Remarque: L'affichage HTML reflète les attributs modifiés et édités du HTML, mais si un script modifie la structure de page, il faut rafraîchir l'onglet HTML en cliquant sur ​​Actualiser Refresh ou en appuyant sur la touche F5 (assurez-vous que l'onglet HTML a le focus, sinon la page principale va se rafraîchir, et vous perdrez toutes les modifications que vous avez faites.)

Travailler avec CSS

Maintenant que vous savez comment travailler avec la structure HTML d'un page, concentrons-nous sur le style avec le CSS. Vous trouverez les outils de développements parfaits pour diagnostiquer les problèmes de style (par exemple «Pourquoi ce texte en est rouge ?").

Lorsque'un élément est sélectionné dans l'onglet HTML, le volet de droite affiche la vue Style par défaut:

HTML Tab - Style

Cette vue affiche tous les styles qui s'appliquent à l'élément courant, organisés par type. Vous pouvez voir quels attributs s'appliquent et ceux qui ne sont pas utilisés (qui apparaissent barrés) car ils sont surchargés par un autre style. Cochez la case à côté de chaque style pour voir le résultat de son activation / désactivation.

Suivi des styles a une approche différente, avec un affichage par attribut plutôt que par style. C'est sans aucun doute le moyen de plus rapide de découvrir pourquoi un style particulier est utilisé. Par exemple, pour trouver pourquoi un texte est d'une certaine couleur, développez l'attribut de couleur et vous verrez les différents styles qui définissent la couleur, et vous trouverez celui qui s'applique :

HTML Tab - Trace Styles

Comme avec Style, vous pouvez vérifier l'effet d'un style en cochant / décochant les cases de chaque style.

Disposition est une représentation graphique de la taille, de l'offset, des marges, bordures, et des marges internes pour un élément donné. Cette représentation est modifiable, vous pouvez donc rapidement altérer la disposition.

HTML tab - Layout

Attributs affiche tous les attributs, HTML et CSS, pour l'élément sélectionné. Vous pouvez modifier et ajouter les attributs que vous le souhaitez, avec une liste déroulante des attributs pour vous aider à la saisie :

HTML Tab - Attributes

Vous pouvez aussi cliquer sur "Afficher les propriétés en lecture seule" pour voir tous les attributs de cet élément. Les attributs en lecture seule apparaissent grisés.

L'onglet CSS

L'onglet CSS affiche les classes CSS et styles utilisés, vous permettant de visualiser un fichier CSS spécifique utilisé par la page, de faire des changements, et d'effectuer des recherches.

Choisissez parmi les feuilles de style disponibles pour la page, et vous verrez sont contenu.

CSS Tab - Selecting Stylesheet

Vous pouvez modifier les styles directement depuis cet onglet, ou encore avec un clic droit, créer ou supprimer des règles et des attributs:

CSS Tab - Modifying CSS

Et comme décrit précédemment, vous pouvez également utiliser la boîte de recherche pour trouver un contenu spécifique dans la feuille de style sélectionnée.

Test du navigateur

La principale préoccupation pour beaucoup, surtout lorsqu'on utilise HTML5 et CSS3, est de s'assurer du bon fonctionnement d'un site dans d'autres navigateurs qui pourrait être utilisés pour accéder à ce site.

Une bonne façon de teste cela est d'utiliser les outils de développement pour simuler un autre navigateur ou une autre version. Sur la partie droite du menu, vous verrez des options pour changer le Mode de navigation et Mode de document:

Menu

Il est important de connaître la différence entre ceux-ci ...

Mode de navigation

Quand le Mode de navigations définit le mode du document (nous y reviendrons dans un instant), il est encore plus important de modifier également le User-Agent (UA string) envoyé par IE au serveur web.

Browser Mode

Par exemple, vous pourriez faire croire au site que vous utilisez Internet Explorer 7. Si le serveur gère ce cas (via une logique conditionnelle), il pourrait vous envoyer un contenu différent, pensé pour IE7. Bien sûr, pour tout le contenu statique, ce paramètre n'aura aucun effet sur ce qui est envoyé par le serveur.

Gardez à l'esprit que le contenu lui-même pourrait avoir une logique dépendante du user-agent, comme des comportements spécifiques à certains navigateurs ou versions (ex: "Si Internet Explorer < 8, fais ceci, sinon ...»)

Comme mentionné précédemment, le Mode de navigation fixe également le mode de document à la valeur par défaut pour ce navigateur (par exemple IE7 mode standard pour IE7), mais vous pouvez définir ces valeurs indépendamment (par exemple IE9 en Mode de navigation et IE8 en mode de document).

Mode de document

Contrairement au mode de navigation, le mode de document change la façon dont le contenu est traité localement par Internet Explorer.

Document Mode

En d'autres termes, indépendamment de ce que le site dit au serveur via le Mode de navigation, le mode de document fixe la manière dont IE traite et affiche le contenu reçu. Par exemple, si vous travaillez dans IE9 sur une page en utilisant les caractéristiques HTML5, vous pouvez passer en mode IE7 ou IE8 et voir comment ce même contenu serait rendu sous ces versions.

La meilleure façon d'apprendre ces différences est de les essayer, surtout sur une page qui utilise des fonctionnalités non prises en charge dans une version antérieure d'Internet Explorer ou qui contient une logique dépendante du user Agent.

Pour plus de détails sur tout cela, allez voir les articles Tester les modes de navigation et de document avec les outils de développement et Définition de la compatibilité des documents sur ​​MSDN.

Changer le User Agent

Si vous voulez changer la chaîne UA (User Agent) en plus des choix de mode de navigation, allez dans le menu Outils -> "Modifier la chaine de l'agent utilisateur":

Change user agent string

Vous pouvez choisir l'un des user agent inclus ou définir le votre en cliquant sur "Personnaliser ...". Dans l'image ci-dessus, il y a une chaîne User Agent personnalisée pour un appareil mobile.

Rappelez-vous que cela n'a aucun effet sur le mode de document utilisé pour traiter le contenu, il s'agit seulement d'une information transmise au serveur sur un navigateur et une version particulière.

Expression Web SuperPreview

Expression Web SuperPreviewSi vous pouvez changer la chaîne User Agent comme vous le souhaitez, il peut être utile de visualiser et de comparer la façon dont une page est réellement affichée dans différents navigateurs. Plutôt que d'avoir tous ces navigateurs (et leurs différentes versions) à votre disposition, Expression Web SuperPreview peut vous aider.

Il y a une version d'essai et une version complète qui offre un rendu des Navigateurs à distance, permettant le rendu des pages sur des navigateurs que vous n'avez pas (par exemple Safari 5 sur un Mac).

A suivre : Partie 3

Dans le prochain article, nous allons nous intéresser au code JavaScript, en utilisant les onglets Console et Script des outils de développements pour déboguer vos scripts.

 


Ce billet est une adaptation du post de Chris Bowen (Principal Developer Evangelist for Microsoft) : Internet Explorer 9 Developer Tools Deep Dive – Part 2: HTML & CSS

Comments

  • Anonymous
    January 31, 2013
    Comment forcer IE9 à utiliser le mode navigateur IE9 par défaut