Calc() - Fonction CSS
Résumé des caractéristiques de la 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, 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);width:calc(100% / 2);width:calc(100 * 1px);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);0 doit comporter une unité, même si la plupart des propriétés acceptent 0 sans unité.width:calc(45deg - 50px);width:calc(20px * 20px); 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-10px - 2px10px + -2px10px-2pxAmé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().
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).
Simulateur.
Compatibilité et prise en charge par les navigateurs.
La fonction calc() est maintenant bien prise en charge par les navigateurs.
calc().
calc() imbriquées.
calc() dans une directive @media.
calc()calc()imbriquées
calc()dans
@mediaNavigateurs 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
UC Browser pour Androïd
Opéra mini
Voir aussi : autres fonctions de calcul.
Les fonctions de calcul disponibles en CSS sont de plus en plus nombreuses. Elles couvrent les calculs mathématiques et trigonométriques courants. En voici la liste pour faciliter vos recherches. Vous pouvez également vous reporter à la spécification du W3C CSS Values and Units Module.
Fonctions :
Valeurs:
e (base des logarithmes anturels), soti environ 2,7182818284590452354.pi (environ 3,1415926535897932).