Calc() - Fonction CSS

calc()

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

Description rapide
Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.
Statut
Standard
Pourcentages
Peuvent être insérés dans l'expression à calculer.
Module W3C
Module CSS - Valeurs et unités
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Description de la fonction calc().

La fonction calc() effectue un calcul dont le résultat peut être utilisé comme valeur d'une propriété. Le calcul peut faire appel aux quatre opérations de base, comporter des parenthèses, ou utiliser d'autres fonctions mathématiques ou des fonctions trigonométriques.
Les quatre opérateurs de base sont :
    + : addition,
    - : soustraction,
    * : multiplication,
    / : division.

Les chaînes de calculs sont effectuées suivant l'ordre de priorité habituelles :
    - Tout d'abord les calculs entre parenthèses,
    - Ensuite les multiplications et les divisions,
    - Enfin les additions et soustractions.

La fonction calc() peut également faire appel à la fonction var(), ce qui donne la possibilité intéressante d'insérer la valeur d'une variable dans le calcul.

L'expression à calculer peut mélanger les unités, ce qui n'est pas correct au sens mathématique mais bien pratique dans notre cas. Cependant l'expression doit rester cohérente : on peut additionner ou soustraire des unités différentes mais qui correspondent à un même type de grandeur physique : par exemple il est possible d'ajouter des pixels (px) et des centimètres (cm), mais pas des pixels et des angles (deg).
Les multiplications et les divisions doivent comporter au moins un opérande sans unité.

D'autre part, le résultat de l'expression doit être d'un type conforme à ce qu'attend la propriété. Par exemple, la propriété width attend une dimension, l'expression calculée doit donc renvoyer une dimension si elle est utilisée avec cette propriété.

Exemples d'expressions correctes :

width:calc(100% - 100px);
Si 100% se résout en une dimension. Il est donc possible de l'ajouter à une autre dimension.
width:calc(100% / 2);
Une dimension divisée par un nombre donne une dimension.
width:calc(100 * 1px);
Astuce pour transformer une valeur sans unité en une valeur typée (ici une dimension).

Exemples d'expressions incorrectes :

width:calc(100px - 100);
100px est une dimension, qui ne peut s'ajouter à un nombre sans dimension.
width:calc(100px - 0);
Même la valeur 0 doit comporter une unité, même si la plupart des propriétés acceptent 0 sans unité.
width:calc(45deg - 50px);
Les deux valeurs sont de types incompatibles (un angle et une dimension).
width:calc(20px * 20px);
Le résultat serait une surface, mais la propriété width n'attend pas une surface mais une dimension. De façon générale, la multiplication et la division doivent comporter au moins un nombre sans unité.

Remarque : les espaces avant et après les opérateurs + et - sont nécessaires pour que l'expression soit correctement évaluée. Sans espaces les opérateurs + et - sont considérés comme étant le signe de la valeur qui les suit.
Les opérateurs * et / peuvent s'écrire sans espace, ni avant ni après.

10px - 2px
vaut 8px.
-10px - 2px
vaut -12px.
10px + -2px
vaut 8px.
10px-2px
est incorrect.

Améliorer la lisibilité du code CSS.

calc() peut être utilisé simplement pour rendre plus évidentes les intentions de l'auteur. Par exemple, si on souhaite faire tourner un élément de 1/12ème de tour, on peut écrire rotate:30deg; mais la syntaxe rotate:calc(1turn / 12); fait mieux ressortir le fait qu'il s'agit d'une rotation d'un douzième de tour.

calc() et les couleurs.

A l'heure actuelle, la fonction calc(), utilisée seule, ne sait pas calculer avec des couleurs, mais en utilisant des fonctions comme rgb() ou hsl(), il est possible de faire des calculs sur chacune des composantes d'une couleur.
Exemple :
color:rgb(calc(255 - 41), calc(255 - 120), calc(255 - 18));

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

  • A la place de n'importe quelle valeur numérique, à condition qu'il y ait correspondance entre le type attendu à cet endroit et le type du résultat obtenu par la fonction calc().

