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

Découvrez de nouveaux workflows dans cette documentation de référence complète sur les fonctionnalités des outils pour les développeurs Chrome permettant d'afficher et de modifier le CSS.

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

Sélectionnez un élément

Le panneau Éléments des outils pour les développeurs vous permet d'afficher ou de modifier le CSS d'un élément à la fois.

Sur la capture d'écran, l'élément h1 mis en évidence en bleu dans l'arborescence DOM est l'élément sélectionné. À droite, les styles de l'élément sont affichés dans l'onglet Styles. À gauche, l'élément est mis en surbrillance dans la fenêtre d'affichage, mais uniquement parce que la souris pointe dessus dans l'arborescence DOM.

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

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

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

Afficher le CSS

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

Naviguer avec des liens

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

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

En voici quelques-uns :

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

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

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

Afficher la documentation CSS

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

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

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

Pour les réactiver, cochez Paramètres > Préférences > Éléments > Afficher l'info-bulle de documentation CSS.

Afficher la spécificité du sélecteur

Passez la souris sur un sélecteur dans l'onglet Styles (y compris les sélecteurs parents dans les règles CSS imbriquées, les règles imbriquées héritées et les règles @nested-declarations) pour afficher une info-bulle avec son poids de spécificité et mettre en surbrillance les éléments correspondants dans la fenêtre d'affichage.

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

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

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

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

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

L'onglet Styles affiche toutes les règles qui s'appliquent à un élément, y compris les déclarations qui ont été remplacées. Si les déclarations remplacées ne vous intéressent pas, utilisez l'onglet Computed (Calculé) pour n'afficher que le CSS réellement appliqué à un élément.

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

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

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

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

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

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

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

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

Afficher les règles @ CSS

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

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

Afficher les règles @ @property

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

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

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

Afficher les règles @ @supports

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

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

Afficher les règles @ @scope

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

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

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

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

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

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

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

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

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

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

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

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

Afficher les règles @ @position-try

La règle CSS @position-try associée à la propriété position-try-options vous permet de définir d'autres positions d'ancrage pour les éléments. Pour en savoir plus, consultez Présentation de l'API CSS Anchor Positioning.

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

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

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

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

Pour modifier des valeurs, double-cliquez dessus.

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

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

Pour modifier une valeur, double-cliquez dessus.

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

Utilisez le champ Filtre des onglets Styles et Calculé pour rechercher des sélecteurs CSS spécifiques (y compris les sélecteurs parents dans les règles imbriquées), des propriétés ou des valeurs.

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

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

Émuler une page sélectionnée

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

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

1. Sélectionnez l'élément d'entrée. Un autre élément s'affiche en dessous.
2. Ouvrez les outils de développement. La fenêtre des outils de développement est désormais sélectionnée à la place de la page, de sorte que l'élément disparaît à nouveau.
3. Dans Éléments > Styles, cliquez sur :hov, cochez check_box Émuler une page sélectionnée et assurez-vous que l'élément d'entrée est sélectionné. Vous pouvez maintenant inspecter l'élément situé en dessous.

Vous pouvez également trouver la même option dans le panneau Rendu.

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

Activer/Désactiver une pseudo-classe

Pour activer ou désactiver une pseudo-classe :

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

Dans cet exemple, vous pouvez voir que les outils de développement appliquent la déclaration background-color à l'élément, même si l'utilisateur ne pointe pas réellement dessus.

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

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

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

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

Afficher les pseudo-éléments de mise 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 de mise en surbrillance sont des parties du document dont l'état est "sélectionné". Ils sont stylisés comme "mis en surbrillance" pour indiquer cet état à l'utilisateur. Par exemple, ces pseudo-éléments sont ::selection, ::spelling-error, ::grammar-error et ::highlight.

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

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

1. Inspectez le texte ci-dessous.

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

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

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

Afficher les calques en cascade

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

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

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

Pour afficher l'ordre des couches, cliquez sur le nom de la couche ou sur le bouton Activer/Désactiver la vue des couches CSS.

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

Afficher une page en mode impression

Pour afficher une page en mode impression :

1. Ouvrez le menu de commandes.
2. Commencez à saisir Rendering et sélectionnez Show Rendering.
3. Dans le menu déroulant Émuler les médias CSS, sélectionnez print.

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

