Calculer avec des tailles intrinsèques

calc-size() est une fonction CSS permettant d'effectuer des opérations mathématiques sur des mots clés de dimensionnement intrinsèque tels que auto, min-content et fit-content. OBLIGATOIRE : Utilisez calc-size() uniquement lorsque vous devez modifier une taille intrinsèque avec un calcul ou une contrainte. Pour les animations simples basées sur des mots clés (par exemple, de 0 à auto), vous devez utiliser interpolate-size: allow-keywords.

Mise en œuvre, étape par étape

1. Identifier la base intrinsèque : déterminez quel mot clé intrinsèque (auto, min-content, etc.) doit servir de base à votre calcul.
2. Définir des contraintes : utilisez des fonctions mathématiques CSS telles que clamp(), min() ou max() dans le deuxième argument pour appliquer des contraintes de conception à la taille intrinsèque.
3. OBLIGATOIRE : Fournissez une solution de remplacement : déclarez toujours un mot clé ou une longueur de dimensionnement standard immédiatement avant la propriété à l'aide de calc-size() pour vous assurer que la mise en page reste fonctionnelle dans les navigateurs non compatibles.
4. Appliquer des propriétés logiques : utilisez par défaut des propriétés logiques telles que inline-size ou block-size pour vous assurer que les calculs respectent le mode d'écriture du document.
5. Facultatif : Amélioration progressive : encapsulez la logique de mise en page complexe ou les animations dans un bloc @supports (inline-size: calc-size(auto, size + 0px)) pour ne proposer des fonctionnalités avancées qu'aux navigateurs compatibles.

Syntaxe de base

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

Arguments de base valides (<calc-size-basis>)

Le premier argument définit la taille de "base" pour le calcul.

Mots clés standards :

• auto : dimensionnement par défaut de l'élément.
• min-content : taille minimale que l'élément peut prendre sans déborder.
• max-content : taille que l'élément prend pour que tout le contenu tienne sur une seule ligne.
• fit-content : équivalent à clamp(min-content, auto, max-content).
• content : n'est valide que lorsque calc-size() est utilisé dans la propriété flex-basis.

Arguments spéciaux :

• any : base générique utilisée lorsque le type intrinsèque spécifique est inconnu ou lors de l'imbrication de calculs.
• calc-size() imbriqué : permet d'effectuer des calculs conditionnels ou en plusieurs étapes.
• <calc-sum> : longueur, pourcentage ou expression mathématique spécifique (par exemple, 100px ou 20%). Lorsqu'une valeur fixe est utilisée comme base, le mot clé size est toujours disponible (mais uniquement dans le deuxième argument) et représente la valeur résolue de cette base.

OBLIGATOIRE : Le mot clé size n'est pas valide dans le premier argument (<calc-size-basis>) lui-même. Il s'agit d'une variable locale qui n'existe que pour faire référence à la base à partir du deuxième argument (<calc-sum>).

Arguments de calcul valides (<calc-sum>)

Le deuxième argument est l'expression mathématique.

• Il utilise généralement le mot clé size pour faire référence à la valeur de la base.
• Bien que le mot clé size soit techniquement facultatif, l'omettre signifie que le calcul se résoudra en une valeur fixe, en ignorant complètement la base.
• Elle peut inclure des opérateurs mathématiques standards (+, -, *, /).
• Il peut inclure des fonctions mathématiques CSS telles que clamp(), min(), max() et round().
• OBLIGATOIRE : calc-size() n'autorise qu'une seule valeur de taille intrinsèque (la base) dans chaque calcul. Vous ne pouvez pas combiner des mots clés de dimensionnement intrinsèque dans le même appel calc-size().

Cas d'utilisation

Animer vers et depuis des tailles intrinsèques

Par défaut, les navigateurs ne peuvent pas interpoler entre une longueur (par exemple, 0px) et un mot clé intrinsèque (par exemple, auto). Encapsuler le mot clé dans calc-size() en fait une valeur interpolable.

Choisir le bon outil pour les animations

