Définition de la CSS calc().
La fonction de Calculs Mathématiques CSS calc()
permet d'exécuter un calcul mathématique simple dans votre feuille CSS.
La fonction de Calculs Mathématiques CSS calc()
retourne une valeur calculée.
La fonction de Calculs Mathématiques CSS 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.
L'opérateur utilisé dans la fonction de Calculs Mathématiques CSS
calc()
doit être suivi et précédé d'un espace :Il est possible de mettre plusieurs fonctions de Calculs CSS calc()
à la suite :
La fonction de Calculs Mathématiques CSS calc()
accepte 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 calc()
est assignée.
Conditions d'application de la CSS calc().
La fonction de Calculs Mathématiques CSS 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 calc() en Css.
La fonction de Calculs Mathématiques CSS calc()
pose des problèmes car elle n'est interprétée que par Internet Explorer 9+ et par Firefox 16+
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.
auto
', dans ce cas la valeur calculée est 0.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.
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.
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.
Compatibilités navigateurs de la fonction calc()
- Détails des versions de la CSS calc()
- Fonction
calc()
est compatible avec CSS3 et plus.
Fonctions CSS préfixées de calc()
Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la fonction calc()
CSS :
Votre avis sur la définition calc() en CSS
Votez pour la définition CSS calc()
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 4.3 / 5 - 24
votes
Cliquez sur une étoile pour voter.