L'onglet "Couverture" indique le code CSS réellement utilisé par une page.

1. Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) lorsque les outils de développement sont actifs pour ouvrir le menu de commande.

2. Commencez à saisir du texte coverage.

   

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

   

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

   

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

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

   

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

Forcer le mode Aperçu avant impression

Consultez Forcer les outils de développement à passer en mode Aperçu avant impression.

Copier le code CSS

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

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

Pour copier le CSS :

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

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

   • Déclaration de copie Copie la propriété et sa valeur dans la syntaxe CSS : css property: value;
   • Copier la propriété. Copie uniquement le nom de l'élément property.
   • Copiez la valeur. Copie uniquement le value.
   • Copier la règle. Copie l'intégralité de la règle CSS : 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 : js propertyInCamelCase: 'value'
   • Copier toutes les déclarations Copie toutes les propriétés et leurs valeurs dans la règle CSS : css property: value; property: value; ...

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

   • Copier toutes les modifications CSS. Copie les modifications que vous apportez dans l'onglet Styles dans toutes les déclarations.

   • Afficher la valeur calculée Vous accédez à l'onglet Calculé.

Modifier le CSS

Cette section liste toutes les façons de modifier le CSS dans Éléments > Styles.

Vous pouvez en outre :

• Remplacez le CSS lors des chargements de page.
• Enregistrez le CSS modifié dans vos sources locales dans un espace de travail.

Modifier le CSS avec la complétion de code

Pour tester des combinaisons plus complexes de propriétés CSS, comme des dégradés ou des ombres de boîte, sans avoir à mémoriser leur syntaxe exacte, ou pour créer rapidement des mises en page de grille et flexibles, en vous appuyant sur plusieurs propriétés associées, vous pouvez commencer à saisir une propriété CSS et utiliser la saisie semi-automatique du code.

Ajouter une déclaration CSS à un élément

Étant donné que l'ordre des déclarations affecte le style d'un élément, vous pouvez ajouter des déclarations de différentes manières :

• Ajoutez une déclaration intégrée. Équivaut à ajouter un attribut style au code HTML de l'élément.
• Ajouter une déclaration à une règle de style

Quel workflow devez-vous utiliser ? Dans la plupart des cas, vous souhaiterez probablement utiliser le workflow de déclaration intégrée. Les déclarations intégrées ont une spécificité plus élevée que les déclarations externes. Le workflow intégré garantit donc que les modifications prennent effet dans l'élément comme prévu. Pour en savoir plus sur la spécificité, consultez Types de sélecteurs.

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, utilisez l'autre workflow.

Ajouter une déclaration intégrée

Pour ajouter une déclaration intégrée :

1. Sélectionnez un élément.
2. Dans l'onglet Styles, cliquez entre les crochets de la section element.style. Le curseur se positionne, ce qui vous permet de saisir du texte.
3. Saisissez un nom de propriété, puis appuyez sur Entrée.

4. Saisissez une valeur valide pour cette propriété, puis appuyez sur Entrée. Dans l'arborescence DOM, vous pouvez voir qu'un attribut style a été ajouté à l'élément.

   

   Sur la capture d'écran, les propriétés margin-top et background-color ont été appliquées à l'élément sélectionné. Dans l'arborescence DOM, vous pouvez voir les déclarations reflétées dans l'attribut style de l'élément.

Ajouter une déclaration à une règle de style

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

1. Sélectionnez un élément.
2. Dans l'onglet Styles, cliquez entre les crochets de la règle de style à laquelle vous souhaitez ajouter la déclaration. Le curseur se place sur le champ, ce qui vous permet de saisir du texte.
3. Saisissez un nom de propriété, puis appuyez sur Entrée.
4. Saisissez une valeur valide pour cette propriété, puis appuyez sur Entrée.

Sur la capture d'écran, une règle de style reçoit la nouvelle déclaration border-bottom-style:groove.

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

Double-cliquez sur le nom ou la valeur d'une déclaration pour la modifier. Consultez Modifier des valeurs énumérables à l'aide de raccourcis clavier pour découvrir les raccourcis permettant d'incrémenter ou de décrémenter rapidement une valeur de 0, 1, 1, 10 ou 100 unités.

