Découvrez les nouveaux workflows dans cette documentation de référence complète sur les fonctionnalités des outils pour les développeurs Chrome liées à d'afficher et de modifier les CSS.
Consultez la section Afficher et modifier le code CSS pour connaître les principes de base.
Sélectionnez un élément
Le panneau Elements (Éléments) des outils de développement vous permet d'afficher ou de modifier le code CSS d'un élément à la fois.
Sur la capture d'écran, l'élément h1
mis en surbrillance en bleu dans l'arborescence DOM est l'élément sélectionné.
À droite, les styles de l'élément sont affichés dans l'onglet Styles. À gauche, l’élément est
dans la fenêtre d'affichage, mais uniquement parce que le curseur de la souris la survole dans l'écran DOM
Arborescence.
Pour suivre un tutoriel, consultez la section 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, 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 cliquer 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 puis sélectionnez Afficher dans le panneau "Éléments".
Afficher le CSS
Utiliser la méthode Éléments > Styles et Calculé, pour afficher les règles CSS et diagnostiquer les problèmes CSS.
Naviguer avec des liens
L'onglet Styles contient des liens vers différents emplacements, y compris, mais sans s'y limiter:
- À côté des règles CSS, les feuilles de style et les sources CSS Ces liens ouvrent le panneau Sources. Si la taille de la feuille de style a été réduite, consultez la section Rendre lisible un fichier réduit.
- 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 de
animation
, indiquez@keyframes
. - Liens En savoir plus dans les info-bulles de la documentation
- et plus encore.
En voici quelques-unes mises en évidence:
Le style des liens peut varier. Si vous ne savez pas si un élément correspond à un lien, cliquez dessus pour le découvrir.
Afficher les info-bulles sur la documentation CSS, la spécificité et les valeurs de propriétés personnalisées
Éléments > L'onglet 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 CSS, pointez sur le nom de la propriété dans l'onglet Styles.
Cliquez sur En savoir plus pour accéder à une référence CSS MN sur cette propriété.
Pour désactiver les info-bulles, cochez la case Ne pas afficher.
Pour les réactiver, accédez à Paramètres > Préférences > Éléments > Afficher l'info-bulle de la documentation CSS
Afficher la spécificité du sélecteur
Pointez sur un sélecteur pour afficher une info-bulle indiquant sa pondération de spécificité.
Afficher les valeurs des propriétés personnalisées
Pointez sur un --custom-property
pour afficher sa valeur dans une info-bulle.
Afficher les CSS non valides, 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 la section Comprendre le 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 la classe Computed pour afficher uniquement le code CSS appliqué à un élément.
- Sélectionnez un élément.
- Accédez à l'onglet Calculé du panneau Éléments.
Cochez la case Tout afficher pour afficher toutes les propriétés.
Consultez la section Comprendre le CSS dans l'onglet "Calculé".
Afficher les propriétés CSS par ordre alphabétique
Utilisez l'onglet Calculé. Consultez la section Afficher uniquement le code CSS 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é). Reportez-vous à la section Afficher uniquement les CSS appliquée à un élément.
Vous pouvez également faire défiler l'onglet Styles et trouver les sections nommées Inherited from <element_name>
.
Afficher les règles "at-rules" du CSS
Les règles @ sont des instructions CSS qui vous permettent de contrôler le comportement du CSS. Éléments > La section Styles affiche les règles @ suivantes dans des sections dédiées:
Afficher les règles @@property
L'attribut at-rule 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 contenant la valeur et les descripteurs de la propriété, ainsi qu'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 CSS @supports
si elles sont appliquées à un élément. Par exemple, inspectez l'élément suivant:
Si votre navigateur accepte la fonction lab()
, l'élément est vert. Dans le cas contraire, il est violet.
Afficher les règles @@scope
L'onglet Styles affiche les règles "at-rules" (@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:
- Examinez le texte de la fiche dans l'aperçu.
- 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>
à l'intérieur d'éléments avec une classe card
.
Pour modifier la règle @scope
, double-cliquez dessus.
Afficher les règles @@font-palette-values
L'attribut at-rule CSS @font-palette-values
vous permet de personnaliser les valeurs par défaut de la propriété font-palette
. Éléments > L'onglet Styles affiche cette règle dans une section dédiée.
Affichez la section @font-palette-values
dans l'aperçu suivant:
- Inspectez la deuxième ligne de texte de l'aperçu.
- Dans Styles, recherchez la section
@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 des valeurs personnalisées, double-cliquez dessus.
Afficher les règles @@position-try
La règle CSS @position-try
et la propriété position-try-options
vous permettent de définir d'autres positions d'ancrage pour les éléments. Pour en savoir plus, consultez Présentation de l'API de positionnement d'ancrage CSS.
Éléments > Styles résout et associe les éléments suivants:
position-try-options
dans une section@position-try --name
dédiée.- Valeurs de propriété
position-anchor
et argumentsanchor()
des éléments correspondants avec des attributspopovertarget
.
Inspectez les valeurs position-try-options
et les sections @position-try
dans l'aperçu suivant:
- Dans l'aperçu, ouvrez le sous-menu. Autrement dit, cliquez sur VOTRE COMPTE, puis sur BOUTIQUE.
- Inspectez l'élément avec
id="submenu"
dans l'aperçu. - 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. - Cliquez sur le lien de la valeur
position-anchor
ou sur les mêmes argumentsanchor()
. Le panneau Éléments sélectionne l'élément avec l'attributpopovertarget
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 en 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 la zone Filtre dans les onglets Styles et Calculé pour rechercher un code CSS spécifique. 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 la case Grouper.
Émuler une page sélectionnée
Si vous basculez 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 curseur. Par exemple, des listes déroulantes, des menus ou des sélecteurs de date. L'option Émuler une page sélectionnée check_box vous permet de déboguer ce type d'élément comme s'il était actif.
Essayez d'imiter une page sélectionnée sur cette page de démonstration:
- Sélectionne l'élément d'entrée. Un autre élément apparaît en dessous.
- Ouvrez les outils de développement. La fenêtre "DevTools" est désormais active au lieu de la page. L'élément disparaît donc à nouveau.
- 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 situé en dessous.
Vous trouverez également 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
:
- Sélectionnez un élément.
- Dans le panneau Éléments, accédez à l'onglet Styles.
- Cliquez sur :hov.
- Cochez la pseudo-classe que vous voulez activer.
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 n'est pas survolé.
Pour suivre un tutoriel interactif, consultez la page Ajouter un pseudo-état à une classe.
Afficher les pseudo-éléments de mise en surbrillance hérités
Les pseudo-éléments vous permettent de styliser des parties spécifiques d'éléments. Les pseudo-éléments de mise en surbrillance sont des parties de document associées à la mention "selected" et leur style est "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, en cas de conflit entre plusieurs styles, 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:
-
J'ai hérité du style du pseudo-élément de mise en surbrillance de mon parent. Sélectionnez-moi !
Sélectionnez une partie du texte ci-dessus.
Dans l'onglet Styles, faites défiler l'écran vers le bas jusqu'à la section
Inherited from ::selection pseudo of...
.
Afficher les couches de la cascade
Les calques en cascade offrent un contrôle plus explicite de vos fichiers CSS afin d'éviter les conflits liés aux spécificités des styles. Cette fonctionnalité est utile pour les codebases et les systèmes de conception volumineux, ainsi que pour la gestion de styles tiers dans les applications.
Pour afficher les calques en cascade, inspectez l'élément suivant et ouvrez Elements (Éléments) > Styles :
Dans l'onglet Styles, affichez les trois calques de la cascade et leurs styles: page
, component
et base
.
Pour afficher l'ordre des calques, cliquez sur le nom du calque ou sur le bouton Activer/Désactiver l'affichage des calques CSS .
Le calque page
présente la spécificité la plus élevée. L'arrière-plan de l'élément est donc vert.
Afficher une page en mode d'impression
Pour afficher une page en mode d'impression:
- Ouvrez le menu Command (Commande).
- Commencez à saisir
Rendering
, puis sélectionnezShow Rendering
. - Dans la liste déroulante Émuler le média CSS, sélectionnez print.
Consultez les CSS utilisés et inutilisés dans l'onglet "Couverture"
L'onglet "Couverture" indique le CSS réellement utilisé par une page.
- Appuyez sur Commande+Maj+P (Mac), ou Ctrl+Maj+P (Windows, Linux, ChromeOS) et les outils de développement pour ouvrir le menu de commandes.
Commencez à saisir
coverage
.Sélectionnez Afficher la couverture. L'onglet Couverture s'affiche.
Cliquez sur Actualiser. La page est actualisée, et l'onglet Couverture fournit un aperçu de la quantité de code CSS (et JavaScript) utilisé à partir de chaque fichier chargé par le navigateur.
Le vert représente le CSS utilisé. Le rouge représente les ressources CSS inutilisées.
Cliquez sur un fichier CSS pour afficher le détail du CSS qu'il utilise dans l'aperçu ci-dessus, ligne par ligne.
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 sont utilisées.
Forcer le mode d'aperçu avant impression
Consultez Forcer les outils de développement à passer en mode Aperçu avant impression.
Copier le CSS
À partir d'un menu déroulant unique 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 en syntaxe JavaScript. Cette option est pratique si vous utilisez des bibliothèques CSS-in-JS.
Pour copier le code CSS, procédez comme suit:
- Sélectionnez un élément.
- Dans la section Éléments > Styles, effectuez un clic droit sur une propriété CSS.
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é : Copie uniquement le nom
property
. - Copier la valeur : Copie uniquement l'élément
value
. - Copier la règle : Copie l'intégralité de la règle CSS:
css selector[, selector] { property: value; property: value; ... }
- Copiez 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: 'valeur', PropertyInCamelCase: 'valeur', ...
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 accédez à l'onglet Calculé.
- Copier la déclaration : Copie la propriété et sa valeur dans la syntaxe CSS:
Modifier le CSS
Cette section répertorie toutes les façons de modifier le code CSS dans Éléments > Styles :
Vous pouvez en outre :
- Remplacer le CSS pour tous les chargements de page
- Enregistrez le code CSS modifié dans vos sources locales dans un espace de travail.
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 dans différentes manières:
- Ajoutez une déclaration intégrée. Équivaut à l'ajout d'un attribut
style
au code HTML de l'élément. - Ajoutez une déclaration à une règle de style.
Quel workflow devez-vous utiliser ? Dans la plupart des cas, vous souhaiterez probablement utiliser la fonction le workflow de déclaration. Les déclarations intégrées étant plus spécifiques que les déclarations externes, les déclarations intégrées garantit que les modifications prennent effet dans l'élément comme vous le souhaitez. Voir Sélecteur Types pour plus de précision.
Si vous déboguez les styles d'un élément et que vous devez tester spécifiquement ce qui se passe lorsqu'un 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:
- Sélectionnez un élément.
- Dans l'onglet Styles, cliquez entre les crochets de la section element.style. Curseur ce qui vous permet de saisir du texte.
- Saisissez le nom d'une propriété, puis appuyez sur Entrée.
Saisissez une valeur valide pour cette propriété, puis appuyez sur Entrée. Dans l'arborescence DOM, vous pouvez : vous pouvez voir qu'un attribut
style
a été ajouté à l'élément.Sur la capture d'écran, les propriétés
margin-top
etbackground-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'attributstyle
de l'élément.
Ajouter une déclaration à une règle de style
Pour ajouter une déclaration à une règle de style existante:
- Sélectionnez un élément.
- Dans l'onglet Styles, cliquez entre les crochets de la règle de style à laquelle vous souhaitez ajouter un élément. la déclaration. Le curseur se concentre, ce qui vous permet de saisir du texte.
- Saisissez le nom d'une propriété, puis appuyez sur Entrée.
- Saisissez une valeur valide pour cette propriété, puis appuyez sur Entrée.
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. Voir Modifier les valeurs énumérables avec raccourcis clavier pour 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 à 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.
- Up pour modifier la valeur de 1, ou de 0,1 si la valeur actuelle est comprise entre -1 et 1.
- Appuyez sur Maj+Haut pour l'incrémenter de 10.
- Maj+Cmd+Haut (Mac) ou Ctrl+Maj+Page précédente (Windows, Linux) pour incrémenter la valeur de 100.
Vous pouvez aussi effectuer une décrémentation. Remplacez simplement chaque instance de Up mentionnée précédemment par Vers le bas :
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:
- Passez la souris sur le nom du bloc et notez qu'il est souligné.
Cliquez sur le nom de l'unité pour en sélectionner une dans le menu déroulant.
Pour modifier la valeur de la longueur:
- Passez la souris sur la valeur de l'unité. Notez que votre pointeur prend la forme d'une flèche horizontale à double pointe.
Faites glisser horizontalement pour augmenter ou diminuer la valeur.
Pour ajuster la valeur de 10, faites-la glisser tout en maintenant la touche Maj enfoncée.
Ajouter une classe à un élément
Pour ajouter une classe à un élément:
- Sélectionnez l'élément dans l'arborescence DOM.
- Cliquez sur .cls.
- Saisissez le nom du cours dans la zone Ajouter un cours.
- Appuyez sur Entrée.
É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 la préférence de l'utilisateur concernant le thème clair ou sombre:
- Dans Éléments > Styles, cliquez sur Activer/Désactiver les émulations de rendu courantes.
Sélectionnez l'une des options suivantes dans la liste déroulante:
- prefers-color-scheme: light. Indique que l'utilisateur préfère le thème clair.
- prefers-color-scheme: dark. Indique que l'utilisateur préfère le thème sombre.
- Mode sombre automatique : Affiche votre page en mode sombre, même si vous ne l'avez pas implémentée. De plus,
prefers-color-scheme
définit automatiquementdark
surdark
.
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 dans un élément:
- Sélectionnez l'élément dans l'arborescence DOM.
- Ouvrez la section Classes de l'élément. Consultez Ajouter une classe à un élément. Sous le bouton Ajouter Class contient toutes les classes appliquées à cet élément.
- Cochez la case à côté de la classe que vous souhaitez activer ou désactiver.
Ajouter une règle de style
Pour ajouter une nouvelle règle de style:
- Sélectionnez un élément.
- Cliquez sur Nouvelle règle de style. Les outils de développement insèrent 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 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. pour choisir la feuille de style auquel ajouter la règle de style.
Activer/Désactiver une déclaration
Pour activer ou désactiver une seule déclaration:
- Sélectionnez un élément.
- Dans l'onglet Styles, pointez sur la règle qui définit la déclaration. Des cases à cocher s'affichent ensuite à chaque déclaration.
- Cochez ou décochez la case située à côté de la déclaration. Lorsque vous effacez une déclaration, la barre 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 lisses et simples avec l'API View Transitions.
Aligner des éléments de la grille et leur contenu avec l'éditeur de grille
Consultez la section correspondante dans la grille CSS.
Modifier les couleurs à l'aide du sélecteur de couleur
Consultez Inspecter et déboguer les couleurs HD et non HD à l'aide du sélecteur de couleur.
Modifier la valeur d'angle avec l'horloge d'angle
L'horloge d'angle fournit une IUG permettant de modifier les <angle>
dans les valeurs des propriétés CSS.
Pour ouvrir l'horloge d'angle:
- Sélectionnez un élément avec déclaration d'angle.
Dans l'onglet Styles, recherchez la déclaration
transform
oubackground
que vous souhaitez modifier. Cochez la case Angle Preview (Aperçu de l'angle) à côté de la valeur de l'angle.Les petites horloges à gauche de
-5deg
et0.25turn
correspondent aux aperçus d'angle.Cliquez sur l'aperçu pour ouvrir l'horloge d'angle.
Modifiez l'angle de vue en cliquant sur le cercle Angle de l'horloge ou faites défiler le curseur de la souris pour augmente / diminue 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 le volet "Styles" raccourcis clavier.
Modifier les ombres de zone et de 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:
Sélectionnez un élément avec une déclaration d'ombre. Par exemple, sélectionnez l'élément suivant.
Dans l'onglet Styles, recherchez une icône d'ombre à côté de la déclaration
text-shadow
oubox-shadow
.Cliquez sur l'icône d'ombre pour ouvrir l'éditeur d'ombre.
Modifiez les propriétés de l'ombre:
- Type (uniquement pour
box-shadow
). Sélectionnez Outset (Sortie) ou Inset (Encart). - 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.
- Type (uniquement pour
Observez les modifications appliquées à l'élément.
Modifier l'animation et les codes temporels des transitions 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:
- Sélectionnez un élément avec une déclaration de fonction de durée, comme l'élément
<body>
sur cette page. - 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é de raccourcitransition
. - Cliquez sur l'icône pour ouvrir l'é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:
- Dans l'éditeur de lissage de vitesse, cliquez sur l'un des boutons de l'outil de sélection pour définir la valeur d'un mot clé:
- linéaire
- ease-in-out
- ease-in
- lissage de vitesse
Dans le sélecteur de préréglages, cliquez sur les boutons ou pour choisir l'un des préréglages suivants:
- Préréglages linéaires:
elastic
,bounce
ouemphasized
. - Préréglages de Bézier cubique:
- Préréglages linéaires:
Mot clé "Durée" | Prédéfini | Bézier cubique |
---|---|---|
lissage à l'approche/l'éloignement | Retour à l'extérieur, sinus | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
À l'extérieur, quadratique | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
À l'extérieur, cubique | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
À la vitesse et au rythme | cubic-bezier(0.4, 0, 0.2, 1) |
|
Aller-retour, retour | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
lissage à l'approche | In, Sinus | cubic-bezier(0.47, 0, 0.75, 0.72) |
In, quadratique | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
À l'intérieur, à l'arrière | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
Entrée rapide, entrée linéaire | cubic-bezier(0.4, 0, 1, 1) |
|
lissage à l'éloignement | Sinus | cubic-bezier(0.39, 0.58, 0.57, 1) |
Retrait, quadratique | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
À l'extérieur, cubique | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
Sortie linéaire, Ouverture lente | cubic-bezier(0, 0, 0.2, 1) |
|
Aller, Retour | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Configurer des codes temporels personnalisés
Afin de définir des valeurs personnalisées pour les fonctions de durée, 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 faites-le glisser. Double-cliquez pour supprimer le point.
Pour les fonctions de Bézier cubique, faites glisser l'un des points de contrôle.
Toute modification déclenche une animation balle dans la zone Aperçu située en haut de l'éditeur.
(Expérimental) Copier les modifications CSS
Lorsque ce test est activé, les modifications apportées au code CSS sont affichées en vert dans l'onglet Styles.
Pour copier une seule modification de déclaration CSS, passez la souris sur la déclaration en surbrillance, puis cliquez sur le bouton Copier .
Pour copier toutes les modifications CSS dans les déclarations à la fois, effectuez un clic droit sur une déclaration et sélectionnez Copier toutes les modifications CSS.
De plus, vous pouvez suivre les modifications que vous apportez à l'aide de l'onglet Modifications.