Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

calc() - Fonction CSS

calc()

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

Description rapide
Calcule 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 proposé pour 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. Mais, à l'heure actuelle (2022), peu de ces fonctions sont reconnues par les navigateurs (2022).
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);
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);
100 est un nombre sans dimension, qui ne peut s'ajouter à une 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() 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 fonction peut être utilisée avec :

  • 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().

Syntaxe 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 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(). Mais à l'heure actuelle, peu de ces fonctions sont prises en charge par les navigateurs.

Exemple.

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

 

 

 

 

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.

width :
Exemple pour la fonction calc()

Compatibilité et prise en charge par les navigateurs.

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

Colonne 1
Traitement de la fonction calc().
Colonne 2
Traitement correct de plusieurs fonctions calc() imbriquées.
Colonne 3
Traitement correct de la fonction calc() dans une directive @media.
1
calc()
2
calc()
nested
3
calc
@media
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que calc().

Les spécifications CSS éditées par le W3C sont organisées en modules. calc() fait partie du Module CSS - Valeurs et unités (CSS Values and Units Module). Les définitions suivantes sont également décrites dans ce même module.

Fonctions.

Calcule la valeur absolue d'un nombre.
Calcule l'angle dont le cosinus vaut la valeur indiquée.
Calcule l'angle dont le sinus vaut la valeur indiquée.
Calcule l'angle dont la tangente vaut la valeur indiquée.
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
Renvoie la valeur d'un attribut.
Calcule une valeur entre deux valeurs extrêmes.
Calcul le cosinus d'un angle.
Calcule l'exponentielle d'un nombre.
Calcule la racine carrée d'une somme de carrés de nombres.
Calcule le logarithme d'un nombre.
Détermine la valeur la plus petite parmi une série de valeurs.
Détermine la valeur la plus grande parmi une série de valeurs.
Calcule le reste de la division entière entre deux nombres.
Calcule une mise à l'exposant
Calcule le reste de la division entière de deux nombres.
Calcule l'arrondi d'un nombre.
Calcule le signe d'un nombre.
Calcule le sinus d'un angle.
Calcule la racine carrée d'un nombre.
Calcule la tangente d'un angle.
Spécifie l'adresse d'un élément tel qu'une image par exemple.