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