Fonction calc()

Introduction.

La fonction calc() accepte des longueurs ou bien des valeurs numériques mais pas de chaines de caratères. Les valeurs acceptées sont 'px', '%', 'rem', 'em', 'in', 'mm', 'cm', 'pt', 'pc', 'ex', 'ch', 'vh', 'vw', 'vmin' et 'vmax'. Il est possible d'utiliser des chiffres sans extentions tout comme certaines autre valeurs: 'deg'. Ne pas mettre d'espace entre 'calc' et les parenthèses. Par contre les opérateurs '+' et '-' doivent toujours être entourés d'un espace, mais '/' et '*' n'en nécessitent pas. Pour la multiplication, au moins un des argument doit être une valeur numérique et pour la division, l'opérande ne peut être qu'une valeur numérique. Il est aussi possible d'imbriquer les fonctions 'calc()'. Si calc() accepte de mixer les valeurs, cela ne fonctionne pas avec les media queries.

/* erreur */
div {
content: calc("une chaine" + 1);

margin: calc (80vw - 10px);
}

/* ok */
div {
transform: rotate(calc(20deg * 3));
}

/* erreur */
@media (min-width: calc(40rem + 5px)) {
}

/* ok */
@media (min-width: 400px) and (max-width: 1000px) {
  :root {
    font-size: calc( 16px + (24 - 16) * ( (100vw - 400px) / ( 1000 - 400) ));
  }
}
									

L'addition et la soustraction.

Toutes deux requièrent des valeurs numériques qui soient des longueurs comme suit et des espaces:

/* ok */
div {
margin: calc(100vw - 10px);

ou bien:

margin: calc(10px + 15%);

ou encore:
margin: calc(100vw - -10px);
}

/* erreur */
div {
margin: calc(100vw - 10);

tout comme:
margin: calc(100vw-10px);

ou bien:
margin: calc(100vw+10px);
}

									

La division et la multiplication.

Une des valeurs ne doit pas être une longueur.

/* ok */
div {
margin: calc(100vw / 5);
}

/* erreur */
div {
margin: calc(30px / 5px);

et bien entendu la division par zéro...
margin: calc(30px / 0);
}

/* ok */
div {
margin: calc(15px * 5);
}

/* erreur */
div {
margin: calc(15px * 5px);
}

									

Imbriquer des calc(calc()).

Il est possibles d'imbriquer des fonctions calc() bien que cela n'est pas vraiment utile mais il est impératif de les nommer comme suit:

/* ok */
div {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

/* mais préférer cette écriture */
div {
  width: calc(100% / 3 - 1rem * 2);
}

/* erreur */
div {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}
									

Quand il y une suite d'opérandes, les multiplications et les divisions sont calculées en premier, ensuite se seront les additions et les soustractions. Pour changer l'ordre des opartions, il faut utiliser des parenthèses.

div {
  
  width: calc(100% + 2rem / 2);

  /* ici, l'ordre des opérations n'est pas le même que ci-dessus */
  width: calc((100% + 2rem) / 2);
}
									

Propriétés personnalisées.

Très pratique...

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

/* ou bien encore */
html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}


/* et pour finir */
.margin { width: calc( (100vw - var(--content-width)) / 2); }
									

Utiliser calc() avec les couleurs.

Il est possible d'utiliser les codes de couleurs de type RGB et HSL.

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

div {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}
									

Articles connexes:

Font Locks (en cours).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/12/2020