
La fonction `calc()` de CSS nous permet de calculer des valeurs de propriétés. Par exemple, au lieu de déclarer des valeurs fixes pour la largeur d'un élément, nous pouvons utiliser `calc()` pour spécifier que la largeur sera le résultat de l'addition de deux valeurs numériques (ou plus).

```
.foo {
    width: calc(100px + 50px);
}
```

<h2>Pourquoi calc( ) ?</h2>

Si vous avez déjà utilisé des préprocesseurs comme Sass, l'exemple qui précède vous est sans doute familier (<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : sinon, voir le [guide de style Sass](https://sass-guidelin.es/fr/)_).

```
.foo {
    width: 100px + 50px;
}

// Ou en utilisant des variables Sass
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}
```

Toutefois, la fonction `calc()` est une meilleure solution, pour deux raisons.

D'abord parce qu'elle permet de mélanger des unités différentes. En particulier, nous pouvons utiliser des pourcentages et des unités de viewport avec des unités absolues telles que les pixels. Par exemple nous pouvons créer une expression qui va soutraire une valeur en pixels à une valeur en pourcentage.

```
.foo {
    width: calc(100% - 50px);
}
```

Dans cet exemple, l'élément `foo` aura toujours une largeur de 50px inférieure à 100% de son élément parent.

Ensuite parce qu'avec `calc()` la valeur calculée est l'expression elle-même et non la valeur résultant de l'expression. Je m'explique&nbsp;: lorsqu'on construit des expressions mathématiques avec les préprocesseurs, la valeur passée au navigateur est la valeur _résultant de l'expression_&nbsp;:

```
// Valeur spécifiée en SCSS
.foo {
    width: 100px + 50px;
}

// Le SCSS est compilé en CSS
// La valeur passée au navigateur :
.foo {
    width: 150px;
}
```

Avec `calc()` la valeur parsée par le navigateur est _l'expression elle-même_&nbsp;:

```
// Valeur spécifiée en CSS
.foo {
    width: calc(100% - 50px);
}

// Valeur calculée dans le navigateur
.foo {
    width: calc(100% - 50px);
}
```

Du coup les valeurs sont dynamiques et s'adaptent aux changements de viewport. Nous pouvons avoir un élément avec une hauteur de viewport moins une valeur absolue, il s'adaptera aux changements du viewport.

<h3>Utiliser calc( )</h2>

On peut utiliser la fonction `calc()` pour additionner, soustraire, multiplier ou diviser des valeurs numériques de propriétés&nbsp;: les data types `<length>`, `<frequency>`, `<angle>`, `<time>`, `<number>`, ou `<integer>`.

Voici quelques exemples :

```
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}
```

<h3>Imbriquer les calc( )</h3>

On peut même imbriquer les fonctions `calc()`. Les fonctions entre parenthèses seront traitées comme de simples expressions. Si nous prenons par exemple&nbsp;:

```
.foo {
    width: calc( 100% / calc(100px * 2) );
}
```

la valeur calculée de cette fonction sera :

```
.foo {
    width: calc( 100% / (100px * 2) );
}
```

<h3>Compatibilité</h3>

La fonction `calc()` est largement supportée. Pour voir la compatibilité à la date de lecture de cet article, vous pouvez consulter —&nbsp;comme toujours&nbsp;— [CanIUse](https://caniuse.com/#feat=calc).

Si un navigateur n'est pas compatible, toute l'expression propriété-valeur est ignorée. Par conséquent la solution de rechange (_fallback_) est simple à mettre en oeuvre, il suffit de fournir une valeur statique qui sera utilisée à la place.

```
.foo {
    width: 90%; /* Fallback pour les anciens navigateurs */
    width: calc(100% - 50px);
}
```

<h2>Quand utiliser calc( ) ?</h2>

On peut utiliser cette fonction dans diverses situations.

<h3>Exemple 1 - Centrer des éléments</h3>

`calc()` nous offre une solution de plus au problème classique du [centrage horizontal et vertical](/articles/centrer-en-css-un-guide-complet/) des éléments à l'intérieur d'un conteneur. Si nous connaissons les dimensions de l'élément enfant, une solution typique est d'utiliser des marges négatives pour déplacer l'élément de la moitié de sa hauteur et de sa largeur&nbsp;:

```
// Avec un élément .foo ayant pour hauteur et pour largeur 300px
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}
```

Avec la fonction `calc()` nous obtenons le même résultat en n'utilisant que les propriétés `top` et `left`.

```
.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}
```

De telles méthodes sont sans doute moins nécessaires maintenant que nous avons [Flexbox](/tags/flexbox/), cependant dans des cas où Flexbox ne peut être utilisé, par exemple si l'élément doit avoir une position absolue ou fixe, cette méthode reste utile.

<h3>Exemple 2 - Créer une dimension de grille à partir de root</h3>

On peut utiliser la fonction `calc()` pour créer une grille basée sur le viewport avec l'unité `rem`. Pour cela, on définit dans l'[élément racine](https://developer.mozilla.org/fr/docs/Web/CSS/:root) (_root_) la font-size comme une fraction de la largeur du viewport.

```
html {
	font-size: calc(100vw / 30);
}
```

Maintenant `1 rem` correspond à 1/30 de la largeur du viewport. Tous les textes dans notre page seront mis à l'échelle automatiquement en fonction du viewport et la même quantité de texte apparaîtra toujours à l'écran quelle que soit sa taille&nbsp;:

<p>
<video width="780" style="width: 100%;" autoplay="" loop="" muted="" playsinline="" poster="https://res.cloudinary.com/ireaderinokun/image/upload/c_scale,q_59,w_780/v1486662717/ezgif.com-optimize_w09wsb.jpg">
    <source type="video/webm" src="https://res.cloudinary.com/ireaderinokun/image/upload/f_auto/v1486662717/ezgif.com-optimize_w09wsb.webm">
    <img src="https://res.cloudinary.com/ireaderinokun/image/upload/c_scale,q_59,w_780/v1486662717/ezgif.com-optimize_w09wsb.jpg" alt="image d'un écran redimensionné, montrant comment le texte s'adapte tout en restant aux mêmes proportions">
</video>
</p>

Si nous donnons à d'autres éléments non-textuels des dimensions en unités `rem`, ìls se comporteront de la même manière.

<h3>Exemple 3 - Clarté</h3>

Enfin, `calc()` peut s'avérer utile pour rendre les calculs plus évidents à comprendre. Si vous voulez qu'un groupe d'éléments aient pour dimension 1/6 de la largeur de leur conteneur parent, vous pourriez l'écrire ainsi&nbsp;:

```
.foo {
	width: 16.666666667%;
}
```

Mais pour les lecteurs de votre CSS, ce serait bien plus clair ainsi&nbsp;:

```
.foo {
	width: calc(100% / 6);
}
```

**Ressources complémentaires en français**

- [La fonction calc() en CSS](https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html), par Raphaël Goetter
- [calc()](https://developer.mozilla.org/fr/docs/Web/CSS/calc) dans MDN


La Cascade

sass

Comment fonctionne calc()

Ressources complémentaires en français

Ressources complémentaires en anglais