La fonction calc() peut être utilisée à n'importe quel endroit ou une <length>, <frequency>, <angle>, <time>, <number>, <percentage> 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.

/* property: calc(expression) */
width: calc(100% - 80px);

Il est aussi possible d'utiliser calc() dans une autre fonction calc() et ainsi d'imbriquer les fonctions les unes dans les autres.

Syntaxe

Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. 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 droit doit être une valeur de type <number>.

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.

Notes

  • Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.
  • 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é.
  • Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groups de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'est auto qui avait été utilisé.
  • Il est possible d'imbriquer des fonctions calc(), auquel cas, les appels « internes » sont considérés comme des parenthèses.

Syntaxe formelle

calc( <calc-sum> )


<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*


<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*


<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: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
<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: calc(100% - 1em);
}

#boiteformulaire {
  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.

Accessibilité

Lorsque vous utilisez calc() pour définir la taille d'un texte, assurez-vous d'inclure une unité de longueur relative. Par exemple :

h1 {
  font-size: calc(1.5rem + 3vw);
}

De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.

 

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 26
Support complet 26
Support complet 19
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet OuiFirefox Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
Aucun support 4 — 53
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 9Opera Support complet 15Safari Support complet 7
Support complet 7
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android ? Chrome Android Support complet 28Edge Mobile Support complet OuiFirefox Android Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
Aucun support 4 — 53
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 21Safari iOS Support complet 7
Support complet 7
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
Gradient color stops supportChrome Support complet 19Edge Support complet OuiFirefox Support complet 19IE Support complet 9Opera ? Safari Support complet 6WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 19Opera Android ? Safari iOS ? Samsung Internet Android ?
Nested calc() supportChrome Support complet 51Edge ? Firefox Support complet 48IE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet 51Edge Mobile ? Firefox Android Support complet 48Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
<number> value supportChrome ? Edge ? Firefox Support complet 48IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 48Opera Android ? Safari iOS ? Samsung Internet Android ?
<color> value supportChrome ? Edge ? Firefox Support complet 59IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 59Opera Android ? Safari iOS ? Samsung Internet Android ?
Media query value supportChrome Support complet 66Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet 66Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 53Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, L2o, mrstork, prayash, teoli, nhoizey, nicodel, tregagnon, FredB
Dernière mise à jour par : SphinxKnight,