Modifier les valeurs énumérables avec des raccourcis clavier

Lorsque vous modifiez une valeur énumérable d'une déclaration, par exemple font-size, vous pouvez utiliser les raccourcis clavier suivants pour incrémenter la valeur d'un montant fixe :

• Option+Flèche vers le haut (Mac) ou Alt+Flèche vers le haut (Windows, Linux) pour augmenter la valeur de 0,1.
• Haut pour modifier la valeur de 1, ou de 0,1 si la valeur actuelle est comprise entre -1 et 1.
• Maj+flèche vers le haut pour augmenter la valeur de 10.
• Maj+Commande+Flèche vers le haut (Mac) ou Ctrl+Maj+Page précédente (Windows, Linux) pour augmenter la valeur de 100.

La décrémentation fonctionne également. Il vous suffit de remplacer chaque occurrence de Up mentionnée précédemment par Down.

Modifier les valeurs de longueur

Vous pouvez utiliser votre pointeur pour modifier n'importe quelle propriété avec une longueur, comme la largeur, la hauteur, la marge intérieure, la marge ou la bordure.

Pour modifier l'unité de longueur :

1. Pointez sur le nom de l'unité et notez qu'il est souligné.

2. Cliquez sur le nom de l'unité pour en sélectionner une dans le menu déroulant.

Pour modifier la valeur de la longueur :

1. Pointez sur la valeur de l'unité. Vous remarquerez que votre pointeur prend la forme d'une flèche horizontale à deux têtes.

2. Faites glisser le doigt horizontalement pour augmenter ou diminuer la valeur.

Pour ajuster la valeur de 10, maintenez la touche Maj enfoncée pendant que vous faites glisser le curseur.

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. Saisissez le nom du cours dans la zone Ajouter un cours.
4. Appuyez sur Entrée.

Émuler les préférences de thème clair et sombre, 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'onglet Éléments > Styles, cliquez sur 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é. Définit également prefers-color-scheme sur dark automatiquement.

Ce menu déroulant est un raccourci vers les options Émuler la fonctionnalité média CSS prefers-color-scheme et Activer le mode sombre automatique de l'onglet Rendu.

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 la section Classes d'éléments. Consultez Ajouter une classe à un élément. Sous la zone Add New Class (Ajouter une classe), vous trouverez toutes les classes appliquées à cet élément.
3. Cochez la case à côté du cours que vous souhaitez activer ou désactiver.

Ajouter une règle de style

Pour ajouter une règle de style :

1. Sélectionnez un élément.
2. Cliquez sur Nouvelle règle de style . Les outils de développement insèrent une nouvelle règle sous la règle element.style.

Sur la capture d'écran, les outils de développement ajoutent la règle de style h1.devsite-page-title après avoir cliqué sur New Style Rule (Nouvelle règle de style).

Choisissez la feuille de style à laquelle ajouter une règle.

Lorsque vous ajoutez une règle de style, cliquez de manière prolongée sur Nouvelle règle de style pour choisir la feuille de style à laquelle ajouter la règle de style.

Activer/Désactiver une déclaration

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

1. Sélectionnez un élément.
2. Dans l'onglet Styles, pointez sur la règle qui définit la déclaration. Des cases à cocher s'affichent à côté de chaque déclaration.
3. Cochez ou décochez la case à côté de la déclaration. Lorsque vous effacez une déclaration, les outils de développement la barrent pour indiquer qu'elle n'est plus active.

Sur la capture d'écran, la propriété color de l'élément actuellement sélectionné est désactivée.

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

Consultez la section correspondante dans Animations.

Pour en savoir plus, consultez Transitions simples et fluides avec l'API View Transitions.

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

Consultez la section correspondante dans "Inspecter la grille CSS".

Modifier les couleurs avec le sélecteur de couleur

Consultez Inspecter et déboguer les couleurs HD et non HD avec le sélecteur de couleur.

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

Angle Clock fournit une IUG permettant de modifier les <angle> dans les valeurs de propriété CSS.

Pour ouvrir l'horloge d'angle :

1. Sélectionnez un élément avec une déclaration d'angle.

