MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Examiner et modifier le CSS

Il est possible d'examiner et d'éditer le CSS via le panneau CSS.

Examiner les règles CSS

L'onglet des règles liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :

Si l'option « Afficher les styles du navigateur » est activée dans les options des outils de développement, l’onglet listera les user-agent styles (les styles appliqués par le navigateur). Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans l'onglet « Calculé ».

L'onglet des règles affiche tous les styles de l'utilisateur, cela inclut les styles qui ne sont pas supportés ou qui sont invalides. Cela peut servir à savoir pourquoi certains styles ne sont pas appliqués :

Affichage des règles

Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type propriété:valeur; :

  • Afficher en surbrillance les éléments correspondants: à côté du sélecteur, se trouve une icône en forme de cible. Cliquer sur celle-ci affichera tous les noeuds de la page qui correspondent à ce sélecteur.
  • Déclaration surchargée: les styles qui sont surchargés par des règles suivantes sont affichés "barrés". Voir déclarations surchargées
  • Afficher la cascade: à côté des déclarations surchargées, se trouve une icône en forme de loupe. Cliquer sur celle-ci affiche la cascade de règles contenant la propriété surchargée. Voir déclarations surchargées
  • Activer/Désactiver: Lors du survol d'une déclaration, une case à cocher apparait à côté de cette déclaration. Cette case sert à activer.désactiver la règle.
  • Nom de fichier et numéro de ligne: dans la partie droite, on retrouve un lien vers la règle. Voir lien vers le fichier CSS.

Depuis Firefox 52, si un élément à une déclaration display: grid, alors une icône en forme de grille () apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir examiner les  grilles pour plus d'informations.

Les user-agent styles sont affichés sur un fond diffèrent et le lien vers la feuille de style contient le préfixe (user agent) :

element {} rule

La règle élément {} en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut style.

A partir de Firefox 52, cette règle obtient sa propre icône de cible (). Cela permet d'affiche facilement l'élément sélectionné de la page.

Filtrer les règles

La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :

Écrire une expression dans cette boite a pour effet que :

  • Toute règle ne contenant pas la chaine caractère tapée est cachée.
  • Toute déclaration contenant la chaine tapée est mise en surbrillance

Cliquer sur l'icône en forme de "X" à la fin de la bote supprime le filtre.

Si l'onglet des règles est sélectionné, il est possible d'appuyer sur Ctrl / Cmd + F pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur Esc pour supprimer le filtre.

Recherche stricte

Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant border-bottom-color et background-color en plus de color :

Si l'expression de recherche est encadré ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :

Étendre les propriétées raccourcies

Les propriétées raccourcies peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.

Afficher les pseudo-elements

L'onglet des règles peut afficher les pseudo-éléments suivant, si ceux ci sont appliqués à l'élément sélectioné :

::after
::backdrop

::before
::first-letter
::first-line
::selection
:-moz-color-swatch
:-moz-number-spin-box
:-moz-number-spin-down
:-moz-number-spin-up
:-moz-number-text
:-moz-number-wrapper
:-moz-placeholder
:-moz-progress-bar
:-moz-range-progress
:-moz-range-thumb
:-moz-range-track
:-moz-selection

Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :

Cliquer sur cette icône affiche les pseudo-éléments :

Activer :hover, :active, :focus

Il y a un bouton à droite de la boite de recherche :

Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes :hover, :active et :focus pour l'élément sélectionné :

Cette fonctionnalité est également accessible depuis le menu popup de l'onglet HTML.

Si une de ces classes est activé pour un noeud, un point orage apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :

Lien vers le fichier CSS

En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans l'éditeur de style.

Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectioner "Copier l'adresse".

L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les options de l'éditeur de style, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la documentation de l'éditeur de style.

Obtenir de l'aide sur les propriétés CSS

Faire un clic droit sur une propriété CSS dans l'onglet des règles affiche le menu contextuel. Dan ce menu, il y a une option "Afficher la documentation MDN", cela affiche une popup d'aide :

Il est à noter que pour l'instant les informations ne sont pas mises en caches et doivent donc être récupérés depuis MDN (connexion réseau nécessaire).

Déclarations surchargées

Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".

Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.

Cela permet de savoir quelle règle surcharge quelle déclaration :

Examiner le CSS calculé

Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir l'onglet « Calculé ». Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :

Il est possible d'utiliser Tab pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant F1 . Cela affiche la page MDN en référence à la propriété.

Cliquer sur la flèche à côté du nom d'une propriété (ou presser Entrée ou Espace si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :

Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».

Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.

Dans l'onglet des règles calculé,  il est possible d'utiliser le raccourci clavier Ctrl / Cmd + F pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec Esc.

Modifier les règles

Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec Tab, et de les éditer avec Entrée ou Espace. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).

Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur Tab  accepte la suggestion sélectionnée, et Flèche Haut et Flèche Bas permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :

Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.

Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.

Il est possible d'utiliser les flèches pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle. La flèche haut augmentera les valeurs de 1. La flèche bas diminuera les valeurs de 1. Maj + flèche augmentera/diminuera de 10, Alt+flèche de 0.1 et maj + Page haut/bas de 100.

Les modifications apportées dans l'onglet des règles sont visibles dans l'Éditeur de Style, et vice versa.

A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :

Ajouter de nouvelles règles

Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.

Il existe également un bouton pour faire la même chose :

Copie une règle

Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :

  • Copier la règle
  • Copier le sélecteur
  • Copier la déclaration de la propriété
  • Copier le nom de la propriété
  • Copier la valeur de la propriété

Voir aussi

  • La liste complète des raccourcis clavier de l'Inspecteur.
  • L'inspecteur inclut également divers outils pour travailler avec des fonctionnalités CSS spécifiques telles que les couleurs, les polices et les animations. Pour en apprendre plus sur ces fonctionnalités, voir les guides pratiques.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : maximelore, SphinxKnight, teoli
 Dernière mise à jour par : maximelore,