Il est possible d'examiner et d'éditer le CSS via le panneau CSS.
Examiner les règles CSS
Le panneau CSS permet d’examiner et de modifier 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é ».
Affichage des règles
Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclaration de type propriété:valeur; :
Les règles ayant été supplantées par d'autres règles sont automatiquement barrées. Une case à cocher apparaît au survol de chaque déclaration, elle permet d'activer/désactiver la règle survolée.
Les user-agent styles sont affichés sur un fond gris et le lien vers la feuille de style contient le préfixe (user agent) :
Depuis Firefox 34, survoler un sélecteur, mettra en surbrillance tout les élément de la page qui correspondent à ce sélecteur :
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.
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.
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é :
Cliquer sur la flèche à gauche du nom de la propriété affiche la règle qui a fourni cette valeur ainsi qu'un lien vers le fichier CSS :
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.
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. 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) et entrer une propriété et une valeur valide. Si la valeur est invalide ou que la propriété n'est pas reconnue, une icône d'alerte jaune apparaîtra alors à la fin de la ligne.
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érique 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.
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é.
Voir aussi
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.