Fonction CSS calc()

Exemple interactif

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Changez ma largeur.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

Syntaxe

/* calc(expression) */
calc(100% - 80px)

/* Argument avec une fonction CSS */
calc(100px * sin(pi / 2))

/* Argument contenant une variable */
calc(var(--hue) + 180)

/* Argument contenant des canaux de couleur dans des couleurs relatives */
lch(from aquamarine l c calc(h + 180))

La fonction calc() prend un seul argument comme paramètre, et le résultat de l'expression est utilisé comme valeur pour une propriété CSS. Dans cet argument, les opérandes peuvent être combinés en utilisant les opérateurs listés ci-dessous. Lorsque l'expression contient plusieurs opérandes, calc() utilise les règles standard de priorité des opérateurs :

+

Additionne les opérandes définies.

-

Soustrait le deuxième opérande du premier opérande.

*

Multiplie les opérandes définies.

/

Divise l'opérande de gauche (dividende) par l'opérande de droite (diviseur).

Tous les opérandes, à l'exception de ceux de type <number>, doivent être suivis d'une unité appropriée, telle que px, em ou %. Vous pouvez utiliser une unité différente pour chaque opérande dans votre expression. Vous pouvez également utiliser des parenthèses pour établir l'ordre des calculs si nécessaire.

Description

Il y a quelques points à noter concernant calc(), qui sont détaillés dans les sections ci-dessous.

Valeurs résultantes

La fonction calc() doit se substituer à une valeur CSS complète de l'un des types suivants :

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• Un des types mixtes comme <length-percentage>

calc() ne peut pas seulement remplacer la partie numérique des valeurs en pourcentage, des valeurs de longueur, etc., sans également remplacer l'unité qui suit. Par exemple, calc(100 / 4)% est invalide, tandis que calc(100% / 4) est valide.

La valeur résultante de calc() doit être compatible avec le contexte dans lequel elle est utilisée. Par exemple, margin: calc(1px + 2px) est valide, mais margin: calc(1 + 2) ne l'est pas : cela équivaut à définir margin: 3, ce qui ignore la propriété.

Lorsque qu'un entier (<integer>) est attendu, l'expression calc() peut également évaluer un nombre (<number>), qui est arrondi à l'entier le plus proche. Ainsi, calc(1.4) donne une valeur de 1. Si la partie fractionnaire de la valeur est exactement 0.5, la valeur est arrondie vers l'infini positif. Par exemple, calc(1.5) donne une valeur de 2, tandis que calc(-1.5) est arrondi à -1.

calc() effectue des calculs en virgule flottante selon la norme IEEE-754, ce qui entraîne certaines considérations concernant les valeurs infinity et NaN. Pour plus de détails sur la façon dont les constantes sont sérialisées, consultez la page <calc-keyword>.

Arithmétique typée CSS

Lors de l'utilisation de calc() pour multiplier des valeurs, en utilisant l'opérateur *, une seule valeur peut contenir une unité. Les calculs comme 200px * 4px ne sont pas pris en charge car 800px² n'a pas de sens en CSS.

Inversement, 200px / 4px se résout à 50, ce qui a du sens en CSS. Par conséquent, lors de l'utilisation de la fonction calc() pour diviser des nombres, en utilisant l'opérateur /, les navigateurs compatibles permettent des unités des deux côtés de l'opérande, à condition qu'elles soient du même type de données. Par exemple, 100vw / 1px est valide et donne une valeur sans unité.

Le quotient peut ensuite être utilisé dans les valeurs des propriétés ou des fonctions qui acceptent un nombre (<number>) comme valeur ou paramètre, ou converti en un type de données différent en le multipliant par une valeur typée.

Pour une explication complète de l'arithmétique typée en CSS, ainsi que des exemples, consultez Utilisation de l'arithmétique typée CSS.

Prise en charge du calcul des canaux de couleur dans les couleurs relatives

La fonction calc() peut être utilisée pour manipuler directement les canaux de couleur dans le contexte des couleurs relatives. Cela permet des ajustements dynamiques des canaux de couleur dans des modèles de couleur tels que rgb(), hsl() et lch().

La syntaxe des couleurs relatives définit plusieurs mots-clés de canal de couleur, chacun représentant la valeur du canal de couleur en tant que nombre (<number>) (voir Les valeurs des canaux se résolvent en valeurs <number> pour plus d'informations). La fonction calc() peut utiliser ces mots-clés de canal de couleur pour effectuer des ajustements dynamiques sur les canaux de couleur, par exemple, calc(r + 10).

Syntaxe formelle

<calc()> = 
  calc( <calc-sum> )  

<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        

Accessibilité

Lorsque calc() est utilisé pour contrôler la taille du texte, assurez-vous qu'une des valeurs inclut une unité de longueur relative, par exemple :

h1 {
  font-size: calc(1.5rem + 3vw);
}

Cela garantit que la taille du texte s'adaptera si la page est zoomée.

• Comprendre le WCAG sur MDN, Explications de la règle 1.4
• Comprendre le critère de succès 1.4.4 : Redimensionner le texte | WAI | W3C ^(angl.)

Exemples

Positionner un objet sur l'écran avec une marge

calc() rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :

.banniere {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banniere">C'est une bannière&nbsp;!</div>

Dimensionner automatiquement les champs d'un formulaire pour s'ajuster au conteneur

Un autre cas d'utilisation de calc() est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.

Regardons un peu le CSS :

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#boite-formulaire {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons calc() pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :

<form>
  <div id="boite-formulaire">
    <label for="misc">Tapez quelque chose&nbsp;:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Imbriquer plusieurs calc() grâce aux variables CSS

Prenons la feuille de style suivante :

.toto {
  --largeurA: 100px;
  --largeurB: calc(var(--largeurA) / 2);
  --largeurC: calc(var(--largeurB) / 2);
  width: var(--largeurC);
}

Une fois que toutes les variables sont développées, --largeurC a la valeur calc(calc(100px / 2) / 2). Lorsqu'elle est affectée à la propriété width de .toto, toutes les fonctions calc() imbriquées (peu importe leur profondeur) sont aplaties en simples parenthèses. Par conséquent, la valeur de la propriété width est finalement calc((100px / 2) / 2), ce qui équivaut à 25px. En résumé, un calc() à l'intérieur d'un autre calc() est identique à l'utilisation de parenthèses.

Ajuster les canaux de couleur dans les couleurs relatives

La fonction calc() peut être utilisée pour ajuster les canaux de couleur individuels dans les couleurs relatives sans avoir besoin de stocker les valeurs des canaux de couleur en tant que variables.

Dans l'exemple ci-dessous, le premier paragraphe utilise une couleur nommée (<named-color>). Dans les paragraphes qui suivent, calc() est utilisé avec les fonctions rgb() et hsl() pour ajuster les valeurs de chaque canal de couleur par rapport à la couleur nommée d'origine.

<p class="originale">Couleur originale du texte en rebeccapurple</p>
<p class="teinte-augmentee">Teinte augmentée de 80</p>
<p class="luminosite-augmentee">Luminosité augmentée de 20</p>
<p class="luminosite-diminuee">Luminosité diminuée de 10</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.originale {
  color: rebeccapurple;
}

.teinte-augmentee {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.luminosite-augmentee {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.luminosite-diminuee {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

Pour un autre exemple d'utilisation de la fonction calc() pour dériver des couleurs relatives, voir la section Utiliser les fonctions mathématiques de la page Utiliser les couleurs relatives.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <calc-sum>
• Le type de donnée <calc-keyword>
• Les fonctions CSS
• Un guide complet sur calc() en CSS ^(angl.) (CSS-Tricks)