Référence des fonctionnalités CSS

Découvrez les nouveaux flux de travail dans la référence complète suivante des fonctionnalités Microsoft Edge DevTools liées à l’affichage et à la modification des CSS.

Pour découvrir les concepts de base, consultez Commencer à afficher et modifier les CSS.

Contenu détaillé :

Sélectionner un élément

L’outil Elements de DevTools vous permet d’afficher ou de modifier le CSS d’un élément à la fois. L’élément sélectionné est mis en surbrillance dans l’arborescence DOM. Les styles de l’élément s’affichent dans la fenêtre Styles . Pour consulter un didacticiel, consultez Afficher le CSS d’un élément.

Exemple d’un élément sélectionné

Dans la figure ci-dessus :

  • L’élément h1 mis en surbrillance dans l’arborescence DOM est l’élément sélectionné.
  • À droite, les styles de l’élément sont affichés dans le volet Styles .
  • Sur la gauche, l’élément est mis en surbrillance dans la fenêtre d’affichage, mais uniquement parce que la souris le survole actuellement dans l’arborescence DOM :

Il existe plusieurs façons de sélectionner un élément :

  • Dans une page Web rendue, cliquez avec le bouton droit sur un élément de page, puis cliquez sur Inspecter.

  • Dans DevTools, cliquez sur Sélectionner un élément (Sélectionner un élément) ou appuyez sur Ctrl+Maj+C (Windows, Linux) ou Commande+Maj+C (macOS), puis cliquez sur l’élément dans la fenêtre.

  • Dans DevTools, cliquez sur l’élément dans l’arborescence DOM.

  • Dans DevTools, exécutez une requête telle que document.querySelector('p') dans la console, cliquez avec le bouton 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 CSS.

L’onglet Styles affiche à divers endroits des liens vers d’autres endroits, y compris, mais sans s’y limiter :

  • Outre les règles CSS, les feuilles de style et les sources CSS. Ces liens ouvrent l’outil Sources . Si la feuille de style est minifiée, consultez Reformater un fichier JavaScript minifié avec pretty-print dans les fonctionnalités de débogage JavaScript.

  • Dans les sections Hérité de , aux éléments parents.

  • Dans var() les appels, vers des déclarations de propriété personnalisées. Voir Utilisation des propriétés personnalisées CSS (variables) sur MDN.

  • En animation raccourci propriétés, à @keyframes.

  • Pour plus de liens dans les info-bulles de documentation, consultez les info-bulles.

Les liens peuvent avoir un style différent. Si vous n’êtes pas sûr qu’un de ces liens soit un lien, essayez de cliquer dessus pour le découvrir.

Par exemple :

  1. Accédez à l’application To Do dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur l’espace blanc au-dessus de la chaîne « Ajouter une tâche », puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Sélectionnez l’onglet Styles .

    Différents types de liens sont affichés :

    Divers liens mis en évidence

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

Dans l’outil Éléments , l’onglet Styles affiche des info-bulles contenant des informations utiles lorsque vous survolez des éléments spécifiques.

Afficher la documentation CSS

Pour afficher la description d’une propriété CSS, dans une info-bulle :

  1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur l’espace blanc au-dessus de la chaîne « Ajouter une tâche », puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Sélectionnez l’onglet Styles .

  4. Placez le curseur sur le nom d’une propriété CSS, telle que padding:.

    Une info-bulle s’affiche :

    L’info-bulle avec la documentation sur une propriété CSS

    DevTools extrait les descriptions des info-bulles à partir du dépôt de données personnalisées VS Code .

  5. Dans l’info-bulle, cliquez sur le lien En savoir plus .

    La page de référence CSS de la propriété de MDN s’affiche, telle que padding la propriété CSS.

Pour désactiver les info-bulles CSS :

  • Dans l’info-bulle, cochez la case Ne pas afficher .

Pour réactiver les info-bulles CSS :

  1. Dans DevTools, sélectionnez Personnaliser et contrôler DevTools, puis Paramètres.

  2. Dans le plan à gauche, sélectionnez Préférences, puis faites défiler vers le bas jusqu’à la section Éléments .

  3. Cochez la case Afficher l’info-bulle de la documentation CSS .

Afficher la spécificité du sélecteur

Pointez sur un sélecteur CSS pour afficher une info-bulle qui indique le poids de spécificité du sélecteur, par exemple : Spécificité : (0,0,1) :

Par exemple :

  1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Dans l’arborescence DOM, sélectionnez l’élément <body> .

  4. Dans l’onglet Styles , pointez sur le body sélecteur CSS.

    Une info-bulle s’affiche, indiquant la spécificité : (0,0,1) :

    Info-bulle avec le poids de spécificité d’un sélecteur correspondant

Voir aussi :

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

Placez le curseur sur une var(--custom-property) fonction pour afficher la valeur de la propriété personnalisée dans une info-bulle.

Par exemple :

  1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Dans l’arborescence DOM, sélectionnez l’élément <body> .

  4. Dans l’onglet Styles , dans la body règle CSS, pointez sur --spacing.

    La valeur .3rem est affichée dans une info-bulle :

    Valeur d’une propriété personnalisée dans une info-bulle

Voir aussi :

Afficher la feuille de style externe dans laquelle une règle est définie

Dans le volet Styles , cliquez sur le lien en regard d’une règle CSS pour ouvrir la feuille de style externe qui définit la règle. La feuille de style s’ouvre dans le volet Éditeur de l’outil Sources .

Si la feuille de style est miniaturisée, cliquez sur le bouton Format (Format) en bas du volet Rédacteur . Pour plus d’informations, consultez Reformater un fichier JavaScript minifié avec pretty-print dans les fonctionnalités de débogage JavaScript.

Affichage de la feuille de style dans laquelle une règle est définie

