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 :

CSS - Fonction calc()

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 et comporter des parenthèses.
    + : addition
    - : soustraction
    * : multiplication
    / : division

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. Exemple :

width: calc(100% - 100px);

Les espaces avant et après les opérateurs 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.

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

Exemple.

Centrer un bloc positionné en absolu (absolute) ou en fixé (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 "Exemple1", a été positionné et fixé en haut de l'écran. Il reste pourtant toujours centré quelque soit la largeur de l'écran ou de la fenêtre du navigateur. Observez comment sa propriété left a été initialisée avec calc().

Quant au bloc rose (exemple2), 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).

Exemple1
Exemple2

La fonction calc() peut être utilisée avec :

  • A la place de n'importe quelle valeur numérique.

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

Simulateur.

Tapez une expression algébrique. Elle sera appliquée à la largeur de l'image. Vous pouvez combiner n'importe quelles unités tant que ce sont des unités de dimensions en CSS, absolues ou relatives.

width:
( expression )
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.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Fonctions de calcul - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • clamp() : Calcule une valeur entre deux valeurs extrêmes.
  • max() : Détermine la valeur la plus petite parmi une série de valeurs.
  • min() : Détermine la valeur la plus grande parmi une série de valeurs.
  • minmax() : Renvoie une valeur comprise dans une fourchette.