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

Découvrez de 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 de CSS.

Pour en savoir plus sur les principes de base, consultez Prise en main de l’affichage et de la modification de CSS.

Contenu détaillé :

Sélectionner un élément

L’outil Éléments dans 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 sont affichés dans le volet Styles . Pour obtenir 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é.
  • Sur la 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 pointe actuellement sur celui-ci 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 Cmd+Maj+C (macOS), puis cliquez sur l’élément dans la fenêtre d’affichage.

  • 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 Révéler dans le panneau Éléments.

Afficher css

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

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

  • En regard des règles CSS, des feuilles de style et des sources CSS. Ces liens ouvrent l’outil Sources . Si la feuille de style est minifiée, consultez Reformat a minified JavaScript file with pretty-print in JavaScript debugging features.

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

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

  • Dans animation les propriétés abrégées, à @keyframes.

  • Découvrez plus de liens dans les info-bulles de documentation.

Le style des liens peut être différent. Si vous ne savez pas s’il s’agit d’un lien, essayez de cliquer dessus pour le savoir.

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 surbrillance

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

Dans l’outil Éléments , l’onglet Styles affiche des info-bulles avec des informations utiles lorsque vous pointez sur 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. Pointez sur un nom de propriété CSS, tel que padding:.

    Une info-bulle s’affiche :

    Info-bulle avec documentation sur une propriété CSS

    DevTools extrait les descriptions des info-bulles à partir du référentiel 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é sur 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 sélectionnez Paramètres.

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

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

Spécificité du sélecteur d’affichage

Pointez sur un sélecteur CSS pour afficher une info-bulle qui affiche 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. Sous l’onglet Styles , pointez sur le body sélecteur CSS.

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

    Info-bulle avec pondération spécifique d’un sélecteur correspondant

Voir aussi :

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

Pointez sur une var(--custom-property) fonction pour voir 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. Sous l’onglet Styles , dans la body règle CSS, pointez sur --spacing.

    La valeur .3rem s’affiche 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 réduite, cliquez sur le bouton Format (Format) en bas du volet Éditeur . Pour plus d’informations, consultez Reformat a minified JavaScript file with pretty-print in JavaScript debugging features.

Affichage de la feuille de style où une règle est définie

Dans la figure ci-dessus, après avoir cliqué sur 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 fichiers CSS non valides, substitués, inactifs et autres css

L’onglet Styles reconnaît de nombreux types de problèmes CSS et les met en évidence de différentes façons.

Afficher uniquement le css qui est 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 le titre Mes tâches, puis cliquez sur Inspecter.

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

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

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

    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é . Consultez 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é . Consultez Afficher uniquement le css réellement appliqué à un élément ci-dessus.

Afficher css au niveau des règles

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

Dans l’outil Éléments , l’onglet Styles affiche les règles 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 css personnalisées de types spécifiques dans une feuille de style.

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

  • Valeur de la propriété, telle que 20%.
  • Les descripteurs de la propriété, tels que : initial value: 40%
  • Lien Afficher la propriété inscrite vers son inscription dans la section réductible @property en bas de l’onglet Styles .

Par exemple :

  1. Accédez à une page qui utilise la @property règle en règle, telle que Afficher @property les règles, 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. Sous 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é, telle que 100px.
    • Descripteurs de la propriété, tels que la valeur initiale.
    • Lien Afficher les propriétés inscrites .

  4. Cliquez sur le lien Afficher la propriété inscrite .

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

    --itemSize dans la section at-property

Pour modifier une @property règle, double-cliquez sur son nom ou sa valeur. Consultez 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 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 @supports règle à la règle, telle que Afficher @supports les règles.

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

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

    Résultat du code HTML pour la règle at-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 voir quelles versions de navigateur prennent en charge l’espace de couleur CIE LAB, recherchez « lab » dans Caniuse.com.

Afficher @scope les règles

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

Les @scope règles at vous permettent d’étendre les styles CSS, c’est-à-dire d’appliquer explicitement des styles à des éléments spécifiques. Consultez @scope CSS at-rule 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 @scope règle en règle, telle que la démonstration Afficher @scope les règles :

    Résultat du code HTML & CSS pour la règle au niveau de l’étendue

  2. Cliquez avec le bouton droit sur « Je suis le texte qui vit sur un 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 au niveau de l’étendue sous l’onglet Styles

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

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

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

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

Afficher @font-palette-values les règles

L '@font-palette-values CSS at-rule 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 @font-palette-values règle en règle, telle que la démonstration Afficher @font-palette-values au niveau des règles .

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

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

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

    Règle at-font-palette-values sous 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, puis entrez 0 blue, 1 red.

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

Afficher @position-try les règles