Dans la figure ci-dessus, après avoir cliqué to-do-styles.css:5, vous êtes dirigé vers la ligne 5 de to-do-styles.css, où la h1 règle CSS est définie.

Afficher les CSS non valides, remplacé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.

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

Le volet 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 remplacées, utilisez le volet Calculé pour afficher uniquement le CSS qui est réellement appliqué à un élément.

Par exemple :

  1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur l’en-tête Mes tâches, puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné, avec l’élément sélectionné dans l’arborescence <h1> DOM.

  3. Dans l’outil Éléments , sélectionnez l’onglet Calculé .

    Les propriétés CSS appliquées à l’élément sélectionné s’affichent :

    Le panneau Calculé

    Un nom de propriété et une valeur en italique indiquent une valeur calculée au moment de l’exécution.

  4. Pour afficher toutes les propriétés, cochez la case Afficher tout .

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

Utilisez le volet Calculé . Voir Afficher uniquement le CSS réellement appliqué à un élément, ci-dessus.

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

Cochez la case Afficher tout dans le volet Calculé . Voir Afficher uniquement le CSS réellement appliqué à un élément, ci-dessus.

Afficher les règles d’accès CSS

Les règles arobase sont des instructions CSS qui vous permettent de contrôler le comportement des CSS.

Dans l’outil Éléments , l’onglet Styles affiche les règles arobase suivantes dans les sections dédiées :

Afficher @property les règles

La @property règle CSS at vous permet de définir des propriétés personnalisées CSS de types spécifiques dans une feuille de style.

Pointez sur le nom d’une telle propriété dans l’onglet Styles pour afficher une info-bulle contenant :

  • Valeur de la propriété, par 20%exemple .
  • Descripteurs de la propriété, tels que : initial value: 40%
  • Un lien « Afficher une propriété inscrite » renvoyant à son inscription dans la section réductible @property en bas de l’onglet Styles.

Par exemple :

  1. Accédez à une page qui utilise la règle at, comme Afficher @property les@property règles at, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur le paragraphe Élément trois , puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Dans l’onglet Styles , pointez sur cette var(--itemSize) fonction :

    Info-bulle pour la règle CSS at-property

    L’info-bulle contient :

    • Valeur de la propriété, par 100pxexemple .
    • Descripteurs de la propriété, tels que la valeur initiale.
    • Lien Afficher la propriété enregistrée.

  4. Cliquez sur le lien Afficher la propriété enregistrée .

    La section @property développée s’affiche plus bas dans l’onglet Styles :

    --itemSize dans la section at-property

Pour modifier une @property règle, double-cliquez sur son nom ou sur sa valeur. Voir Modifier le nom ou la valeur d’une déclaration ci-dessous.

Voir aussi :

Afficher @supports les règles

L’onglet Styles affiche les @supports règles arobase CSS, si elles sont appliquées à un élément.

Par exemple, pour afficher la @supports règle :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page qui utilise la règle arobase, telle que Afficher @supports les@supports règles arobase.

  2. Cliquez avec le bouton droit de la souris sur « Je prends en charge l’espace colorimétrique CIE LAB ! », puis sélectionnez Inspecter.

    DevTools s’ouvre. Dans l’outil Elements , dans l’arborescence DOM, l’élément <div class="box"> est sélectionné. Dans l’onglet Styles , @supports les déclarations CSS sont répertoriées :

    Résultat de HTML pour la règle d’accès aux supports

  • Si votre navigateur prend en charge la lab() fonction, l’élément est vert.

  • Si votre navigateur ne prend pas en charge la lab() fonction, l’élément est violet.

Pour connaître les versions du navigateur qui prennent en charge l’espace colorimétrique CIE LAB, recherchez Caniuse.com « lab ».

Afficher @scope les règles

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

Les @scope règles arobase vous permettent d’étendre les styles CSS, c’est-à-dire d’appliquer explicitement des styles à des éléments spécifiques. Voir @scope CSS à la règle sur MDN.

Pour afficher la @scope règle :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page qui utilise la règle arobase, comme la démonstration Afficher les @scope@scope règles arobase :

    Résultat de HTML & CSS pour l’étendue at-rule

  2. Cliquez avec le bouton droit sur « Je suis le texte qui vit sur une carte », puis sélectionnez Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Sélectionnez l’onglet Styles .

  4. Examinez la @scope règle :

    Règle d’étendue dans l’onglet Styles

    Dans cet exemple, la règle (couleur @scope d’arrière-plan = prune) remplace la déclaration CSS background-color globale (aigue-marine) pour tout <p> élément qui se trouve à l’intérieur d’un élément (tel que a <div>) qui a une card classe.

    Pour modifier la @scope règle, double-cliquez dans la règle :

  5. Dans l’onglet Styles , double-cliquez sur prune, appuyez sur Suppr, puis sélectionnez beige.

    Le texte de la carte de la page web de démonstration passe d’un arrière-plan prune à un arrière-plan beige.

Afficher @font-palette-values les règles

La règle CSS @font-palette-values vous permet de personnaliser (remplacer) les valeurs par défaut de la font-palette propriété. Dans l’outil Éléments , l’onglet Styles affiche cette règle dans une section dédiée.

Pour afficher la @font-palette-values règle CSS :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page qui utilise la règle at, comme la démonstration Afficher les @font-palette-values@font-palette-values règles at.

  2. Cliquez avec le bouton droit sur « Nouvelles couleurs », puis sélectionnez Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Dans l’onglet Styles , recherchez la @font-palette-values règle CSS :

    Règle at-font-palette-values dans l’onglet Styles

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

    Pour modifier une valeur personnalisée, double-cliquez dessus comme suit :

  4. Dans la @font-palette-values règle CSS, dans la override-colors propriété, double-cliquez sur 0 gold, 1 red, et entrez 0 blue, 1 red.

    Dans la page Web inspectée, les « nouvelles couleurs » sont désormais exprimées en bleu et rouge.

