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.
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 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.
Naviguer avec des liens
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:
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.
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 Ne pas afficher.
Pour les réactiver, accédez à Paramètres > Préférences > Éléments > 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é.
Afficher les valeurs des propriétés personnalisées
Pointez sur un --custom-property
pour voir sa valeur 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.
- Sélectionnez un élément.
- Accédez à l'onglet Calculé du panneau Éléments.
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>
.
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:
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:
- Inspectez 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 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:
- 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 vos valeurs personnalisées, double-cliquez dessus.
Afficher @position-try
at-rules
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 de l'ancrage CSS.
Éléments > Styles résout les valeurs position-try-options
et associe chaque option à une section @position-try --name
dédiée.
Inspectez les valeurs position-try-options
et les sections @position-try
dans l'aperçu suivant:
- Dans l'aperçu, ouvrez le sous-menu, c'est-à-dire 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.
Pour modifier les valeurs de la section, 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 dans la barre d'action.
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.
Pour rechercher également les propriétés héritées dans l'onglet Calculées, cochez la case Tout afficher.
Pour parcourir l'onglet Calculé, regroupez les propriétés filtrées en catégories réductibles en cochant la case Groupe.
É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:
- Sélectionner l'élément d'entrée Un autre élément apparaît en dessous.
- 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.
- 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.
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
:
- Sélectionnez un élément.
- Dans le panneau Éléments, accédez à l'onglet Styles.
- Cliquez sur :hov.
- Cochez la pseudo-classe que vous souhaitez 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 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:
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 !Sélectionnez une partie du texte ci-dessus.
Dans l'onglet Styles, faites défiler la page vers le bas pour trouver la section
Inherited from ::selection pseudo of...
.
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
.
Pour afficher l'ordre des calques, cliquez sur le nom du calque ou sur le bouton Activer/Désactiver la vue des calques CSS .
La couche 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 Commandes.
- Commencez à saisir
Rendering
et sélectionnezShow Rendering
. - 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.
- 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.
Commencez à saisir
coverage
.Sélectionnez Afficher la couverture. L'onglet "Couverture" s'affiche.
Cliquez sur 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.
Le vert représente le code CSS utilisé. Le rouge représente les ressources CSS inutilisées.
Cliquez sur un fichier CSS pour afficher la répartition ligne par ligne du CSS qu'il utilise dans l'aperçu ci-dessus.
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:
- Sélectionnez un élément.
- Dans l'onglet É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é : 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é.
- Copier la déclaration : Copie la propriété et sa valeur dans la syntaxe CSS :
Modifier le CSS
Cette section liste toutes les façons de modifier le CSS dans Éléments > Styles.
Vous pouvez en outre :
- Remplacer le code CSS pour tous les chargements de page.
- Enregistrez le 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 de différentes manières:
- Ajoutez une déclaration intégrée. Cela équivaut à ajouter 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 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:
- Sélectionnez un élément.
- 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.
- Saisissez un nom de 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 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, les déclarations sont 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 la déclaration. Le curseur effectue la mise au point, ce qui vous permet de saisir du texte.
- Saisissez un nom de 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. 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:
- Pointez sur le nom du bloc et notez qu'il est souligné.
Cliquez sur le nom de l'unité pour la sélectionner dans le menu déroulant.
Pour modifier la valeur de longueur:
- Pointez sur la valeur de l'unité. Le pointeur prend alors la forme d'une flèche horizontale à double pointe.
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:
- Sélectionnez l'élément dans l'arborescence DOM.
- Cliquez sur .cls.
- Saisissez le nom de la classe dans le champ Ajouter une classe.
- 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 les préférences de l'utilisateur concernant le thème clair ou sombre:
- Dans l'onglet É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: 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
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 sur un élément:
- Sélectionnez l'élément dans l'arborescence DOM.
- 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.
- 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:
- Sélectionnez un élément.
- 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 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 pour choisir la feuille de style à laquelle ajouter la règle.
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 à côté de chaque déclaration.
- 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.
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:
- Sélectionnez un élément avec une déclaration d'angle.
Dans l'onglet Styles, recherchez la déclaration
transform
oubackground
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
et0.25turn
correspondent aux aperçus des angles.Cliquez sur l'aperçu pour ouvrir l'Horloge angulaire.
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.
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:
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 représentant une ombre à côté de la déclaration
text-shadow
oubox-shadow
.Cliquez sur l'icône représentant une ombre pour ouvrir l'éditeur d'ombres.
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.
- Type (uniquement pour
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:
- Sélectionnez un élément avec une déclaration de fonction de minutage, 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
ouanimation-timing-function
, ou de la propriété abrégéetransition
. - 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 une valeur de mot clé :
- linéaire
- Lissage à l'approche/l'éloignement
- ease-in
- allocation
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é 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.
Pour les fonctions de Bézier cubique, faites glisser l'un des points de contrôle.
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.
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.
De plus, vous pouvez suivre les modifications que vous apportez à l'aide de l'onglet Modifications.