Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La fonction calc()
peut être utilisée à n'importe quel endroit ou une <length>
, <frequency>
, <angle>
, <time>
, <number>
, ou <integer>
est nécessaire. Grâce à calc()
, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.
Il est aussi possible d'utiliser calc()
dans une autre fonction calc()
et ainsi d'imbriquer les fonctions les unes dans les autres.
Syntaxe
calc(expression)
Valeurs
- expression
- Une expression mathématique, donc le résultat est utilisé comme valeur.
Expressions
L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :
- +
- Addition
- -
- Soustraction
- *
- Multiplication. Au moins un des arguments doit être un
<number>
. - /
- Division. Il n'est pas possible de divisier par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante.
L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.
Note : Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.
Note : Les opérateurs +
et -
doivent toujours être entouré d'espaces. Par exemple l'opérande de calc(50% -8px)
sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de calc(50% - 8px)
est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, calc(8px + -50%)
est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.
Les opérateurs *
et /
ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.
Syntaxe formelle
calc( <calc-sum> )où
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
où
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
où
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
Exemples
Positionner un objet sur l'écran avec une marge
calc()
rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS créé une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :
.banniere { position: absolute; left: 40px; width: 90%; /* valeur pour les navigateurs ne supportant pas calc() */ width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; }
<div class="banniere">C'est une bannière !</div>
Dimensionner automatiquement les champs d'un formulaire pour s'ajuster au conteneur
Un autre cas d'utilisation de calc()
est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.
Regardons un peu le CSS :
input { padding: 2px; display: block; width: 98%; /* valeur pour les navigateurs ne supportant pas calc() */ width: calc(100% - 1em); } #boiteformulaire { width: 130px; /* valeur pour les navigateurs ne supportant pas calc() */ width: calc(100%/6); border: 1px solid black; padding: 4px; }
Dans ce cas, le formulaire est lui même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons calc()
pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :
<form> <div id="boiteformulaire"> <label>Tapez quelque chose :</label> <input type="text"> </div> </form>
Imbriquer plusieurs calc()
grâce aux variables CSS
Prenons la feuille de style suivante :
.toto { --largeurA: 100px; --largeurB: calc(var(--largeurA) / 2); --largeurC: calc(var(--largeurB) / 2); width: var(--largeurC); }
Une fois que toutes les variables sont développées, largeurC
aura la valeur calc( calc( 100px / 2) / 2)
et sera ensuite affectée à la propriété width
des éléments de la classe toto
. Tous les calc()
imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme calc( ( 100px / 2) / 2)
(soit 25px). En résumé, utiliser des calc()
imbriqués revient à utiliser des parenthèses.
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Values and Units Module Level 3 La définition de 'calc()' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 19 -webkit 26 |
4.0 (2) -moz 16 (16) |
9 | ? | 6 -webkit[1] 7 |
Sur les points d'arrêt des gradients de couleur | 19 -webkit 26 |
19 (19) | 9 | ? | 6 -webkit[1] 7 |
calc() imbriqués |
51[2] | 48 (48) | ? | ? | ? |
Prise en charge des valeurs calculées | ? | 48 (48) | ? | ? | ? |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | ? | 4.0 (2) -moz 16.0 (16) |
? | ? | 6 -webkit 7 |
Sur les points d'arrêt des gradients de couleur | ? | 19.0 (19) | ? | ? | ? |
calc() imbriqués |
51[2] | 48 (48) | ? | ? | ? |
Prise en charge des valeurs calculées | ? | 48 (48) | ? | ? | ? |
[1] Pour WebKit 6.0, l'implémentation était incorrecte.
[2] Voir le bug 600113 pour Blink.