Inspecter un élément dans une page Web

« Inspecter » est l'une des fonctions les plus utiles de votre navigateur : elle affiche le code HTML et les styles CSS de n'importe quel morceau de page, et permet de les modifier à l'écran sans rien casser. C'est l'outil de base pour trouver quelle classe CSS cibler quand vous personnalisez un site WordPress ou Divi. Voici comment l'ouvrir, le lire et vous en servir, de la recherche d'une classe jusqu'à l'application du CSS sur votre site.

La méthode la plus simple : faites un clic droit sur l'élément qui vous intéresse (un titre, un bouton, une image), puis choisissez Inspecter. Le panneau des outils de développement s'ouvre et la ligne de code correspondant à cet élément est déjà sélectionnée.

Chrome, Edge et Brave reposent tous les trois sur Chromium et partagent les mêmes outils de développement. Firefox a les siens, très proches dans leur principe.

Le mode sélection est pratique quand l'élément est difficile à viser au clic droit (un menu déroulant, un élément superposé) : survolez la page, chaque élément se surligne, et un clic le sélectionne dans le code.

Sur Safari (Mac), les outils sont masqués par défaut : ouvrez Safari > Réglages, section Avancés, et cochez Afficher les fonctionnalités pour les développeurs web. Le clic droit propose ensuite d'inspecter l'élément.

Dans Chrome, le panneau s'appelle Éléments ; dans Firefox, Inspecteur. Il se divise en deux zones :

• l'arbre HTML : la structure de la page, balise par balise. Survoler une ligne surligne l'élément dans la page, avec ses marges et ses dimensions ;

• les styles : toutes les règles CSS qui s'appliquent à l'élément sélectionné, de la plus spécifique (en haut) à la plus générale (en bas). Une déclaration barrée est écrasée par une autre règle plus prioritaire.

L'onglet Calculés de Chrome montre la valeur finale de chaque propriété (la couleur, la taille de police ou la largeur réellement appliquées) et le schéma des marges, bordures et espacements internes. C'est là qu'il faut regarder quand vous ne comprenez pas d'où vient un espace.

Pour modifier un élément en CSS, il faut le désigner par un sélecteur. Dans l'arbre HTML, repérez les attributs class="..." et id="..." de la ligne sélectionnée. Par exemple, un bouton de l'éditeur de blocs de WordPress porte la classe wp-block-button__link.

Vous pouvez aussi copier un sélecteur tout fait : clic droit sur la ligne de code, puis Copier > Copier le selector dans Chrome (libellé tel quel en français), ou Copier > Le sélecteur CSS dans Firefox.

Dans la zone des styles, cliquez sur une valeur (une couleur, une taille) pour la modifier : la page change instantanément. Vous pouvez aussi :

• ajouter une déclaration dans la règle tout en haut, qui ne concerne que l'élément sélectionné ;

• décocher une déclaration pour voir ce qui se passe sans elle ;

• dans Chrome, ajouter une classe avec le bouton .cls, ou forcer l'état survol avec :hov pour régler l'apparence d'un bouton au passage de la souris ;

• masquer un élément (touche H dans Chrome) ou le supprimer de l'affichage, pour vérifier ce qui se trouve dessous.

Rien de tout cela n'est enregistré sur votre site : vos modifications ne vivent que dans votre navigateur et disparaissent au rechargement de la page. Vous pouvez donc tester sans risque, mais notez ce qui fonctionne avant de recharger. Chrome propose aussi un panneau Modifications qui récapitule ce que vous avez changé.

Une fois le bon réglage trouvé, recopiez la règle complète (le sélecteur et les déclarations) dans l'endroit prévu par votre site :

• WordPress avec un thème classique : Apparence > Personnaliser > CSS additionnel ;

• WordPress avec un thème par blocs : Apparence > Éditeur > Styles, puis le menu à trois points et CSS additionnel (emplacement en vigueur depuis WordPress 6.9) ;

• Divi : plusieurs emplacements sont possibles, détaillés dans ajouter ou modifier du CSS personnalisé dans Divi ;

• thème enfant : le fichier style.css, si vous en avez un.

Si la modification n'apparaît pas, rechargez la page en forçant le navigateur à tout relire (Ctrl+F5, ou Cmd+Maj+R sur Mac) et videz le cache de votre plugin de cache s'il y en a un. Pour les bases du langage, voir la page CSS.

Le mode responsive affiche la page à la taille d'un mobile ou d'une tablette. Dans Chrome, cliquez sur l'icône Activer/Désactiver la barre d'outils de l'appareil en haut du panneau ; dans Firefox, utilisez Ctrl+Maj+M (Cmd+Option+M sur Mac). Google le présente comme une approximation : vérifiez toujours le résultat sur un vrai téléphone.

L'onglet Console affiche les erreurs de la page en rouge : script qui plante, fichier introuvable, ressource chargée en http:// sur une page en https://. Ce dernier cas, le « contenu mixte », est expliqué avec un exemple dans l'erreur mixed content d'un widget Amazon.

La documentation officielle détaille chaque fonction : outils de développement de Chrome et inspecteur de Firefox. Retrouvez d'autres astuces dans la rubrique Navigateurs. La formation Intégration Web avec Divi se sert de l'inspecteur dans de nombreuses leçons pour retrouver les classes et les dimensions à reproduire.