Afficher @position-try les règles

La @position-try règle CSS ainsi que la propriété vous permettent de définir d’autres positions d’ancrage pour les position-try-fallbacks éléments.

Dans l’outil Éléments , l’onglet Styles résout et lie les éléments suivants :

  • Les position-try-fallbacks valeurs de propriété (ou position-try-options valeurs de propriété) sont liées à une section de règle CSS dédiée @position-try --name .

  • Les position-anchor valeurs et anchor() arguments de la propriété sont liés aux éléments correspondants qui ont des popovertarget attributs.

Par exemple, examinez les valeurs et @position-try les position-try-fallbacks règles CSS comme suit :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez à une page qui utilise les valeurs et @position-try la position-try-fallbacks règle, comme la démonstration Afficher les @position-try règles ate.

  2. Dans la page Web rendue, ouvrez le sous-menu ; c’est-à-dire cliquez sur VOTRE COMPTE, puis sur VITRINE.

    Le sous-menu s’affiche, affichant une liste de commandes : RÉFÉRENCEMENTS, OFFRES SPÉCIALES, DÉCONNEXION.

  3. Dans le sous-menu, cliquez avec le bouton droit au-dessus de LISTINGS, puis sélectionnez Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné. L’élément <ul id="submenu"> de sous-menu est sélectionné dans l’arborescence DOM :

    Résultat du code HTML & CSS pour la règle at-position-try at-rule

  4. Dans l’onglet Styles , dans la #submenu règle CSS, recherchez la position-try-fallbacks propriété et cliquez sur sa --bottom valeur.

    L’onglet Styles fait défiler jusqu’à la section correspondante @position-try :

    La section essai de position dans l’onglet Styles

  5. Dans l’onglet Styles , dans la #submenu règle CSS, cliquez sur le --submenu lien dans l’une des propriétés suivantes :

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    L’arborescence DOM sélectionne l’élément (<button popovertarget="submenu">) qui a la valeur d’attribut correspondante popovertarget (popovertarget="submenu"), et l’onglet Styles affiche le CSS de l’élément :

    L’élément button sélectionné dans l’arborescence DOM, et son CSS

Pour modifier une valeur, double-cliquez dessus :

Voir aussi :

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 au volet Styles et faites défiler vers le bas.

Pour modifier une valeur, double-cliquez dessus :

Dans la figure suivante, le diagramme de modèle de boîte dans le volet Styles affiche le modèle de boîte pour l’élément actuellement sélectionné h1 :

Diagramme de modèle de boîte

Voir aussi :

Rechercher et filtrer les CSS d’un élément

Utilisez la zone de texte Filtre dans les volets 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 le volet Calculé, cochez la case Afficher tout dans la case activée.

Dans la figure suivante, le volet Styles est filtré pour afficher uniquement les règles qui incluent la requête colorde recherche.

Filtrer le panneau Styles

Dans la figure suivante, le volet Calculé est filtré pour afficher uniquement les déclarations qui incluent la requête 100%de recherche :

Filtrer le panneau Calculé

Émuler une page ciblée

Si vous passez du focus de la page web inspectée à DevTools, certains éléments de superposition se masquent automatiquement, s’ils sont déclenchés par le focus. Par exemple :

  • Listes déroulantes.
  • Menus.
  • Des sélecteurs de dates.

Pour déboguer un tel élément comme si la page avait le focus, effectuez l’une des opérations suivantes :

  • Dans l’outil Éléments , dans l’onglet Styles , cliquez sur :hov (Basculer l’état de l’élément), puis cochez la case Émuler une page active .
  • Dans l’outil Rendu , cochez la case Émuler une page ciblée .

Mise en garde : Lorsque cette option est activée, la document.visibilityState est définie sur visible et l’événement visibilitychange ne se déclenche pas. Voir API de visibilité des pages sur MDN.

Pour essayer d’émuler une page ciblée :

  1. Ouvrez la démonstration Émuler une page ciblée dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez sur la zone de texte d’entrée. Vous pouvez également appuyer sur Tab pour mettre le focus sur la zone de texte d’entrée.

    Un autre élément s’affiche sous la zone de texte d’entrée, indiquant « Ce message s’affiche uniquement lorsque la zone de texte est ciblée ».

  3. Cliquez avec le bouton droit sur la zone de texte d’entrée, puis sélectionnez Inspecter.

    DevTools s’ouvre et l’élément de message disparaît. La fenêtre DevTools est maintenant active, au lieu de la page Web inspectée, de sorte que l’élément de message disparaît.

  4. Dans l’outil Éléments , dans l’onglet Styles , cliquez sur :hov (Basculer l’état de l’élément), puis cochez la case Émuler une page active .

  5. Assurez-vous que l’élément <input id="textBox" type="text"> de zone de texte d’entrée est toujours sélectionné.

    Sous la zone de texte d’entrée, l’élément de message réapparaît sous la zone de texte d’entrée.

    Vous pouvez maintenant inspecter l’élément de message qui se trouve sous la zone de texte d’entrée, même si DevTools, plutôt que la page inspectée, a le focus :

    Case à cocher Émuler une page active sélectionnée

  6. Nettoyage : dans l’outil Éléments , dans l’onglet Styles , cliquez sur :hov (Activer/désactiver l’état de l’élément), puis décochez la case Émuler une page prioritaire .

Une case à cocher Émuler une page ciblée apparaît également dans l’outil Rendu ; voir Outil de rendu, pour voir à quoi ressemble une page web avec différentes options d’affichage ou des défaillances visuelles.

Voir aussi :

Basculer une pseudo-classe

