Documentation de référence sur les fonctionnalités CSS

Découvrez de nouveaux workflows dans cette référence complète des fonctionnalités des outils pour les développeurs Chrome liées à l'affichage et à la modification du CSS.

Pour en savoir plus, consultez Afficher et modifier le CSS.

Sélectionnez un élément

Le panneau Éléments de DevTools vous permet d'afficher ou de modifier le CSS d'un élément à la fois.

Sur la capture d'écran, l'élément h1 mis en surbrillance en bleu dans l'arborescence DOM est l'élément sélectionné. Sur la droite, les styles de l'élément sont affichés dans l'onglet Styles. À gauche, l'élément est mis en surbrillance dans le viewport, mais uniquement parce que la souris est pointée dessus dans l'arborescence DOM.

Pour obtenir un tutoriel, consultez Afficher le CSS d'un élément.

Vous pouvez sélectionner un élément de plusieurs façons :

• Dans votre vue, effectuez un clic droit sur l'élément, puis sélectionnez Inspecter.
• Dans DevTools, cliquez sur Sélectionner un élément ou appuyez sur Cmd+Maj+C (Mac) ou Ctrl+Maj+C (Windows, Linux), puis cliquez sur l'élément dans le viewport.
• Dans les outils de développement, cliquez sur l'élément dans l'arborescence DOM.
• Dans DevTools, exécutez une requête telle que document.querySelector('p') dans la console, effectuez un clic droit sur le résultat, puis sélectionnez Afficher dans le panneau "Éléments".

Afficher le CSS

Utilisez les onglets Éléments > Styles et Calculé pour afficher les règles CSS et diagnostiquer les problèmes liés au CSS.

Naviguer avec des liens

L'onglet Styles affiche des liens vers différents emplacements, y compris, mais sans s'y limiter :

• À côté des règles CSS, des feuilles de style et des sources CSS. Ces liens ouvrent le panneau Sources. Si la feuille de style est minifiée, consultez Rendre un fichier minifié lisible.
• Dans les sections Hérité de, aux éléments parents.
• Dans les appels var(), aux déclarations de propriété personnalisée.
• Dans les propriétés abrégées animation, à @keyframes.
• Liens En savoir plus dans les info-bulles de la documentation
• et plus encore.

En voici quelques-uns :

Les liens peuvent être stylisés différemment. Si vous n'êtes pas sûr qu'un élément soit un lien, essayez de cliquer dessus pour le savoir.

Afficher des info-bulles avec la documentation CSS, la spécificité et les valeurs de propriété personnalisée

Éléments > Styles affiche des info-bulles contenant des informations utiles lorsque vous pointez sur des éléments spécifiques.

Consulter la documentation CSS

Pour afficher une info-bulle contenant une courte description CSS, pointez sur le nom de la propriété dans l'onglet Styles.

Cliquez sur En savoir plus pour accéder à la documentation de référence CSS MDN sur cette propriété.

Pour désactiver les info-bulles, cochez Ne pas afficher.