Syntaxes de la fonction calc().

  • propriété: calc(75% + 30px);

    La fonction calc() accepte n'importe quelle combinaison de valeurs et d'opérateurs algébriques ( + - * / ). Les opérateurs + et - doivent être précédés et suivis d'un espace (ils ne doivent pas être collés à la valeur qui précède, ni à celle qui suit).

  • propriété: calc(2 * min(300px, 30%, 500px));

    D'autres fonctions de calcul peuvent être insérées dans l'expression fournie à calc().

Exemples d'utilisation de la fonction calc().

Positionner un dégradé.

L'exemple ci-dessous montre un élément avec un dégradé linéaire sur sa droite et sur sa gauche. On a souhaité que ce dégradé fasse 10 pixels de large, quelque soit la largeur totale de l'élément.

Calcul de l'emplacement des éléments en position fixée ou absolue.

Centrer un bloc positionné en absolu (position:absolute;) ou en fixé (position:fixed;) n'est pas évident car la position du bloc ne dépend plus de ses marges, mais uniquement de ses quatre propriétés top, right, bottom et left.

Le bloc bleu avec le mot "Exemple2", a été positionné en absolu. Il reste pourtant toujours centré dans la largeur de la fenêtre du navigateur. Observez comment la valeur pour sa propriété left a été déterminée avec calc().

Exemple2

 

 

 

 

Centrage vertical.

Quant au bloc rose (exemple3), positionné en fixe sur la gauche de l'écran, il reste centré dans le sens vertical, grâce à l'utilisation de la fonction calc() et de l'unité vh (Viewport Height).

Exemple3

Simulateur avec la fonction calc().

Le simulateur ajuste la largeur de l'image grace à la fonction calc(). La dernière option vous permet de saisir vous même une formule.

width :
Exemple pour la fonction calc()

Support de la fonction calc().

La fonction calc() est maintenant bien prise en charge par les navigateurs.

Colonne 1
Support des calculs en CSS, et de la fonction calc() pour évaluer une expression.
Colonne 2
Support des fonctions calc() lorsqu'elles sont imbriquées.
Colonne 3
Support de la fonction calc() utilisée dans une directive @media.

Remarques :

(1) La fonction calc() est bogguée dans Internet Explorer.

1
Fonction
calc()
 
2
Fonctions
calc()
imbriquées
3
Fonction
calc()
dans @media
Estimation de la prise en charge globale.
96%
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Samsung Internet

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

Chrome

Opéra

Opéra Mobile

UC Browser pour Androïd

Firefox pour Androïd

Opéra mini

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

Support de la fonction calc().

Voir aussi : autres fonctions de calcul.

Les fonctions de calcul disponibles en CSS sont de plus en plus nombreuses. Elles couvrent les calculs mathématiques et trigonométriques courants. En voici la liste pour faciliter vos recherches. Vous pouvez également vous reporter à la spécification du W3C module CSS - Valeurs et unités.

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é.
⚠
calc-size()
calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).
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()
Détermine la valeur la plus grande parmi une série de valeurs.
min()
Détermine la valeur la plus petite parmi une série de valeurs.
mod()
Calcule le reste de la division entière entre deux nombres.
pow()
Calcule une mise à l'exposant.
rem()
Calcule le reste de la division entière de deux nombres.
round()
Calcule l'arrondi d'un nombre.
⚠
sibling-count()
Renvoie le nombre de frères de l'élément dans l'arbre du document, y compris l'élément lui-même.
⚠
sibling-index()
Renvoie le numéro de l'élément parmi ses frères, c'est à dire des autres éléments qui ont le même parent.
sign()
Détermine le signe d'un nombre.
sin()
Calcule le sinus d'un angle.
sqrt()
Calcule la racine carrée d'un nombre.
⚠
src()
Spécifie l'adresse d'une ressource telle qu'une image par exemple. Synonyme de la fonction url().
tan()
Calcule la tangente d'un angle.
url()
Spécifie l'adresse d'une ressource telle qu'une image par exemple.

Valeurs:

e
Valeur prédéfinie du nombre e (base des logarithmes naturels), soit environ 2,7182818284590452354.
infinity
Valeur d'erreur indiquant que le résultat d'un calcul est une valeur infinie.
NaN
Valeur d'erreur indiquant qu'un calcul n'a pas pu être effectué à cause d'une paramètre non numérique.
pi
Valeur prédéfinie du nombre pi (environ 3,1415926535897932).