2. Dans l'onglet Styles, recherchez la déclaration transform ou background que vous souhaitez modifier. Cochez la case Aperçu de l'angle à côté de la valeur de l'angle.

   

   Les petites horloges à gauche de -5deg et 0.25turn sont les aperçus d'angle.

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

   

4. Modifiez la valeur de l'angle en cliquant sur le cercle Angle Clock (Horloge d'angle) ou faites défiler la souris pour augmenter / diminuer la valeur de l'angle de 1.

5. Il existe davantage de raccourcis clavier pour modifier la valeur de l'angle. Pour en savoir plus, consultez les raccourcis clavier du volet "Styles".

Modifier les ombres des zones et du texte avec l'éditeur d'ombres

L'éditeur de shadow fournit une interface utilisateur graphique permettant de modifier les déclarations CSS text-shadow et box-shadow.

Pour modifier les ombres avec l'éditeur d'ombres :

1. Sélectionnez un élément avec une déclaration d'ombre. Par exemple, sélectionnez l'élément suivant.

2. Dans l'onglet Styles, recherchez l'icône d'ombre  à côté de la déclaration text-shadow ou box-shadow.

   

3. Cliquez sur l'icône d'ombre pour ouvrir l'éditeur d'ombre.

   

4. Modifiez les propriétés de l'ombre :

   • Type (uniquement pour box-shadow) : sélectionnez Extérieur ou Intérieur.
   • Décalages X et Y. Faites glisser le point bleu ou spécifiez des valeurs.
   • Flou Faites glisser le curseur ou spécifiez une valeur.
   • Écart (uniquement pour box-shadow) : faites glisser le curseur ou spécifiez une valeur.

5. Observez les modifications appliquées à l'élément.

Modifier la durée des animations et des transitions avec l'éditeur de lissage

L'éditeur d'accélération fournit une IUG permettant de modifier les valeurs de transition-timing-function et animation-timing-function.

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

1. Sélectionnez un élément avec une déclaration de fonction de minutage, comme l'élément <body> sur cette page.
2. Dans l'onglet Styles, recherchez l'icône violette  à côté des déclarations transition-timing-function, animation-timing-function ou de la propriété abrégée transition.
3. Cliquez sur l'icône pour ouvrir l'éditeur d'accélération :

Utiliser des préréglages pour ajuster les minutages

Pour ajuster les codes temporels en un clic, utilisez les préréglages de l'éditeur d'accélération :

1. Dans l'éditeur d'interpolation, pour définir une valeur de mot clé, cliquez sur l'un des boutons du sélecteur :
   • linéaire
   • ease-in-out
   • ease-in
   • ease-out

2. Dans le sélecteur de préréglages, cliquez sur les boutons  ou  pour sélectionner l'un des préréglages suivants :

   • Préréglages linéaires : elastic, bounce ou emphasized.
   • Préréglages Cubic Bezier :

Mot clé de timing	Prédéfini	Courbe de Bézier cubique
lissage à l'approche/l'éloignement	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Quadratique int./ext.	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Sortie rapide, entrée lente	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
lissage à l'approche	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	Quadratique int.	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Sortie rapide, entrée linéaire	cubic-bezier(0.4, 0, 1, 1)
lissage à l'éloignement	Sortie, sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Quadratique ext.	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Sortie, cubique	cubic-bezier(0.22, 0.61, 0.36, 1)
	Sortie linéaire, entrée lente	cubic-bezier(0, 0, 0.2, 1)
	Sortie, Retour	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configurer des timings 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, puis faites-le glisser. Double-cliquez pour supprimer le point.

  

• Pour les fonctions de courbe de Bézier cubique, faites glisser l'un des points de contrôle.

  

Toute modification déclenche une animation de balle dans l'aperçu en haut de l'éditeur.

(Expérimental) Copier les modifications CSS

Lorsque cette fonctionnalité expérimentale est activée, l'onglet Styles met en évidence vos modifications CSS en vert.

Pour copier une seule modification de déclaration CSS, pointez sur la déclaration en surbrillance, puis cliquez sur le bouton Copier.

Pour copier toutes les modifications CSS dans les déclarations en une seule fois, effectuez un clic droit sur une déclaration, puis sélectionnez Copier toutes les modifications CSS.

Vous pouvez également suivre les modifications que vous apportez dans l'onglet Modifications.