Pour basculer une pseudo-classe :

  1. Accédez à une page web, telle que l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Entrez une tâche, telle que la tâche 1.

  3. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  4. Sélectionnez l’outil Éléments .

  5. Dans l’arborescence DOM, sélectionnez l’élément <li class="task"> .

  6. Sélectionnez l’onglet Styles .

  7. En haut à droite, cliquez sur :hov.

    Des cases à cocher s’affichent.

  8. Cochez la case correspondant à la pseudo-classe que vous souhaitez activer, par :hoverexemple :

    Sélection de la pseudo-classe :hover

    Dans la page web rendue, le cercle en regard du nom de la tâche est coché et un X rouge dans un cercle rouge apparaît sur le côté droit de la tâche, comme si l’élément était placé dessus, même si l’élément n’est pas réellement survolé.

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

De plus, certains éléments peuvent avoir des pseudo-classes spécifiques à l’élément. Lorsque vous sélectionnez un tel élément, l’onglet Styles affiche une section Force specific element state que vous pouvez développer et activer sur des pseudo-classes spécifiques à l’élément, telles qu’une case à cocher :read-write :

La section Forcer l’état d’un élément spécifique d’un élément « textarea »

Pour un didacticiel interactif, voir 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 des éléments. Les pseudo-éléments surlignés sont des parties de document avec un status « sélectionné » et sont mis en forme « surligné » pour indiquer ce status à l’utilisateur.

Par exemple, ces pseudo-éléments sont :

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

Lorsque plusieurs styles sont en conflit, la cascade CSS détermine le style gagnant. Voir Introduction à la cascade CSS sur MDN.

Pour mieux comprendre l’héritage et la priorité des règles, affichez le pseudo-élément de surbrillance hérité dans la démonstration suivante.

Pour afficher les pseudo-éléments de surbrillance hérités :

  1. Accédez à la démonstration Mettre en évidence des pseudo-éléments dans une nouvelle fenêtre ou un nouvel onglet.

  2. Sélectionnez une partie du texte « J’ai hérité du style du pseudo-élément de surbrillance de mes parents. Sélectionnez-moi !

    Le texte sélectionné devient du texte rouge sur fond jaune.

  3. Cliquez avec le bouton droit sur le texte « J’ai hérité du style du pseudo-élément de surbrillance de mes parents. Sélectionnez-moi ! », puis sélectionnez Inspecter.

    DevTools s’ouvre. Dans l’outil Éléments , dans l’onglet Styles , la section s’affiche : Hérité de ::selection pseudo of div.text-parent :

    Afficher la section Hérité dans l’onglet Styles

  4. Dans l’arborescence DOM, sélectionnez l’élément <div class="text-parent"> .

    Dans l’onglet Styles , la section s’affiche : Pseudo ::selection element :

    Afficher la pseudo-section dans l’onglet Styles

Voir aussi :

Afficher les couches en cascade

Les couches en cascade permettent un contrôle plus explicite de vos fichiers CSS, afin d’éviter les conflits de spécificité de style. Ceci est utile pour :

  • Grandes bases de code.
  • Conception du système.
  • Gestion des styles tiers.

Pour afficher les couches en cascade :

  1. Accédez à une page Web qui utilise des couches en cascade, comme la démonstration des couches en cascade .

  2. Cliquez avec le bouton droit sur l’élément « Mes styles sont superposés ! », puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans l’outil Éléments , sélectionnez l’onglet Styles .

  4. Dans l’onglet Styles , affichez les trois couches en cascade et leurs styles : page, component et base:

    Couches en cascade

  5. Pour afficher l’ordre des couches, cliquez sur le nom de la couche (page, composant ou base). Ou cliquez sur l’icône Basculer l’affichage des couches CSS sur le bouton Basculer l’affichage des couches CSS.

    Le page calque a la spécificité la plus élevée, donc l’arrière-plan de l’élément est vert.

Voir aussi :

Afficher une page en mode impression

Pour afficher une page en mode impression :

  1. Accéder à une page Web.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez sur Échap une ou deux fois pour afficher la barre d’outils Affichage rapide en bas de DevTools.

  4. Dans la barre d’outils Affichage rapide , sélectionnez Autres outils (+).

  5. Sélectionnez l’outil Rendu .

    L’outil Rendu s’ouvre dans le panneau Affichage rapide au bas de DevTools.

  6. Dans l’outil de rendu , cliquez sur la liste déroulante Émuler le type de média CSS , puis sélectionnez Imprimer.

    La page web est rendue comme si elle était imprimée.

  7. Lorsque vous avez terminé, dans l’outil Rendu , cliquez sur la liste déroulante Émuler le type de média CSS , puis sélectionnez Pas d’émulation.

Afficher les CSS utilisés et inutilisés avec l’outil Couverture

L’outil Couverture vous montre ce qu’une page utilise réellement.

  1. Ouvrez le menu Commande en appuyant sur Ctrl+Maj+P (Windows, Linux) ou Commande+Maj+P (macOS), pendant que DevTools est en mode Focus.

  2. Commencez à taper coverage, puis sélectionnez Afficher la couverture :

    Ouverture de l’outil Couverture à partir du menu de commande

    L’outil Couverture s’affiche :

    Outil Couverture

  3. Cliquez sur Démarrer la couverture d’instrumentation et actualisez la page (Démarrer la couverture d’instrumentation et actualiser la page). La page s’actualise et l’outil Coverage fournit une vue d’ensemble de la quantité de CSS (et JavaScript) utilisée à partir de chaque fichier chargé par le navigateur. Le vert représente le CSS utilisé. Le rouge représente un CSS inutilisé.

    Une vue d’ensemble de la quantité de CSS (et de JavaScript) utilisée et inutilisée :

    Une vue d’ensemble de la quantité de CSS (et de JavaScript) utilisée et inutilisée

  4. Pour afficher une répartition ligne par ligne du CSS utilisé, cliquez sur un fichier CSS.

    Dans la figure suivante, les lignes 145 à 147 et 149 à 151 de b66bc881.site-ltr.css sont inutilisées, tandis que les lignes 163 à 166 sont utilisées :

    Répartition ligne par ligne des CSS utilisés et inutilisés