La @position-try règle CSS ainsi que la position-try-fallbacks propriété vous permettent de définir d’autres positions d’ancrage pour les é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 de propriété et anchor() les arguments sont liés aux éléments correspondants qui ont popovertarget des attributs.

Par exemple, inspectez 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 position-try-fallbacks valeurs et @position-try la règle, telle que la démonstration Afficher @position-try au niveau des règles .

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

    Le sous-menu s’affiche, affichant une liste de commandes : LISTINGS, SPECIAL OFFERS, SIGN OUT.

  3. Dans le sous-menu, cliquez avec le bouton droit sur LISTINGS au-dessus, 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

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

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

    Section at-position-try sous l’onglet Styles

  5. Sous 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 sur la valeur.

Voir aussi :

Afficher le modèle box d’un élément

Pour afficher le modèle de zone d’un élément, accédez au volet Styles , puis faites défiler vers le bas.

Pour modifier une valeur, double-cliquez sur la valeur.

Dans l’illustration suivante, le diagramme Modèle de zone dans le volet Styles montre le modèle de zone pour l’élément actuellement sélectionné h1 :

Diagramme du modèle box

Voir aussi :

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

Utilisez la zone de texte Filtrer dans les volets Styles et Calculés pour rechercher des propriétés ou des valeurs CSS spécifiques.

Pour rechercher également des propriétés héritées dans le volet Calculé, case activée la case Afficher tout.

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 prioritaire

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

  • Listes déroulantes.
  • Menus.
  • 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 , sous l’onglet Styles , cliquez sur :hov (Activer/désactiver l’état de l’élément), puis cochez la case Émuler une page prioritaire .
  • Dans l’outil Rendu , cochez la case Émuler une page prioritaire .

Attention: Lorsque cette option est activée, est document.visibilityState défini sur visible et l’événement visibilitychange ne se déclenche pas. Consultez API visibilité des pages sur MDN.

Pour essayer d’émuler une page prioritaire :

  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 apparaît sous la zone de texte d’entrée, indiquant « Ce message n’apparaît que lorsque la zone de texte est prioritaire ».

  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 message disparaît. La fenêtre DevTools est maintenant en focus, au lieu de la page web inspectée, de sorte que l’élément de message disparaît.

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

  5. Vérifiez 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 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 :

    La case Émuler une page prioritaire est cochée

  6. Nettoyage : dans l’outil Éléments , sous 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 Émuler une page prioritaire s’affiche également dans l’outil Rendu . consultez Outil de rendu pour voir à quoi ressemble une page web avec différentes options d’affichage ou déficiences visuelles.

Voir aussi :

Activer/désactiver une pseudo-classe

Pour activer/désactiver 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. Dans le coin supérieur droit, cliquez sur :hov.

    Les cases à cocher s’affichent.

  8. Cochez la case pour 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 rempli avec une coche, 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 survolé, même si l’élément n’était pas réellement survolé.

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

En outre, 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 d’état spécifique à l’élément Force que vous pouvez développer et activer des pseudo-classes spécifiques à l’élément, telles qu’une case à cocher :lecture-écriture :

Section Force de l’état d’élément spécifique d’un élément ' textarea'

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

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

Les pseudo-éléments vous permettent d’appliquer un style à des parties spécifiques d’éléments. Les pseudo-éléments en surbrillance sont des parties de document avec un status « sélectionné » et leur style est « mis en surbrillance » pour indiquer cette status à l’utilisateur.

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

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

