Vous ne savez pas ce qu’est la fonction CSS calc() ? Eh bien, continuez à lire car vous êtes sur le point d’apprendre quelque chose de nouveau.
CSS calc() est une fonction utilisée pour effectuer des calculs simples afin de déterminer les valeurs des propriétés CSS directement dans CSS. La fonction calc() permet d’utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) comme valeurs de composants.
Avantages
– La caractéristique la plus utile de cette fonction est la possibilité de mélanger les unités. Par exemple, vous pouvez multiplier des pixels par un pourcentage.
– Que faire si j’utilise déjà des fonctions mathématiques avec un préprocesseur ? Si vous utilisez les fonctions mathématiques du préprocesseur, il est temps de passer aux fonctions mathématiques CSS natives, car elles sont plus puissantes et vous permettent de faire plus de choses.
– Enfin, le support des navigateurs est excellent. Selon « Can I Use », cette fonction est prise en charge par 80,79 % des navigateurs.
Syntaxe et quelques points à noter
Vous pouvez voir ici un exemple de CSS calc() en action :
.item{
width : calc(100% – 60px) ;
}
Voici une liste de quelques éléments que vous devez connaître avant de commencer à travailler avec la fonction CSS calc() :
– Le calcul est effectué de gauche à droite.
– La division ou la multiplication sera calculée en premier et les expressions mathématiques entre parenthèses seront également calculées en premier.
– Le préfixe, -moz- et -webkit-, est nécessaire pour couvrir les versions antérieures de Firefox, Chrome et Safari.
– Comme nous l’avons déjà mentionné, vous pouvez mélanger les unités. Par exemple, vous pouvez multiplier les pixels par un pourcentage.
– Un espace blanc est requis des deux côtés des opérateurs « + » et « -« . Les opérateurs « * » et « / » peuvent être utilisés sans espace autour d’eux.
Une sélection d’exemples
Nous avons préparé pour vous quelques exemples qui vous permettront de constater l’utilité de calc().
Exemple 1 – Créer une grille simple et réactive
Dans cet exemple, vous pouvez voir comment créer une grille réactive. Nous avons utilisé calc() pour calculer la largeur des colonnes de notre grille.
Si vous voulez voir le HTML et le CSS, cliquez sur les onglets « HTML » et « CSS » ci-dessus.
Exemple n° 2 – Centrage d’éléments positionnés en absolu
Vous ne savez pas comment centrer un élément positionné en absolu ? C’est très facile à faire avec calc().
Exemple n° 3 – Positionnement d’une image d’arrière-plan avec la fonction CSS calc()
Habituellement, nous pouvons positionner une image d’arrière-plan dans le coin supérieur gauche, mais que faire si nous voulons la positionner dans le coin inférieur droit ?
Conclusion
C’est tout ! Si IE 8 n’est pas très important pour votre projet, vous utiliserez très souvent cette fonction calc().
Nous espérons que vous avez appris quelque chose de nouveau dans cet article. Il est temps pour vous de jouer avec nos exemples et d’en apprendre plus sur la fonction CSS calc().
