calc() CSS fonction

height : calc(1em - 12px);
width : calc(50% + 12px);
margin : calc(100% / 4) calc(100% / 3);
padding : calc(25% * 0.5);
left : calc(100% / 2 - 2 * 1em - var(--taille) * 1px);

left : calc(50% +10px); // Pas bon
left : calc(50% + 10px); // Bon

margin : calc(1px + 1px) calc(1px + 10px) ;

calc(10px - 20s);
/* Pas possible car il y a un mélange entre des longueurs et des secondes */

calc(50% - 20s);
/* Possible si la propriété à laquelle est associée calc() accepte des secondes */

calc(50% - 20);
/* Pas possible car on ne sais pas l'unité, faut il enlever 10px, 10em, 10s, ...?  */

Règles de syntaxes CSS pour calc().

Le résultat du calcul calc()

Résultat invalide de la Css calc() :
Le résultat du calcul de la fonction de Calculs Mathématiques CSS calc() doit être compatible avec les valeurs autorisées de la propriété à laquelle la fonction de Calculs CSS calc() est assignée.
Dans le cas d'un résultat invalide alors la valeur est 0.

/* Fonctionne pas car width n'accepte pas des valeurs négatives */
width : calc(100px - 200px); /* valeur calculé est 0 conforme au w3c */

/* Fonctionne pas car line-height n'accepte pas des valeurs négatives */
line-height : calc(100px - 200px); /* valeur calculé est 0 conforme au w3c ou sur certain navigateur 16px valeur par défaut */

/* Fonctionne car margin-top accepte des valeurs négatives */
margin-top : calc(100px - 200px);

Mauvaise écriture du calcul dans la fonction de Calcul CSS calc() :
Si la fonction de Calculs Mathématiques CSS calc() est mal écrite, alors elle est ignorée. La valeur de la propriété dépendra de sa valeur par défaut ou de son héritage.

/* la valeur de margin-top est de 5 */
.identifiant {
  margin-top : 5px;
  margin-top : calc(10px-20px); /* erreur pas d'espace */
}

/* la valeur de margin-top est de 0 valeur par défaut */
.identifiant {
  margin-top : calc(10px-20px); /* erreur pas d'espace */
}

Des valeurs en pourcentage dans calc()

La valeur calculée pour les valeurs en % dépend de la propriété à laquelle la fonction de Calculs Mathématiques CSS calc() est assignée.
La valeur en % est calculée comme quand vous assignez une valeur en pourcentage à cette propriété, elle respect les mêmes règles.

/* 100% correspond a 100% de son parent */
width : calc(100% - 1em);

/* 99% et 50% lui correspond à 99% et 50% du width calculé de son parent */
margin-top : calc(99% - 50%);

Si la valeur calculée d'origine servant à calculer la valeur en pourcentage change (ex : nouvelle assignation en Javascript) le calcul est refait. Ce qui n'est pas le cas pour les CSS calc() sans valeurs en %.

Attention :
En raison de la façon dont les navigateurs gèrent sous-pixel, l'arrondi diffère suivant ces derniers. Cela peut amener à des résultats inattendus dans votre mise en page.

Faire un calcul plus "complexe"

Vous pouvez faire des calculs à plus de 2 valeurs, dans ce cas l'écriture du calcule respecte les règles de calcul mathématique, c'est à dire que la division et la multiplication sont prioritaires sur la soustraction et addition.

width : calc((100px - 10px - 200px) * 2);

Compatibilités navigateurs de la fonction calc()

Fonctions CSS préfixées de calc()

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la fonction calc() CSS :

1. -moz-calc
2. -webkit-calc

Pour Firefox >= 4 et < 16 :
La fonction équivalente est -moz-calc CSS .
Pour Safari 6 :
La fonction équivalente est -webkit-calc CSS .
Pour Chrome 19+ et < 26:
La fonction équivalente est -webkit-calc CSS .

identifant{
  width : 50%; /* si aucun calc() n'est compris */
  width : -moz-calc(50% + 10px);
  width : -webkit-calc(50% + 10px); 
  width : calc(50% + 10px); 
}

Votre avis sur la définition calc() en CSS