<calc-sum>

Syntaxe

Le type <calc-sum> définit deux valeurs numériques et l'un des opérateurs arithmétiques suivants entre elles.

+

Additionne deux nombres.

-

Soustrait le nombre de droite à celui de gauche.

Syntaxe formelle

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Description

Les opérandes de l'expression peuvent être n'importe quelle valeur de la syntaxe <length>. Vous pouvez utiliser <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer>.

Les deux opérandes doivent être du même type. Pour les longueurs, vous ne pouvez pas utiliser 0 pour dire 0px (ou une autre unité de longueur). Il faut ajouter une unité explicite : margin-top: calc(0px + 20px); est valide, alors que margin-top: calc(0 + 20px); est invalide. Les types de valeurs en pourcentage sont résolus selon le contexte. Par exemple, margin-top: calc(50% + 20px); est valide car margin-top résout les pourcentages en longueurs.

L'inclusion de variables CSS dans les expressions calc-sum est également autorisée. Le code suivant calc(10px + var(--variable)) est une expression valide.

Les opérateurs + et - doivent obligatoirement être entourés d'espaces. Par exemple, calc(50% -8px) sera interprété comme « un pourcentage suivi d'une longueur négative » — ce qui est une expression invalide — tandis que calc(50% - 8px) correspond à « un pourcentage suivi d'un opérateur de soustraction et d'une longueur ». De même, calc(8px + -50%) est interprété comme « une longueur suivie d'un opérateur d'addition et d'un pourcentage négatif ».

Spécifications

Voir aussi

• Le type de donnée <calc-product>
• Le type de donnée <calc-value>
• Le type de donnée <calc-keyword>