Insérer la fonction calc() dans notre CSS

fonction calc

Une fonction CSS3 bien pratique, la fonction calc() permet la réalisation de toutes opérations mathématiques : multiplication, soustraction, addition et division. Bien que très utile, la fonction n’est compatible qu’avec les navigateurs récents.

Ce que l’on peut faire avec la fonction calc()

Comme son nom l’indique, on pourra tout simplement dire que cette fonction permet le calcul de résultat d’opérations mathématiques. Cette fonction pourra être utilisée dans une feuille de style.

Attention, la formule sera inopérante si l’opérateur est accolé aux opérandes, il faudrait les séparer par une espace.

Il est à noter aussi que l’on peut effectuer des opérations indépendamment de l’unité de mesure utilisée. Le navigateur prendra en charge les conversions.

Exemple:

Taille Width et Height

Avec la fonction calc(), il est facile de réaliser des opérations simples pour le calcul des dimensions en fonction de la taille disponible.

Positionnement

Colonne et élément flottant

Grâce à la fonction calc(), il devient plus facile par exemple de placer trois colonnes qui seront chacune séparées d’une gouttière de 1em. Bien que cette opération est facilement réalisable avec des données de pourcentages ainsi que des classes CSS, avec calc(), cela devient un jeu d’enfant.

Il est également possible de s’attaquer à des opérations plus complexes. Ces opérations utiliseront de nombreuses fonctions calc() qui pourront être entremêlées les unes dans les autres. Et dans certains cas, vous pourrez utiliser la fonction attr() pour la récupération de la valeur d’un attribut HTML.

Pour conclure, on pourra dire que la fonction CSS3 calc() a offert une belle et grande avancée puisqu’elle offre la possibilité d’écrire des formules que de nombreux intégrateurs désiraient effectuer depuis plusieurs années sans devoir utiliser JavaScript ou d’autres fonctions offrant des retours aléatoires dans certains cas.

Compatibilité

Navigateurs Versions Détails
Internet Explorer Internet Explorer 9+ Sans préfixe
Firefox Firefox 4+Firefox Mobile préfixe -moz-jusqu’à Firefox 15
Chrome Chrome 19+Chrome Mobile préfixe -webkit-jusqu’à Chrome 25
Opera Opera 15+Opera Mobile 21+ Sans préfixe
Safari Safari 6+Safari Mobile 6+ Avec préfixe -webkit-
Android Browser Android Browser 4.4+ sans préfixe 

Répondre