Forcer le mode d’aperçu avant impression

Consultez Forcer DevTools en mode Aperçu avant impression.

Copier CSS

À partir d’un seul menu déroulant de l’onglet Styles , vous pouvez copier des règles, déclarations, propriétés ou valeurs CSS distinctes ; consultez les principes de base de la syntaxe CSS dans Qu’est-ce que CSS ? sur MDN.

En outre, vous pouvez copier les propriétés CSS dans la syntaxe JavaScript. Cette option est pratique si vous utilisez des bibliothèques CSS-in-JS ; voir Modification du style pour les frameworks CSS-in-JS.

Pour copier CSS :

  1. Accédez à une page web qui utilise CSS, comme l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis cliquez sur Inspecter.

    DevTools s’ouvre, avec l’outil Éléments sélectionné.

  3. Dans l’arborescence DOM, sélectionnez un élément, tel que <h1>.

  4. Dans l’onglet Styles , dans une règle CSS, cliquez avec le bouton droit sur une propriété CSS, telle que text-align: center:

    Menu déroulant Copier CSS

  5. Sélectionnez un élément de menu du clic droit :

    • Copiez la déclaration. Copie la propriété et sa valeur en syntaxe CSS : property: value;

    • Copier la propriété. Copie uniquement le property nom.

    • Copy value. Copie uniquement le valuefichier .

    • Copy rule (Copier la règle). Copie l’intégralité de la règle CSS : selector[, selector] { property: value; property: value; ... }

    • Copier la déclaration au format JS. Copie la propriété et sa valeur dans la syntaxe JavaScript : propertyInCamelCase: 'value'

    • Copiez toutes les déclarations. Copie toutes les propriétés et leurs valeurs dans la syntaxe CSS : property: value; property: value; ...

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

    • Copiez toutes les modifications CSS. Copie les modifications que vous apportez dans l’onglet Styles dans toutes les déclarations. Cet élément de menu s’affiche de manière conditionnelle.

    • Afficher la valeur calculée. Vous permet d’accéder à l’onglet Calculé ; voir Afficher uniquement le CSS réellement appliqué à un élément, ci-dessus.

Modifier CSS

Cette section répertorie toutes les façons dont vous pouvez modifier les CSS dans lesstylesElements>.

En outre, vous pouvez :

Deux manières d’ajouter une déclaration CSS à un élément

L’ordre des déclarations affecte le style d’un élément. Vous pouvez ajouter des déclarations en ajoutant une déclaration en ligne ou en ajoutant une déclaration à une règle de style. Ces deux approches sont décrites dans les sections suivantes.

Ajout d’une déclaration CSS en ligne à un élément

L’ajout d’une déclaration en ligne équivaut à ajouter un style attribut au code HTML d’un élément. Dans la plupart des cas, vous souhaiterez probablement utiliser des déclarations en ligne.

Les déclarations en ligne ont une spécificité plus élevée que les déclarations externes. L’utilisation de déclarations en ligne garantit donc que les modifications prennent effet dans votre élément spécifique attendu. Pour plus d’informations sur la spécificité, consultez Types de sélecteur dans Spécificité sur MDN.

Pour ajouter une déclaration en ligne :

  1. Sélectionnez un élément.

  2. Dans le volet Styles , cliquez entre les crochets de la section element.style . Le curseur est mis en évidence, ce qui vous permet d’entrer du texte.

  3. Entrez un nom de propriété, puis appuyez sur Entrée.

  4. Entrez une valeur valide pour cette propriété et appuyez sur Entrée. Dans l’arborescence DOM, un style attribut a été ajouté à l’élément.

Vous pouvez également entrer la valeur dans le champ de propriété, et DevTools suggérera alors une liste de paires propriété  :valeur correspondantes parmi lesquelles choisir. Par exemple, si vous entrez bold dans le champ de propriété, DevTools suggère font-weight: bold et font-weight: bolder comme règles possibles. Appuyez sur Entrée pour appliquer la règle.

Dans la figure suivante, les margin-top propriétés et background-color ont été appliquées à l’élément sélectionné. Dans l’arborescence DOM, les déclarations sont reflétées dans l’attribut de style l’élément.

Ajouter des déclarations incorporées

Ajout d’une déclaration CSS à une règle de style existante

Si vous déboguez les styles d’un élément et que vous devez tester spécifiquement ce qui se passe lorsqu’une déclaration est définie à différents endroits, ajoutez une déclaration à une règle de style existante.

Pour ajouter une déclaration à une règle de style existante :

  1. Sélectionnez un élément.

  2. Dans le volet Styles , cliquez entre les crochets de la règle de style à laquelle vous souhaitez ajouter la déclaration. Le curseur est mis en évidence, ce qui vous permet d’entrer du texte.

  3. Entrez un nom de propriété, puis appuyez sur Entrée.

  4. Entrez une valeur valide pour cette propriété et appuyez sur Entrée.

Ajout d’une déclaration à une règle de style

Modifier le nom ou la valeur d’une déclaration

Pour modifier le nom d’une déclaration CSS, double-cliquez sur le nom de la déclaration.

Pour modifier la valeur d’une déclaration CSS, double-cliquez sur la valeur de la déclaration. La capture d’écran suivante montre la sélection d’une valeur dans une liste :

Modifier la valeur d’une déclaration

Pour modifier une valeur numérique, tapez-la ou utilisez les touches de direction, conformément à la section suivante.

Modifier des valeurs énumérables avec des raccourcis clavier

