`Calc-size()` - Fonction CSS

calc-size()

Résumé des caractéristiques de la fonction `calc-size()`

Description rapide

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

Statut

Problèmes de compatibilité ⚠

Pourcentages

Ne s'appliquent pas.

Type d'animation

Computed value : lors d'une animation, la propriété calc-size() passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 5

Statut du document: WD (document de travail)

Schéma syntaxique de `calc-size()`.

Schéma syntaxique de la fonction calc-size().
Cliquez sur les termes du diagram pour plus de précision.

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

expr est une expression mathématique pouvant faire intervenir le mot size.

Description de la fonction `calc-size()`.

calc-size() permet les calculs sur la dimension intrinsèque. Une dimension intrinsèque est souvent représentée par les valeurs min-content, mas-content et fit-content. calc-size() permet d'altérer cette valeur, par exemple en ajoutant une certaine valeur à cette dimension.

Voir aussi la page sur calc() pour les calculs autres que sur les dimensions intrinsèques.

La valeur `calc-size()` peut être utilisée avec les propriétés suivantes :

block-size : Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.
flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
grid-auto-columns : Définit la largeur par défaut des colonnes dans une grille.
grid-auto-rows : Définit la hauteur par défaut des lignes dans une grille.
grid-template-columns : Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows : Définit le nombre et la hauteur des lignes d'une grille.
height : Définit la hauteur de l'élément.
inline-size : Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.
max-height : Définit une limite à la hauteur maximale de l'élément.
max-width : Définit la largeur maximale de l'élément.
min-height : Définit la hauteur minimale de l'élément.
min-width : Définit la largeur minimale de l'élément.
width : Définit la largeur de l'élément.

Syntaxes de la fonction `calc-size()`.

<propriété>: calc-size(min-content, size + 10px); a e

La valeur a peut être l'une des formes ci-dessous :
- auto : valeur automatique.
- content : valable pour les élément d'un flex-box dimensionné avec flex-basis.
- fit-content : taille optimisée du contenu.
- min-content : taille minimale du contenu.
- fit-content : taille maximale du contenu.
L'expression e est une expression mathématique qui fait le plus souvent intervenir le mot size. ce dernier représente la dimension définie par le terme a. Cette expression peut comporter les quatre signes opératoires classiques : +, -, *, et /, ainsi que des fonctions de calcul reconnues par CSS.
<propriété>: calc-size(any, 200px);

Le mot any utilisé dans le premier paramètre représente une taille non définie. Dans ce cas, le mot size ne peut pas être utilisé dans l'expression du deuxième paramètre.
Avec any, calc-size() calcule simplement la valeur de la deuxième expression. Dans notre exemple calc-size() renvoie 200 pixels.

Animation avec la fonction `calc-size()`.

Ici nous utilisons calc-size() pour faire évoluer la largeur autour de fit-content. Une particularité à signaler : si vous utilisez deux dimensions intrinsèques différentes pour le premier paramètre de calc-size(), l'animation devient brutale (discrete). Par exemple :


	@keyframes demo {
	   from {width: calc-size(min-content, size + 10px);}
	   to {width: calc-size(max-content, size - 10px);}
	}

Pour faire marcher cet exemple, afficher la page dans Edge ou Chrome .

Exemple d'animation avec calc-size()

Support de la fonction `calc-size()`.

La fonctions calc-size() est pour l'instant (2025) reconnue uniquement par les navigateurs basés sur webkit.

Colonne 1

Reconnaissance par les navigateurs de la fonction calc-size() permettant de calculer une taille intrinsèque (définie par le contenu).

Fonction
calc-size()

Estimation de la prise en charge globale.

71%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `calc-size()`.

Module CSS - Valeurs et unités - Niveau 5

Introduction de la fonction calc-size() pour les calculs sur les dimensions intrinsèques de l'élément.

03 Septembre 2024
Document de travail.

Autres fonctions de calcul.

Les fonctions de calcul, les fonctions mathématiques, et les fonctions trigonométriques, sont décrites dans la spécification CSS Values and Units Module.

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()