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

Compatibilité et prise en charge par les navigateurs.
La fonction calc()
est maintenant bien prise en charge par les
navigateurs.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).