Pour modifier une valeur numérique d’une déclaration CSS, tapez la valeur ou utilisez les touches de direction pour incrémenter la valeur d’un montant spécifique. Lors de la modification d’une valeur énumérable d’une déclaration, par exemple, font-sizevous pouvez utiliser les raccourcis clavier suivants pour incrémenter la valeur d’une quantité fixe :

Combinaison de touches Action
Alt+Flèche vers le haut (Windows, Linux), Option+Flèche vers le haut (macOS) Incrémentez de 0,1.
Flèche vers le haut Incrémentez de 1 ou de 0,1 si la valeur actuelle est comprise entre -1 et 1.
Maj+Haut Incrémentez de 10.
Ctrl+Maj+Page préc (Windows, Linux), Maj+Commande+Flèche haut (macOS) Incrémentez de 100.

Pour décrémenter, appuyez sur la touche Flèche vers le bas (ou Page vers le bas) au lieu de la touche Flèche vers le haut (ou Page vers le haut).

Modifier les valeurs de longueur

Vous pouvez utiliser votre pointeur pour modifier une propriété qui a une valeur de longueur, telle que width, height, marginpadding, ou border.

Pour modifier l’unité de longueur :

  1. Ouvrez une page web qui utilise CSS, comme l’application To Do, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur le texte Ajouter une tâche, puis sélectionnez Inspecter.

    DevTools s’ouvre et affiche l’outil Éléments . L’élément <label> est sélectionné dans l’arborescence DOM.

  3. Dans l’onglet Styles , dans la .new-task-form règle CSS, dans la max-width: propriété, pointez sur 50rem.

    Une info-bulle s’affiche, indiquant la valeur et les unités équivalentes : 800px.

  4. Cliquez sur la valeur 50rem.

    Une info-bulle s’affiche : « Incrémenter/décrémenter avec la roulette de la souris ou les touches haut/bas. Ctrl : +/-100, Maj : +/-10, Alt : +/-0,1"

  5. Déplacez la roulette de la souris ou appuyez sur les touches Flèche haut et Flèche bas tout en appuyant sur une touche :

    Ctrl : Incrémenter de 100. Maj : incrémenter de 10. Alt : incrémenter de 0,1.

    Dans la page Web inspectée, la zone de texte Ajouter une entrée de tâche change de largeur lorsque vous modifiez la valeur.

  6. Dans le champ de valeur de la propriété max-width, faites la valeur 200px (en changeant d’unités rem en px unités).

  7. Déplacez à nouveau la molette de la souris ou appuyez sur les touches Flèche vers le haut et Flèche vers le bas tout en maintenant la touche Ctrl (+/-100), Maj (+/-10) ou Alt (+/-0,1).

    Dans la page Web inspectée, la largeur de la zone de texte Ajouter une entrée de tâche change lorsque vous modifiez la valeur :

    Modification de la largeur maximale de la zone de texte d’entrée

Ajouter une classe à un élément

Pour ajouter une classe à un élément :

  1. Sélectionnez l’élément dans l’arborescence DOM.

  2. Cliquez sur .cls.

  3. Entrez le nom de la classe dans la zone de texte Ajouter une nouvelle classe .

  4. Appuyez sur Entrée.

    Volet Classes d’éléments

Émuler les préférences de thème clair et foncé et activer le mode sombre automatique

Pour activer ou désactiver le mode sombre automatique, ou émuler la préférence de l’utilisateur pour les thèmes clair ou sombre :

  1. Dans l’outil Elements , dans l’onglet Styles , cliquez sur le bouton Toggle common rendering emulations (icône Paintbrush) en haut à droite :

    Activer/désactiver les émulations de rendu courantes

  2. Sélectionnez l’une des options suivantes dans la liste déroulante :

    • prefers-color-scheme : light. Indique que l’utilisateur préfère le thème clair.

    • prefers-color-scheme : dark. Indique que l’utilisateur préfère le thème sombre.

    • Mode sombre automatique. Affiche votre page en mode sombre même si vous ne l’avez pas implémentée. De plus, définit prefers-color-scheme sur dark automatique.

Cette liste déroulante est un raccourci pour la fonction prefers-color-schemede média CSS Emulate et Enable automatic dark mode options (Activer le mode sombre automatique) de l’outil de rendu.

Voir aussi :

Basculer une classe

Pour activer ou désactiver une classe sur un élément :

  1. Sélectionnez l’élément dans l’arborescence DOM.

  2. Ouvrez la fenêtre Classes d’éléments . Voir Ajouter une classe à un élément. Sous les zones de texte Ajouter une nouvelle classe se trouvent toutes les classes appliquées à cet élément.

  3. Cochez la case en regard de la classe que vous souhaitez activer ou désactiver.

Ajouter une règle de style

Pour ajouter une nouvelle règle de style :

  1. Sélectionnez un élément.

  2. Cliquez sur Nouvelle règle de style (Nouvelle règle de style). DevTools insère une nouvelle règle sous la règle element.style .

    Dans la figure suivante, DevTools ajoute la règle de h1.devsite-page-title style après que vous avez cliqué sur Nouvelle règle de style.

    Ajouter une nouvelle règle de style

Sélectionner une feuille de style à laquelle ajouter une règle

Par défaut, lors de l’ajout d’une règle de style, DevTools crée une feuille de style nommée inspector-stylesheet dans le document, puis ajoute la nouvelle règle de style dans cette feuille de style.

Pour ajouter la règle à la place dans une feuille de style existante :

  • Cliquez longuement sur Nouvelle règle de style (Nouvelle règle de style), puis sélectionnez une feuille de style dans la liste à laquelle ajouter la règle de style.

Sélection d’une feuille de style

Ajouter une règle de style à un emplacement spécifique dans une feuille de style