• OBLIGATOIRE : Utilisez interpolate-size: allow-keywords : pour les animations simples vers ou depuis des tailles intrinsèques (par exemple, height: 0 vers height: auto) sans aucune modification mathématique. Il s'agit de l'approche requise pour l'interpolation simple de mots clés. Idéalement, elle doit être appliquée de manière globale via :root.

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

• Utilisez calc-size() : UNIQUEMENT lorsque vous devez effectuer des calculs mathématiques sur une taille intrinsèque pendant une transition (par exemple, ajouter une marge intérieure ou limiter la taille).

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

OBLIGATOIRE : L'interpolation entre deux mots clés de dimensionnement intrinsèque n'est pas possible directement. L'une des extrémités de la transition doit être une longueur ou un pourcentage.

Respecter les préférences de mouvement de l'utilisateur

Les animations qui modifient la taille de grandes zones de mise en page peuvent être particulièrement perturbantes pour les utilisateurs souffrant de troubles vestibulaires. OBLIGATOIRE : Respectez toujours les préférences de mouvement de l'utilisateur en utilisant la requête média prefers-reduced-motion pour simplifier ou minimiser les animations non essentielles. Les stratégies courantes consistent à désactiver complètement le mouvement, à réduire la durée ou à remplacer les décalages de mise en page par des transitions d'opacité subtiles.

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

Appliquer des contraintes aux tailles intrinsèques

Vous pouvez utiliser calc-size() avec n'importe quelle fonction mathématique CSS (comme min(), max(), clamp() ou round()) pour vous assurer que la taille intrinsèque d'un élément reste dans les limites de la conception.

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

Considérations critiques

• Pièges des pourcentages : les pourcentages dans <calc-sum> sont résolus par rapport à la taille du conteneur, et non au mot clé size. Par exemple, calc-size(auto, size + 10%) ajoute 10 % de la largeur du parent à la largeur de l'élément auto, ce qui peut entraîner des résultats inattendus ou des dépassements.
• Exigence concernant les calculs : OBLIGATOIRE : utilisez interpolate-size: allow-keywords au lieu de calc-size() pour les animations simples (par exemple, 0 à auto). calc-size() ne doit être utilisé que lorsque la mise en page nécessite des ajustements mathématiques dynamiques de la base intrinsèque.
• Remarque sur les performances : L'animation des propriétés du modèle de boîte telles que inline-size ou block-size déclenche des recalculs de mise en page, ce qui peut être coûteux. Utilisez les animations calc-size() principalement pour les éléments essentiels à la mise en page lorsque les alternatives sans mise en page sont insuffisantes.

Stratégies de remplacement

calc-size() et interpolate-size sont des améliorations progressives. Dans les navigateurs qui ne les prennent pas en charge, les propriétés seront ignorées et la mise en page restera fonctionnelle, bien que les animations vers les mots clés intrinsèques sautent au lieu d'effectuer une transition. Fournissez toujours un mot clé ou une longueur standard comme solution de secours.

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

Solutions de remplacement pour les animations et les transitions

Dans les navigateurs qui ne sont pas compatibles avec calc-size() ou interpolate-size, les transitions impliquant des mots clés de dimensionnement intrinsèque ne pourront pas être interpolées.

• Dégradation élégante : l'alternative par défaut est un "saut instantané" entre les états (par exemple, de 0 à auto). C'est souvent acceptable, car la mise en page reste fonctionnelle.
• Expérience améliorée : utilisez @supports pour appliquer une logique de mise en page complexe ou un style supplémentaire qui n'a de sens que lorsque des animations intrinsèques fluides sont possibles.
• Évitez les mesures basées sur JS : bien que vous puissiez utiliser JavaScript pour mesurer des éléments et animer manuellement leurs dimensions, cela est souvent inutile et peut entraîner un thrashing de la mise en page. L'utilisation du "saut instantané" natif est la solution de remplacement recommandée pour les applications Web modernes.

Pour les animations, l'expérience de remplacement sera un passage instantané à la taille finale. Pour détecter la compatibilité en CSS ou JavaScript :

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}