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

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Découvrez de nouveaux workflows dans ce document de référence complet des outils pour les développeurs Chrome concernant l'affichage et la modification des CSS.

Consultez l'article Afficher et modifier le CSS pour en savoir plus.

Sélectionnez un élément

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

Exemple d'élément sélectionné.

Sur la capture d'écran, l'élément h1 mis en surbrillance 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 le survole dans l'arborescence DOM.

Pour en savoir plus, consultez l'article Afficher le code CSS d'un élément.

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

  • Dans la fenêtre d'affichage, faites un clic droit sur l'élément, puis sélectionnez Inspecter.
  • Dans les outils de développement, cliquez sur Sélectionner un élément Sélectionnez un élément ou appuyez sur Cmd+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 "Elements".

Afficher le CSS

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

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

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

Voici quelques-unes d'entre elles:

Différents liens encadrés.

Le style des liens peut varier. Si vous n'êtes pas sûr qu'un élément correspond à un lien, essayez de cliquer dessus pour le découvrir.

Afficher des info-bulles avec 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.

Consulter la documentation CSS

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

Info-bulle contenant de la documentation sur une propriété CSS.

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

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

Pour les réactiver, accédez à Paramètres. Paramètres > Préférences > Éléments > Case à cocher. Afficher l'info-bulle de la documentation CSS.

Spécificité du sélecteur de vue

Pointez sur un sélecteur pour afficher une info-bulle indiquant sa pondération de spécificité.

Info-bulle avec la pondération de spécificité d'un sélecteur correspondant.

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

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

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

Afficher les éléments CSS non valides, remplacés, inactifs et autres

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

Consultez la section Comprendre le langage CSS dans l'onglet "Styles".

Afficher uniquement le code CSS appliqué à un élément

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

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

Onglet "Calculs"

Cochez la case Show All (Tout afficher) pour voir toutes les propriétés.

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

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

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

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

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

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

Affichez la section Héritée de... de l&#39;onglet &quot;Styles&quot;.

Afficher les règles CSS

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

Afficher @property at-rules

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

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

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

Afficher @supports at-rules

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

Consultez les @supports at-rules.

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

Afficher @scope at-rules

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