Par défaut, l’ajout d’une règle de style en cliquant sur le bouton Nouvelle règle de style (icône Nouvelle règle de style) insère la nouvelle règle sous la règle element.style dans la feuille de inspector-stylesheet style.

Pour ajouter une règle de style à un emplacement spécifique d’une feuille de style particulière en commençant par le volet Styles :

  1. Dans l’outil Éléments , dans l’onglet Styles , pointez sur la règle de style qui se trouve directement au-dessus de l’endroit où vous souhaitez ajouter votre nouvelle règle de style.

    Un bouton Insérer une règle de style ci-dessous (icône Insérer une règle de style ci-dessous) s’affiche sur le côté droit de la règle CSS.

  2. Cliquez sur le bouton Insérer une règle de style ci-dessous (icône Insérer une règle de style ci-dessous) :

    Insérer une règle de style ci-dessous

Activer/désactiver une déclaration

Pour activer ou désactiver une déclaration unique :

  1. Sélectionnez un élément.

  2. Dans le volet Styles , placez le curseur sur la règle qui définit la déclaration. Une case à cocher apparaît en regard de chaque déclaration.

  3. Cochez ou décochez la case en regard de la déclaration. Lorsque vous effacez une déclaration, DevTools la raye pour indiquer qu’elle n’est plus active.

    Dans la figure suivante, la margin-top propriété de l’élément actuellement sélectionné a été désactivée.

    Activer/désactiver une déclaration

Modifier les ::view-transition pseudo-éléments pendant une animation

Voir :

Aligner les éléments de grille et leur contenu avec l’éditeur de grille

Voir :

Modifier les couleurs avec le sélecteur de couleurs

Le sélecteur de couleurs fournit une interface utilisateur pour les modifications color et background-color les déclarations.

Pour ouvrir le sélecteur de couleurs :

  1. Sélectionnez un élément.

  2. Dans le volet Styles, recherchez la , ou une colorbackground-colordéclaration similaire que vous souhaitez modifier. À gauche de , colorbackground-colorou une valeur similaire, il y a un petit carré qui est un aperçu de la couleur.

    Dans la figure suivante, le petit carré à gauche de rgba(0, 0, 0, 0.7) est un aperçu de cette couleur.

    Aperçu des couleurs

  3. Cliquez sur l’aperçu pour ouvrir le sélecteur de couleurs.

    Le sélecteur de couleurs

La figure et la liste suivantes décrivent chacun des éléments d’interface utilisateur du sélecteur de couleurs.

Sélecteur de couleurs, annoté

Légende Composant Description
1 Lunettes de soleil
2 Pipette Échantillonner une couleur de la page avec la pipette
3 Copier dans le presse-papiers Copiez la valeur d’affichage dans le presse-papiers.
4 Valeur d’affichage Représentation RGBA, HSLA ou Hex de la couleur.
5 Palette de couleurs Cliquez sur un carré pour changer la couleur.
6 Teinte
7 Opacité
8 Afficher le sélecteur de valeurs Bascule entre les représentations RGBA, HSLA et Hex de la couleur actuelle.
9 Sélecteur de palette de couleurs Basculez entre la palette Material Design, une palette personnalisée ou une palette de couleurs de page. DevTools génère la palette de couleurs de la page en fonction des couleurs qu’il trouve dans vos feuilles de style.

Voir aussi :

Échantillonner une couleur de la page avec la pipette

Pour remplacer la couleur sélectionnée par une autre couleur sur la page :

  1. Cliquez sur l’icône Pipette (Pipette). Votre curseur se transforme en loupe.

  2. Passez la souris sur le pixel qui a la couleur que vous souhaitez échantillonner, n’importe où sur votre écran.

  3. Cliquez pour confirmer.

    Dans la figure suivante, le sélecteur de couleurs affiche une valeur de couleur actuelle de , qui est proche du rgba(0,0,0,0.7)noir. La couleur spécifique change en fonction de la version du noir actuellement mise en surbrillance dans la fenêtre d’affichage une fois que vous avez cliqué dessus.

    Utilisation de la pipette

Voir aussi :

Modifier la valeur de l’angle avec l’horloge d’angle

L’horloge d’angle fournit une interface utilisateur permettant de modifier les montants d’angle dans les valeurs de propriété CSS.

Pour ouvrir l’horloge d’angle :

  1. Sélectionnez un élément qui inclut une déclaration d’angle.

  2. Dans le volet Styles , recherchez la transform déclaration ou background que vous souhaitez modifier. Cliquez sur la zone Aperçu de l’angle en regard de la valeur de l’angle.

    Dans la figure suivante, la petite horloge à gauche de 100deg est un aperçu de l’angle.

  3. Cliquez sur l’aperçu pour ouvrir l’horloge d’angle :

    Aperçu de l’angle

  4. Modifiez la valeur de l’angle en cliquant sur le cercle d’horloge d’angle , ou faites défiler votre souris pour augmenter ou diminuer la valeur de l’angle de 1.

Il existe d’autres raccourcis clavier pour modifier la valeur de l’angle. Découvrez-en davantage dans les raccourcis clavier du volet Styles.

Modifier les ombres de la boîte et du texte avec l’éditeur d’ombres

