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:
- Partie 1 - Introduction
- Partie 2 - Travailler avec HTML et CSS
- Partie 3 - Débogage de script JavaScript
- Partie 4 - Profilage de script JavaScript
- Partie 5 – Performance et analyse des échanges réseaux
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 
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 
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» :
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):
Ajoutez des éléments et/ou des sélecteurs (et leur couleur) et ils seront encadrés dans la fenêtre du navigateur:
Par exemple, les deux sélecteurs actifs ci-dessus sélectionnent toutes les images et liens non-locaux:
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 
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 
Vous pouvez également afficher le DOM, soit pour toute la page ou pour juste un élément via la menu Affichage -> 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 
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:
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 :
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.
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 :
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.
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:
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:
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.
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.
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":
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
Si 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