La nouvelle règle at @scope fait partie de la spécification CSS Cascading and Inheritance Level 6 (en cascade et d'héritage de niveau 6 des CSS). Ces règles vous permettent de définir la portée des styles CSS. En d'autres termes, vous pouvez appliquer des styles explicitement à des éléments spécifiques.

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

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

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> à l'intérieur d'éléments ayant une classe card.

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

Afficher @font-palette-values at-rules

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

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

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

Règle @font-palette-values.

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

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

Afficher le modèle de zone d'un élément

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

Schéma du modèle Box.

Pour modifier une valeur, double-cliquez dessus.

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

Utilisez la zone Filtre des onglets Styles et Calculés pour rechercher des propriétés ou des valeurs CSS spécifiques.

Filtrer l&#39;onglet Styles

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

Filtrer les propriétés héritées dans l&#39;onglet &quot;Calculé&quot;

Pour parcourir l'onglet Calculé, regroupez les propriétés filtrées en catégories réductibles en cochant la case Groupe.

Regroupement des propriétés filtrées.

Émuler une page sélectionnée

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

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

  1. Sélectionner l'élément d'entrée Un autre élément apparaît en dessous.
  2. Accédez aux outils de développement. La fenêtre "Outils de développement" est désormais active au lieu de la page. L'élément disparaît donc à nouveau.
  3. Dans Éléments > Styles, cliquez sur :hov, cochez la case 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 en dessous.

Avant et après l&#39;activation de l&#39;option &quot;Émuler une page sélectionnée&quot;

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

Activer/Désactiver une pseudo-classe

Pour activer/désactiver une pseudo-classe, telle que :active, :focus, :focus-within, :target, :hover, :visited ou focus-visible:

  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.

Activer/Désactiver le pseudo-état de survol sur un élément

Dans la fenêtre d'affichage, vous pouvez voir que les outils de développement appliquent la déclaration background-color à l'élément, même si celui-ci ne passe pas dessus.

Consultez la section Ajouter un pseudo-état à une classe pour suivre un tutoriel interactif.

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 en surbrillance sont des parties du document dont l'état est "selected" (sélectionné). Leur style est "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 règle "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 vers le bas pour trouver la section Inherited from ::selection pseudo of....

Affichez la section &quot;Hérité&quot; de l&#39;onglet &quot;Styles&quot;.

Afficher les couches de cascade

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

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

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

Couches en cascade

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

La couche page présente la spécificité la plus élevée. L'arrière-plan de l'élément est donc vert.

Pour afficher une page en mode d'impression:

  1. Ouvrez le menu Commandes.
  2. Commencez à saisir Rendering et sélectionnez Show Rendering.
  3. Dans la liste déroulante Émuler le média CSS, sélectionnez imprimer.

Consultez les CSS utilisés et inutilisés dans l'onglet "Couverture"

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

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

  2. Commencez à saisir coverage.

    Ouverture de l&#39;onglet Couverture à partir du menu Commandes.

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

    Onglet &quot;Couverture&quot;

  4. Cliquez sur Commencez à instrumenter la couverture et actualiser la page. Actualiser. La page s'actualise et l'onglet Couverture indique la quantité de code CSS (et JavaScript) utilisée à partir de chaque fichier chargé par le navigateur.

    Aperçu de la quantité de code CSS (et JavaScript) utilisée et non utilisée.

    Le vert représente le code CSS utilisé. Le rouge représente les ressources CSS inutilisées.

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

    Une répartition ligne par ligne des CSS utilisés et inutilisés.

    Sur cette 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 sont utilisées.

Forcer le mode Aperçu avant impression

Consultez Forcer le mode d'aperçu avant impression dans les outils de développement.

Copier le CSS

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

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

Pour copier le code CSS:

  1. Sélectionnez un élément.
  2. Dans l'onglet Éléments > Styles, effectuez un clic droit sur une propriété CSS. Menu déroulant &quot;Copier le CSS&quot;.

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

    • Copier la déclaration : Copie la propriété et sa valeur dans la syntaxe CSS : css property: value;
    • Copier la propriété : Ne copie que le nom property.
    • Copier la valeur : Ne copie que 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 en tant que 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.

    • Affichez la valeur calculée. Vous permet d'accéder à 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 effectuer l'opération suivante :

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:

Quel workflow devez-vous utiliser ? Dans la plupart des cas, vous souhaiterez probablement utiliser le workflow de déclaration intégré. Les déclarations intégrées ont une plus grande spécificité 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 la section 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 met en surbrillance, 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.

    Ajouter des déclarations intégrées

    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, les déclarations sont 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 effectue la mise au point, 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.

Modifier la valeur d&#39;une déclaration.

Sur la capture d'écran, une règle de style obtient 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 la section Modifier des valeurs énumérables à l'aide de raccourcis clavier pour connaître les raccourcis permettant d'incrémenter ou de décrémenter rapidement une valeur de 0, 1, 1, 10 ou 100 unités.

Modifier des valeurs énumérables à l'aide de 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'une valeur fixe:

  • Option+Haut (Mac) ou Alt+Haut (Windows, Linux) pour incrémenter de 0,1.
  • Haut pour modifier la valeur par 1 ou par 0, 1 si la valeur actuelle est comprise entre -1 et 1.
  • Maj+Haut pour incrémenter de 10 unités.
  • Maj+Commande+Haut (Mac) ou Ctrl+Maj+Page précédente (Windows, Linux) pour incrémenter la valeur de 100.

Le décrémentation fonctionne également. Remplacez simplement chaque instance 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 du bloc et notez qu'il est souligné.

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

Pour modifier la valeur de longueur:

  1. Pointez sur la valeur de l'unité. Le pointeur prend alors la forme d'une flèche horizontale à double pointe.

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

Pour ajuster la valeur de 10, maintenez la touche Maj enfoncée tout en faisant glisser la souris.

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 de la classe dans le champ Ajouter une classe.
  4. Appuyez sur Entrée.

Section &quot;Classes d&#39;éléments&quot;.

Émuler les préférences des thèmes clair et sombre, et activer le mode sombre automatique

Pour activer/désactiver le mode sombre automatique ou émuler les préférences de l'utilisateur concernant le thème clair ou sombre:

  1. Dans l'onglet Éléments > Styles, cliquez sur Activer/Désactiver les émulations de rendu courantesActiver/Désactiver les émulations de rendu courantes. Activer/Désactiver les émulations de rendu courantes

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

    • prefers-color-scheme: claire. Indique que l'utilisateur préfère le thème clair.
    • prefers-color-scheme: sombre. 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é. De plus, il définit automatiquement prefers-color-scheme sur dark.

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

Activer/Désactiver un cours

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), toutes les classes appliquées à cet élément sont affichées.
  3. Cochez la case à côté du cours 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.. Les outils de développement insèrent une nouvelle règle sous la règle element.style.

Ajout d&#39;une nouvelle règle de style.

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

Sélectionner 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 Nouvelle règle de style. pour choisir la feuille de style à laquelle ajouter la règle.

Choisir une feuille 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 située à 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.

Activer/Désactiver une déclaration.

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