Utilisez l’éditeur d’ombre pour modifier la valeur de la box-shadowtext-shadow propriété ou CSS sur un élément HTML :

  1. Sélectionnez un élément avec une box-shadow déclaration ou text-shadow .

    Par exemple, ouvrez la page de démonstration 1DIV dans un nouvel onglet ou une nouvelle fenêtre, cliquez avec le bouton droit sur la page et sélectionnez Inspecter pour ouvrir DevTools, puis dans l’outil Elements , sélectionnez l’élément <div class="demos"> .

  2. Dans le volet Styles, dans la .demos règle CSS, recherchez la déclaration, puis cliquez sur le bouton Ouvrir l’éditeurbox-shadow d’ombre (icône de bouton Éditeur d’ombre).

    Le Shadow Editor s’ouvre :

    L’éditeur de l’ombre

  3. Modifiez les propriétés d’ombre comme suit :

    Propriété Comment modifier
    Type Sélectionnez Outset ou Inset. Uniquement pour box-shadow.
    Décalage X Spécifiez une valeur dans la zone de texte ou faites glisser le point bleu.
    Décalage Y Spécifiez une valeur dans la zone de texte ou faites glisser le point bleu.
    Blur Spécifiez une valeur dans la zone de texte ou faites glisser le curseur.
    Diffusion Spécifiez une valeur dans la zone de texte ou faites glisser le curseur. Uniquement pour box-shadow.

    Les modifications sont appliquées à l’élément dans la page Web rendue en temps réel :

    L’effet des modifications apportées dans le Shadow Editor

Modifier les minutages d’animation et de transition avec l’éditeur d’accélération

Utilisez l’éditeur d’accélération pour modifier la valeur de la propriété animation-timing-function ou transition-timing-function sur un élément HTML.

Pour ouvrir l’éditeur d’accélération :

  1. Dans DevTools, dans l’outil Elements , dans l’arborescence DOM, sélectionnez un élément auquel une animation ou une transition CSS est appliquée.

    Par exemple, ouvrez la page de démonstration de propriété animée dans un nouvel onglet ou une nouvelle fenêtre, cliquez avec le bouton droit sur la zone verte qui contient une animation, puis sélectionnez Inspecter.

    DevTools s’ouvre et affiche l’outil Éléments .

  2. Appuyez sur Ctrl+F et recherchez « spinner », puis sélectionnez l’élément qui se trouve à l’intérieur <div class="spinner"><div class="animation-demo good">.

    Les cases rouge (mauvaise) et verte (bonne) de cette page de démonstration sont deux animations CSS différentes. Les deux animations s’exécutent avec CSS en utilisant la animation propriété CSS et définissent une ease-in-out fonction de synchronisation.

  3. Dans l’onglet Styles , dans la .good .spinner règle CSS, dans la animation déclaration, à gauche de ease-in-out, cliquez sur le bouton Ouvrir l’éditeur de Bézier cubique (icône de l’éditeur de Bézier cubique).

    L’Éditeur d’accélération s’ouvre :

    Éditeur d’accélération

Utiliser des présélections pour ajuster le minutage

Pour ajuster le minutage d’un simple clic de souris, utilisez les préréglages de l’éditeur d’accélération :

  1. Ouvrez l’Éditeur d’accélération, comme décrit dans Modifier l’animation et les minutages de transition avec l’Éditeur d’accélération, ci-dessus.

  2. Cliquez sur l’un des quatre boutons du sélecteur :

    Bouton Type de fonction mot clé CSS
    Fonctions d’accélération linéaire Fonctions linéaires linear
    Fonctions d’accélération d’entrée et de sortie Fonctions d’entrée et de sortie ease-in-out
    Fonctions d’accélération Fonctions d’accélération ease-in
    Fonctions d’accélération Fonctions d’atténuation ease-out

    La sélection d’un bouton définit une valeur de mot clé dans la règle CSS (qui varie si vous sélectionnez une présélection de variante à l’étape suivante), et le sélecteur de préréglages s’ouvre en bas de l’éditeur d’accélération.

  3. Dans le sélecteur de préréglages, cliquez sur les boutons Gauche ou Droite>< pour choisir l’un des préréglages suivants :

    • Présélections linéaires : elastic, bounce, ou emphasized.

    • Préréglages de Bézier cubique :

    mot clé de minutage Prédéfinies Bézier cubique
    Facilité d’in-sortie In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    Facilité d’in-sortie Entrée, sortie, quadratique cubic-bezier(0.46, 0.03, 0.52, 0.96)
    Facilité d’in-sortie In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    Facilité d’in-sortie Sortie rapide, entrée lente cubic-bezier(0.4, 0, 0.2, 1)
    Facilité d’in-sortie In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    mot clé de minutage Prédéfinies Bézier cubique
    Facilité d’utilisation In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    Facilité d’utilisation In, Quadratique cubic-bezier(0.55, 0.09, 0.68, 0.53)
    Facilité d’utilisation In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    Facilité d’utilisation Entrée, arrière cubic-bezier(0.6, -0.28, 0.74, 0.05)
    Facilité d’utilisation Sortie rapide, entrée linéaire cubic-bezier(0.4, 0, 1, 1)
    mot clé de minutage Prédéfinies Bézier cubique
    Atténuation Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
    Atténuation Sortie, Quadratique cubic-bezier(0.25, 0.46, 0.45, 0.94)
    Atténuation Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    Atténuation Sortie linéaire, entrée lente cubic-bezier(0, 0, 0.2, 1)
    Atténuation Sortie, Retour cubic-bezier(0.18, 0.89, 0.32, 1.28)

Voir aussi :

Configurer des minutages personnalisés

Pour définir des valeurs personnalisées pour les fonctions de chronométrage, utilisez les points de contrôle situés sur les lignes :

  • Pour les fonctions linéaires, cliquez n’importe où sur la ligne pour ajouter un point de contrôle et faites-le glisser. Pour supprimer un point de contrôle, double-cliquez dessus.

    Déplacement d’un point de contrôle d’une fonction linéaire

  • Pour les fonctions de Bézier cubique, faites glisser l’un des points de contrôle :

    Déplacement des points de contrôle d’une fonction Bézier cubique

Toute modification déclenche une animation de boule dans l’aperçu en haut de l’éditeur d’accélération.

Voir aussi

Démonstrations :

MDN :

GitHub :

Web.dev :

Blog Chrome pour les développeurs :

Documents Chrome :

material.io :

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Kayce Basques.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

  • Dernière mise à jour :