interpolate-size

Syntaxe

/* Valeurs avec un mot-clé */
interpolate-size: allow-keywords;
interpolate-size: numeric-only;

/* Valeurs globales */
interpolate-size: inherit;
interpolate-size: initial;
interpolate-size: revert;
interpolate-size: revert-layer;
interpolate-size: unset;

Valeurs

allow-keywords

Active l'interpolation entre une valeur de type <length-percentage> et une valeur de taille intrinsèque, afin de permettre l'animation entre les deux.

numeric-only

Le comportement par défaut — les valeurs de taille intrinsèque ne peuvent pas être interpolées.

Description

Définir interpolate-size: allow-keywords active l'interpolation entre une valeur <length-percentage> et une valeur de taille intrinsèque. Notez que cela n'active pas l'animation entre deux valeurs de taille intrinsèque. Une extrémité de l'animation doit être une <length-percentage>.

La valeur de interpolate-size est héritée, ainsi l'animation vers (ou depuis) une valeur de taille intrinsèque peut être activée pour l'ensemble du document en la définissant sur la racine du document :

:root {
  interpolate-size: allow-keywords;
}

Si vous souhaitez limiter la portée, vous pouvez la définir sur l'élément conteneur concerné. L'exemple suivant active l'interpolation des tailles intrinsèques uniquement pour <main> et ses descendants :

main {
  interpolate-size: allow-keywords;
}

Valeurs pouvant être interpolées

Les valeurs intrinsèques suivantes peuvent actuellement être utilisées dans des animations :

• auto
• min-content
• max-content
• fit-content
• content (pour les conteneurs dimensionnés avec flex-basis).

Définition formelle

Syntaxe formelle

interpolate-size = 
  numeric-only    |
  allow-keywords  

Exemples

Utilisation simple de interpolate-size

Cet exemple montre comment définir interpolate-size: allow-keywords sur un document pour activer les animations impliquant une taille intrinsèque. La démonstration présente un badge de personnage/« étiquette de nom », qui peut être survolé ou sélectionné pour révéler des informations sur le personnage. L'affichage est géré par une transition de height entre une longueur définie et max-content.

HTML

Le HTML contient un seul élément HTML <section> avec tabindex="0" afin qu'il puisse être sélectionné au clavier. La balise <section> contient des éléments HTML <header> et <main>, chacun avec leur propre contenu enfant.

<section tabindex="0">
  <header>
    <h2>Tanuki</h2>
  </header>
  <main>
    <p>Tanuki est le fantôme silencieux de MDN.</p>
    <ul>
      <li><strong>Taille</strong>&nbsp;: 3.03m</li>
      <li><strong>Poids</strong>&nbsp;: 160kg</li>
      <li><strong>Tech Fu</strong>&nbsp;: 7</li>
      <li><strong>Mauvaises blagues</strong>&nbsp;: 9</li>
    </ul>
  </main>
</section>

CSS

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 175px;
  border-radius: 5px;
  background: #eeeeee;
  box-shadow:
    inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
}

header {
  padding: 0.7rem;
  border-bottom: 2px solid #cccccc;
}

main {
  padding: 10px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

p {
  margin-top: 0;
}

Dans le CSS, nous définissons d'abord interpolate-size: allow-keywords sur :root pour l'activer sur tout le document.

:root {
  interpolate-size: allow-keywords;
}

Nous définissons ensuite la hauteur (height) de la balise <section> à 2.5rem et le débordement (overflow) à hidden pour que seul le <header> soit affiché par défaut, puis nous définissons une transition qui anime la height de <section> sur 1 seconde lors du changement d'état. Enfin, nous définissons la height de <section> sur :hover et :focus à max-content.

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

Le reste du CSS a été masqué pour plus de clarté.

Résultat

Essayez de survoler le <section> ou de lui donner le focus au clavier — il s'animera jusqu'à sa hauteur complète, révélant tout le contenu.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La fonction calc-size()
• Animer jusqu'à height: auto; (et autres mots-clés de dimensionnement intrinsèque) en CSS ^(angl.) sur developer.chrome.com (2024)