interpolate-size et calc-size()

Définition

interpolate-size: allow-keywords autorise l'animation entre une longueur et une taille intrinsèque (auto, max-content, fit-content) : le fameux « animer height: auto ». calc-size() l'active implicitement pour une valeur. Propriété héritée, à poser sur :root. Disponibilité limitée : pas encore Baseline.

Analogie

Un store qui se déroule en douceur jusqu'à sa longueur naturelle, au lieu de tomber d'un coup.

Exemple de code

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

.panel {
  height: 2.5rem;
  overflow: hidden;
  transition: height 0.4s ease;
}
.panel:hover, .panel:focus-within {
  height: max-content; /* animé, un côté doit rester numérique */
}

Cas d'usage

Accordéons et panneaux dépliables sans mesurer scrollHeight en JavaScript ni bricoler grid-template-rows: 0fr/1fr.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interpolate-size