-webkit-calc() CSS fonction

Définition de la CSS -webkit-calc().

La fonction de Calculs Mathématiques CSS -webkit-calc() permet d'exécuter un calcul mathématique simple dans votre feuille CSS.

height : -webkit-calc(500px - 12px);
width : -webkit-calc(50% + 12px);
margin : -webkit-calc(100% / 2) -webkit-calc(100% / 3);
padding : -webkit-calc(10% * 12);
left : -webkit-calc(100% / 2 - 2 * 1em - 2 * 1px);

La fonction de Calculs Mathématiques CSS -webkit-calc() retourne une valeur calculée.
La fonction de Calculs Mathématiques CSS -webkit-calc() accepte comme opérateur de calcul :

• "+" : pour faire un calcul d'addition.
• "-" : pour faire un calcul de soustraction.
• "/" : pour faire un calcul de division, la division par 0 génère une erreur donc une valeur invalide.
• "*" : pour faire un calcul de multiplication.

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

Il est possible de mettre plusieurs fonctions de Calculs CSS -webkit-calc à la suite :

La fonction de Calculs Mathématiques CSS -webkit-calc() accepte de faire un calcul avec des unités différentes, à condition que ces dernières soient du même type et qu'elles soient acceptées par la propriété CSS à laquelle -webkit-calc() est assignée.

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

Exemple de code -webkit-calc() CSS

Conditions d'application de la CSS -webkit-calc().

La fonction de Calculs Mathématiques CSS -webkit-calc() est applicable sur toutes propriétés de feuille de style acceptant : une longueur, une position, un angle, une durée ou un chiffre.

Problème d'interprétation de -webkit-calc() en Css.

La fonction de Calculs Mathématiques CSS -webkit-calc() pose des problèmes car elle n'est interprétée que par Safari 6+ et Chrome 19+