En cas de conflit entre plusieurs styles, la cascade CSS détermine le style gagnant. Consultez Présentation de la cascade CSS sur MDN.

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

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

  1. Accédez à la démonstration Mettre en surbrillance les 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 mon parent. Sélectionnez-moi !

    Le texte sélectionné se transforme en texte rouge sur arrière-plan jaune.

  3. Cliquez avec le bouton droit sur le texte « J’ai hérité du style du pseudo-élément de surbrillance de mon parent. Sélectionnez-moi !, puis inspectez.

    DevTools s’ouvre. Dans l’outil Éléments , sous l’onglet Styles , la section est affichée : Héritée de ::selection pseudo de div.text-parent :

    Afficher la section Héritée sous l’onglet Styles

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

    Sous l’onglet Styles , la section s’affiche : Pseudo ::selection, élément :

    Afficher la section Pseudo sous 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. Cela est utile pour :

  • Codebases volumineux.
  • 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. Sous l’onglet Styles , affichez les trois couches en cascade et leurs styles : pageet componentbase:

    Couches en cascade

  5. Pour afficher l’ordre des calques, cliquez sur le nom de la couche (page, composant ou base). Vous pouvez également cliquer sur l’icône Activer/désactiver l’affichage Couches CSSicône Activer/désactiver l’affichage Couches CSS .

    La page couche ayant la plus grande spécificité, 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édez à une page web.

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

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour que la barre d’outils Affichage rapide s’affiche 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 en bas de DevTools.

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

    La page web est affichée comme si elle était à l’impression.

  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 Aucune émulation.

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

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

  1. Ouvrez le menu Commandes en appuyant sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS), tandis que DevTools a le focus.

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

    Ouverture de l’outil Couverture à partir du menu Commandes

    L’outil Couverture s’affiche :

    L’outil Couverture

  3. Cliquez sur Démarrer la couverture de l’instrumentation et actualisez la page (Démarrer la couverture de l’instrumentation et actualiser la page). La page s’actualise et l’outil Couverture 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 le code CSS inutilisé.

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

    Vue d’ensemble de la quantité de CSS (et 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 CSS, des déclarations, des propriétés ou des valeurs distinctes . Consultez Notions 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 ; Consultez Modification de style pour les frameworks CSS-in-JS.

Pour copier css :

  1. Accédez à une page web qui utilise CSS, 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 un élément, tel que <h1>.

  4. Sous 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 contextuel :

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

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

    • Copiez la valeur. Copie uniquement le value.

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

    • Copiez la déclaration en tant que 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 en tant que 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 sous l’onglet Styles sur toutes les déclarations. Cet élément de menu s’affiche de manière conditionnelle.

    • Afficher la valeur calculée. Vous dirige vers l’onglet Calculé ; Consultez 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 css dans lesstylesd’éléments>.

En outre, vous pouvez :

Deux façons 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 inline 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 inline à un élément

L’ajout d’une déclaration inline équivaut à ajouter un style attribut au code HTML d’un élément. Pour la plupart des scénarios, vous souhaiterez probablement utiliser des déclarations inline.

Les déclarations inline ont une spécificité plus élevée que les déclarations externes. Par conséquent, l’utilisation de déclarations inline garantit que les modifications prennent effet dans votre élément attendu spécifique. Pour plus d’informations sur la spécificité, consultez Types de sélecteurs dans spécificité sur MDN.

Pour ajouter une déclaration inline :

  1. Sélectionnez un élément.

  2. Dans le volet Styles , cliquez entre les crochets de la section element.style . Le curseur se concentre, ce qui vous permet d’entrer du texte.

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

  4. Entrez une valeur valide pour cette propriété, puis 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é, puis DevTools suggère une liste de paires propriété : value correspondantes à sélectionner. 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 l’élément style .

Ajouter des déclarations inline

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 se concentre, ce qui vous permet d’entrer du texte.

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

  4. Entrez une valeur valide pour cette propriété, puis 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 :

Modification de la valeur d’une déclaration

Pour modifier une valeur numérique, tapez la valeur ou utilisez les touches de direction, selon la section suivante.

Modifier les valeurs énumérables à l’aide 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’un montant fixe :

Combinaison de touches Action
Alt+Flèche haut (Windows, Linux), Option+HautArrow (macOS) Incrémentez de 0,1.
Flèche 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+PgUp (Windows, Linux), Maj+Commande+HautArrow (macOS) Incrémentez de 100.

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

Modifier les valeurs de longueur

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

Pour modifier l’unité de longueur :

  1. Ouvrez une page web qui utilise CSS, telle que 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. Sous 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, montrant 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 une roue de souris ou des touches haut/bas. Ctrl : +/-100, Maj : +/-10, Alt : +/-0.1"

  5. Déplacez le volant de la souris ou appuyez sur les touches UpArrow et DownArrow , 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 tâche d’entrée change de largeur à mesure que vous modifiez la valeur.

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

  7. Déplacez à nouveau le volant de la souris ou appuyez sur les touches UpArrow et DownArrow , tout en maintenant la touche Ctrl (+/-100), Maj (+/-10) ou Alt (+/-0.1).

    Dans la page web inspectée, la zone de texte Ajouter une tâche d’entrée change de largeur à mesure que 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 sombre et activer le mode sombre automatique

Pour activer/désactiver le mode sombre automatique ou émuler la préférence de l’utilisateur en matière de thèmes clairs ou sombres :

  1. Dans l’outil Éléments , sous l’onglet Styles , cliquez sur le bouton Activer/désactiver les émulations de rendu courantes (icône Pinceau) 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 : clair. Indique que l’utilisateur préfère le thème clair.

    • prefers-color-scheme : foncé. 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. En outre, définit prefers-color-scheme automatiquement sur dark .

Cette liste déroulante est un raccourci pour la fonctionnalité prefers-color-schemeÉmuler les médias CSS et Activer les options de mode sombre automatique de l’outil Rendu.

Voir aussi :

Activer/désactiver 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 le volet Classes d’éléments . Consultez 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. Activez la case à cocher 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 l’illustration suivante, DevTools ajoute la règle de h1.devsite-page-title style après avoir 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 place la règle dans une feuille de style existante :

  • Cliquez de façon longue 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 inspector-stylesheet feuille de style.

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

  1. Dans l’outil Éléments , sous l’onglet Styles , pointez sur la règle de style qui se trouve directement au-dessus de l’emplacement 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 , pointez sur la règle qui définit la déclaration. Une case à cocher s’affiche 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 barre 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 la modification color des déclarations et background-color .

Pour ouvrir le sélecteur de couleurs :

  1. Sélectionnez un élément.

  2. Dans le volet Styles , recherchez la colordéclaration , background-colorou similaire que vous souhaitez modifier. À gauche de la colorvaleur , background-colorou 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.

    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 Nuances
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 modifier la couleur.
6 Teinte
7 Opacité
8 Sélecteur de valeurs d’affichage Basculez entre les représentations RGBA, HSLA et Hex de la couleur actuelle.
9 Sélecteur de palette de couleurs Basculez entre la palette Création de matériau, une palette personnalisée ou une palette de couleurs de page. DevTools génère la palette de couleurs de page en fonction des couleurs qu’elle 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 devient une loupe.

  2. Pointez 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 montre une valeur de couleur actuelle de , qui est proche du rgba(0,0,0,0.7)noir. La couleur spécifique devient la version du noir qui est actuellement mise en surbrillance dans la fenêtre d’affichage après avoir cliqué dessus.

    Utilisation de la pipette

Voir aussi :

Modifier la valeur de l’angle avec l’horloge

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

Pour ouvrir l’horloge à 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 angle :

    Aperçu de l’angle

  4. Modifiez la valeur de l’angle en cliquant sur le cercle Horloge à 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. Pour en savoir plus, consultez les raccourcis clavier du volet Styles.

Modifier les ombres de zone et de texte avec l’Éditeur d’ombres

Utilisez l’éditeur d’ombres pour modifier la valeur de la box-shadow propriété OU text-shadow 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 Éléments , sélectionnez l’élément <div class="demos"> .

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

    L’éditeur d’ombres s’ouvre :

    Éditeur d’ombres

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

    Propriété Guide pratique pour modifier
    Type Sélectionnez Début ou Entrée. 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.
    Propagation 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 :

    Effet des modifications apportées à l’éditeur d’ombres

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 Éléments , 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 <div class="spinner"> qui se trouve à l’intérieur <div class="animation-demo good">de .

    Les zones 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 à l’aide de la animation propriété CSS et définissent une ease-in-out fonction de minutage.

  3. Sous 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 éditeur de bézier cubique).

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

    L’é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ésélections dans 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 de l’ergonomie Fonctions d’ergonomie ease-in-out
    Fonctions d’accélération d’ergonomie Fonctions d’ergonomie ease-in
    Fonctions d’accélération d’ergonomie Fonctions d’ergonomie ease-out

    La sélection d’un bouton définit une valeur 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 Présélections s’ouvre en bas de l’éditeur d’accélération.

  3. Dans le sélecteur Présélections, cliquez sur les boutons Gauche< ou Droite> pour sélectionner l’une des présélections suivantes :

    • Préréglages linéaires : elastic, bounceou emphasized.

    • Présélections de Bézier cubiques :

    Mot clé de minutage Préréglage Bézier cubique
    facilité d’entrée In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    facilité d’entrée In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    facilité d’entrée In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    facilité d’entrée Sortie rapide, entrée lente cubic-bezier(0.4, 0, 0.2, 1)
    facilité d’entrée In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Mot clé de minutage Préréglage Bézier cubique
    facilité d’entrée In, sinus cubic-bezier(0.47, 0, 0.75, 0.72)
    facilité d’entrée In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
    facilité d’entrée In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    facilité d’entrée In, Retour cubic-bezier(0.6, -0.28, 0.74, 0.05)
    facilité d’entrée Sortie rapide, entrée linéaire cubic-bezier(0.4, 0, 1, 1)
    Mot clé de minutage Préréglage Bézier cubique
    facilité d’ergonomie Dehors, sinus cubic-bezier(0.39, 0.58, 0.57, 1)
    facilité d’ergonomie Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
    facilité d’ergonomie Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    facilité d’ergonomie Sortie linéaire, entrée lente cubic-bezier(0, 0, 0.2, 1)
    facilité d’ergonomie Out, Back 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 minutage, utilisez les points de contrôle sur les lignes :

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

    Faire glisser 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 :

    Faire glisser les 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émos:

MDN :

Github:

Web.dev :

Blog Chrome pour les développeurs :

Documentation Chrome :

material.io :

Remarque

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

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.

  • Last updated on