Pour les réactiver, cochez Settings > Preferences > Elements > Show CSS documentation tooltip (Paramètres > Préférences > Éléments > Afficher l'info-bulle de la documentation CSS).

Spécificité du sélecteur de vue

Pointez sur un sélecteur pour afficher une info-bulle indiquant son poids en spécificité.

Afficher les valeurs des propriétés personnalisées

Pointez sur un --custom-property pour afficher sa valeur dans une info-bulle.

Afficher les CSS non valides, ignorés, inactifs et autres

L'onglet Styles reconnaît de nombreux types de problèmes CSS et les met en évidence de différentes manières.

Consultez Comprendre le CSS dans l'onglet "Styles".

Afficher uniquement le CSS réellement appliqué à un élément

L'onglet Styles affiche toutes les règles qui s'appliquent à un élément, y compris les déclarations qui ont été remplacées. Lorsque vous n'êtes pas intéressé par les déclarations écrasées, utilisez l'onglet Computed (Calculé) pour afficher uniquement le CSS qui est réellement appliqué à un élément.

1. Sélectionnez un élément.
2. Accédez à l'onglet Calculé du panneau Éléments.

Cochez la case Tout afficher pour afficher toutes les propriétés.

Consultez Comprendre le CSS dans l'onglet "Calculé".

Afficher les propriétés CSS par ordre alphabétique

Utilisez l'onglet Calculé. Consultez Afficher uniquement le CSS réellement appliqué à un élément.

Afficher les propriétés CSS héritées

Cochez la case Tout afficher dans l'onglet Calculé. Consultez Afficher uniquement le CSS réellement appliqué à un élément.

Vous pouvez également faire défiler l'onglet Styles et rechercher les sections nommées Inherited from <element_name>.

Afficher les règles CSS

Les règles d'attributs sont des instructions CSS qui vous permettent de contrôler le comportement du CSS. Éléments > Styles affiche les règles at suivantes dans des sections dédiées :

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Afficher les règles at-@property

La règle CSS at @property vous permet de définir explicitement des propriétés CSS personnalisées et de les enregistrer dans une feuille de style sans exécuter de code JavaScript.

Pointez sur le nom d'une telle propriété dans l'onglet Styles pour afficher une info-bulle contenant la valeur, les descripteurs et un lien vers son enregistrement dans la section @property réductible en bas de l'onglet Styles.

Pour modifier une règle @property, double-cliquez sur son nom ou sa valeur.

Afficher les règles at-@supports

L'onglet Styles affiche les règles CSS @supports si elles sont appliquées à un élément. Par exemple, inspectez l'élément suivant :

Si votre navigateur est compatible avec la fonction lab(), l'élément est vert, sinon il est violet.

Afficher les règles at-@scope

L'onglet Styles affiche les règles CSS @scope si elles sont appliquées à un élément.

Les nouvelles règles at-@scope font partie de la spécification CSS Cascading and Inheritance Level 6. Ces règles vous permettent de définir le champ d'application des styles CSS, c'est-à-dire d'appliquer explicitement des styles à des éléments spécifiques.

Affichez la règle @scope dans l'aperçu suivant :

1. Inspectez le texte de la fiche dans l'aperçu.
2. Dans l'onglet Styles, recherchez la règle @scope.

Dans cet exemple, la règle @scope remplace la déclaration CSS background-color globale pour tous les éléments <p> situés dans des éléments avec une classe card.

Pour modifier la règle @scope, double-cliquez dessus.

Afficher les règles at-@font-palette-values

La règle CSS at-rule @font-palette-values vous permet de personnaliser les valeurs par défaut de la propriété font-palette. Éléments > Styles affiche cette at-rule dans une section dédiée.

Consultez la section @font-palette-values dans l'aperçu suivant :

1. Inspectez la deuxième ligne de texte dans l'aperçu.
2. Dans Styles (Styles), recherchez la section @font-palette-values.

Dans cet exemple, les valeurs de la palette de polices --New remplacent les valeurs par défaut de la police colorée.

Pour modifier vos valeurs personnalisées, double-cliquez dessus.

Afficher les règles at-@position-try

La règle CSS @position-try et la propriété position-try-options vous permettent de définir d'autres positions d'ancrage pour les éléments. Pour en savoir plus, consultez Présentation de l'API de positionnement des ancres CSS.

Éléments > Styles résout et lie les éléments suivants :

• valeurs de propriété position-try-options dans une section @position-try --name dédiée.
• Valeurs de propriété position-anchor et arguments anchor() aux éléments correspondants avec des attributs popovertarget.

Examinez les valeurs position-try-options et les sections @position-try dans l'aperçu suivant :

1. Dans l'aperçu, ouvrez le sous-menu, c'est-à-dire cliquez sur VOTRE COMPTE, puis sur VOTRE BOUTIQUE.
2. Inspectez l'élément avec id="submenu" dans l'aperçu.
3. Dans Styles, recherchez la propriété position-try-options, puis cliquez sur sa valeur --bottom. L'onglet Styles vous permet d'accéder à la section @position-try correspondante.
4. Cliquez sur le lien de la valeur position-anchor ou sur les mêmes arguments anchor(). Le panneau Éléments sélectionne l'élément avec l'attribut popovertarget correspondant, et l'onglet Styles affiche le CSS de l'élément.

Pour modifier des valeurs, double-cliquez dessus.

Afficher le modèle de boîte d'un élément

Pour afficher le modèle de boîte d'un élément, accédez à l'onglet Styles, puis cliquez sur le bouton Afficher la barre latérale dans la barre d'action.

Pour modifier une valeur, double-cliquez dessus.

Rechercher et filtrer le CSS d'un élément

Utilisez le champ Filtre dans les onglets Styles et Calculé pour rechercher des propriétés ou des valeurs CSS spécifiques.

Pour rechercher également les propriétés héritées dans l'onglet Calculé, cochez la case Tout afficher.

Pour parcourir l'onglet Calculé, regroupez les propriétés filtrées dans des catégories réductibles en cochant Grouper.

Émuler une page sélectionnée

Si vous déplacez le focus de la page vers les outils de développement, certains éléments de superposition sont automatiquement masqués s'ils sont déclenchés par le focus. Par exemple, des listes déroulantes, des menus ou des sélecteurs de date. L'option check_box Émuler une page sélectionnée vous permet de déboguer un tel élément comme s'il était sélectionné.

Essayez d'émuler une page sélectionnée sur cette page de démonstration :

1. Sélectionnez l'élément de saisie. Un autre élément s'affiche en dessous.
2. Accédez aux outils de développement. La fenêtre des outils de développement est maintenant sélectionnée au lieu de la page. L'élément disparaît donc à nouveau.
3. Dans Éléments > Styles, cliquez sur :hov, cochez la check_box Émuler une page sélectionnée, puis assurez-vous que l'élément de saisie est sélectionné. Vous pouvez maintenant inspecter l'élément situé en dessous.

Vous trouverez la même option dans le panneau Rendering (Rendu).

Pour découvrir d'autres façons de figer un élément, consultez Figer l'écran et inspecter les éléments qui disparaissent.

Activer/Désactiver une pseudo-classe

Pour activer ou désactiver une pseudo-classe :

1. Sélectionnez un élément.
2. Dans le panneau Éléments, accédez à l'onglet Styles.
3. Cliquez sur :hov.
4. Cochez la pseudo-classe que vous souhaitez activer.

Dans cet exemple, vous pouvez voir que les outils pour les développeurs appliquent la déclaration background-color à l'élément, même si l'élément n'est pas réellement pointé.

L'onglet Styles affiche les pseudo-classes suivantes pour tous les éléments :

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

De plus, certains éléments peuvent avoir leurs propres pseudo-classes. Lorsque vous sélectionnez un tel élément, l'onglet Styles affiche une section Forcer l'état d'un élément spécifique que vous pouvez développer et activer des pseudo-classes spécifiques à l'élément.

Pour obtenir un tutoriel interactif, consultez Ajouter un pseudo-état à une classe.

Afficher les pseudo-éléments de surbrillance hérités

Les pseudo-éléments vous permettent de styliser des parties spécifiques d'éléments. Les pseudo-éléments de surlignage sont des parties de document dont l'état est "sélectionné". Ils sont stylisés en tant que "surlignés" pour indiquer cet état à l'utilisateur. Par exemple, ::selection, ::spelling-error, ::grammar-error et ::highlight sont des pseudo-éléments.

Comme indiqué dans la spécification, lorsque plusieurs styles sont en conflit, la cascade détermine le style gagnant.

Pour mieux comprendre l'héritage et la priorité des règles, vous pouvez afficher les pseudo-éléments de surbrillance hérités :

1. Inspectez le texte ci-dessous.

   J'ai hérité du style du pseudo-élément de mise en surbrillance de mon élément parent. Choisissez-moi !

2. Sélectionnez une partie du texte ci-dessus.

3. Dans l'onglet Styles, faites défiler la page jusqu'à la section Inherited from ::selection pseudo of....

Afficher les calques en cascade

Les couches en cascade permettent de contrôler plus explicitement vos fichiers CSS afin d'éviter les conflits de spécificité de style. Cela est utile pour les grands codebases, les systèmes de conception et la gestion des styles tiers dans les applications.

Pour afficher les calques en cascade, inspectez l'élément suivant, puis ouvrez Éléments > Styles.

Dans l'onglet Styles, affichez les trois calques en cascade et leurs styles : page, component et base.

Pour afficher l'ordre des calques, cliquez sur le nom du calque ou sur le bouton Activer/Désactiver l'affichage des calques CSS.

La couche page est la plus spécifique. Par conséquent, l'arrière-plan de l'élément est vert.

Afficher une page en mode Impression

Pour afficher une page en mode Impression :

1. Ouvrez le menu Command (Commande).
2. Commencez à saisir Rendering, puis sélectionnez Show Rendering.
3. Dans le menu déroulant Émuler les médias CSS, sélectionnez print (impression).

Afficher les CSS utilisés et inutilisés avec l'onglet "Couverture"

L'onglet "Couverture" indique le CSS qu'une page utilise réellement.

1. Appuyez sur Commande+Maj+P (Mac) ou Contrôle+Maj+P (Windows, Linux, ChromeOS) lorsque DevTools est actif pour ouvrir le menu de commande.

2. Commencez à saisir coverage.

   

3. Sélectionnez Afficher la couverture. L'onglet "Couverture" s'affiche.

   

4. Cliquez sur  Actualiser. La page se recharge et l'onglet Couverture fournit un aperçu de la quantité de CSS (et de JavaScript) utilisée à partir de chaque fichier que le navigateur charge.

   

   Le vert représente le CSS utilisé. Le rouge représente le CSS inutilisé.

5. Cliquez sur un fichier CSS pour obtenir une répartition ligne par ligne des CSS qu'il utilise dans l'aperçu ci-dessus.

   

   Sur la capture d'écran, les lignes 55 à 57 et 65 à 67 de devsite-google-blue.css ne sont pas utilisées, tandis que les lignes 59 à 63 le sont.

Forcer le mode Aperçu avant impression

Consultez Forcer DevTools en mode Aperçu avant impression.

Copier le code CSS

Dans un seul menu déroulant de l'onglet Styles, vous pouvez copier des règles, déclarations, propriétés et valeurs CSS distinctes.

Vous pouvez également copier des propriétés CSS dans la syntaxe JavaScript. Cette option est utile si vous utilisez des bibliothèques CSS-in-JS.

Pour copier du code CSS :

1. Sélectionnez un élément.
2. Dans l'onglet Éléments > Styles, effectuez un clic droit sur une propriété CSS.

3. Sélectionnez l'une des options suivantes dans le menu déroulant :

   • Copier la déclaration Copier la propriété et sa valeur en syntaxe CSS : css property: value;
   • Copier la propriété Ne copie que le nom property.
   • Copier la valeur ne copie que le value.
   • Copier la règle Copier l'intégralité de la règle CSS : css selector[, selector] { property: value; property: value; ... }
   • Copiez la déclaration en tant que code JavaScript. Copier la propriété et sa valeur dans la syntaxe JavaScript : js propertyInCamelCase: 'value'
   • Copiez toutes les déclarations. Copie toutes les propriétés et leurs valeurs dans la règle CSS : css property: value; property: value; ...

   • Copiez toutes les déclarations au format JS. Copier toutes les propriétés et leurs valeurs dans la syntaxe JavaScript : ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Copiez toutes les modifications CSS.