Reportez-vous à la section correspondante dans Animations.

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

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

Reportez-vous à la section correspondante dans la section "Inspecter la grille CSS".

Modifier les couleurs à l'aide du sélecteur de couleurs

Consultez Inspecter et déboguer les couleurs HD et non HD à l'aide du sélecteur de couleur.

Modifier la valeur de l'angle avec l'Angle Horloge

L'horloge angulaire fournit une IUG permettant de modifier les <angle> dans les valeurs des propriétés CSS.

Pour ouvrir l'Horloge angulaire:

  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.

    Aperçu de l&#39;angle

    Les petites horloges à gauche de -5deg et 0.25turn correspondent aux aperçus des angles.

  3. Cliquez sur l'aperçu pour ouvrir l'Horloge angulaire.

    Horloge inclinée.

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

  5. 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 des zones et du texte avec l'éditeur d'ombres

L'éditeur d'ombres fournit une IUG 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 une icône représentant une ombre Une ombre. à côté de la déclaration text-shadow ou box-shadow.

    Icônes représentant une ombre

  3. Cliquez sur l'icône représentant une ombre pour ouvrir l'éditeur d'ombres.

    Éditeur d&#39;ombres.

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

    • Type (uniquement pour box-shadow) : sélectionnez Outset (Out) ou Inset (Encastré).
    • 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 les codes temporels des transitions et des animations avec l'éditeur de lissage de vitesse

L'éditeur de lissage de vitesse fournit une IUG permettant de modifier les valeurs de transition-timing-function et animation-timing-function.

Pour ouvrir l'éditeur de lissage de vitesse:

  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 Simplicité. à côté des déclarations transition-timing-function ou animation-timing-function, ou de la propriété abrégée transition. Icône de l&#39;éditeur de lissage de vitesse.
  3. Cliquez sur l'icône pour ouvrir l'éditeur de lissage de vitesse : Éditeur de lissage de vitesse.

Utiliser des préréglages pour ajuster les codes temporels

Pour ajuster les codes temporels d'un simple clic, utilisez les préréglages de l'éditeur de lissage de vitesse:

  1. Dans l'éditeur de lissage de vitesse, cliquez sur l'un des boutons de l'outil de sélection pour définir une valeur de mot clé :
    • linéaire Bouton &quot;Linéaire&quot;
    • Lissage à l'approche/l'éloignement Le bouton Lissage à l&#39;approche/l&#39;éloignement.
    • ease-in Bouton &quot;Lissage à l&#39;approche&quot;
    • allocation Le bouton de lissage de vitesse.

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

    • Préréglages linéaires: elastic, bounce ou emphasized.
    • Préréglages de Bézier cubique:
Mot clé de durée Prédéfini Bézier cubique
lissage à l'approche/l'éloignement In-out, sinus cubic-bezier(0.45, 0.05, 0.55, 0.95)
In-out, quadratique cubic-bezier(0.46, 0.03, 0.52, 0.96)
Vers l'extérieur, cubique cubic-bezier(0.65, 0.05, 0.36, 1)
Rapide et lent cubic-bezier(0.4, 0, 0.2, 1)
De l'intérieur vers l'extérieur, vers l'arrière cubic-bezier(0.68, -0.55, 0.27, 1.55)
lissage à l'approche Entrée, sinus cubic-bezier(0.47, 0, 0.75, 0.72)
Dans, quadratique cubic-bezier(0.55, 0.09, 0.68, 0.53)
In, cubique cubic-bezier(0.55, 0.06, 0.68, 0.19)
Vers l'intérieur, vers l'arrière cubic-bezier(0.6, -0.28, 0.74, 0.05)
Sortie accélérée, 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)
Sortie, quadratique 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)
Arrière, arrière cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configurer des codes temporels personnalisés

Pour définir des valeurs personnalisées pour les fonctions temporelles, 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.

    Déplacement d&#39;un point de contrôle d&#39;une fonction linéaire par glisser-déposer.

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

    Déplacement des points de contrôle d&#39;une fonction de Bézier cubique.

Toute modification déclenche une animation de boule dans la section Aperçu située en haut de l'éditeur.

(Expérimental) Copier les modifications CSS

Lorsque ce test est activé, les modifications CSS que vous avez apportées au code CSS sont mises en évidence dans l'onglet Styles en vert.

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

Copiez une modification apportée à la déclaration CSS.

Pour copier simultanément toutes les modifications CSS d'une déclaration à l'autre, effectuez un clic droit sur celle-ci, puis sélectionnez Copier toutes les modifications CSS.

Copiez toutes les modifications CSS.

De plus, vous pouvez suivre les modifications que vous apportez à l'aide de l'onglet Modifications.