Ne vous est-il jamais arrivé de vouloir aligner plusieurs éléments sur une même ligne en vous cassant la tête sur le calcul des marges ? En testant un coup avec des blocs en pourcentage et des marges fixes ? Puis des marges en pourcentage ? Pour finir par avoir envie de tout envoyer en l’air…
Avec la fonction CSS Calc qui permet tout simplement d’effectuer des calculs (+, -, *, /), fini le bricolage ! Le temps où on fixait la largeur d’un élément à 24.215478% pour aligner 4 boutons avec marges et/ou bordures dynamiquement est révolu.
Quelques explications sur CSS Calc
Prenons un exemple simple, voici nos besoins :
- 4 boutons alignés qui occupent 100% de la largeur de leur conteneur
- chaque bouton doit avoir la même largeur
- chaque bouton doit avoir une bordure et une marge de 1px
“Bah, on fixe la largeur de chaque bouton à 25% !” Vous me direz !
Sauf que lorsque l’on veut appliquer nos bordures et nos marges qui ont une taille fixe, et bien ça pose problème !
Exemple avec width: 25%; pour chaque élément :
Pas génial comme résultat… On comprend donc qu’il faudrait que chaque élément fasse 25% de largeur AVEC ses bordures et marges.
C’est là qu’intervient la fonction CSS Calc
Pour un résultat dynamique il faudrait donc déclarer à monsieur CSS qu’on veut que la largeur de nos boutons fasse 25% moins le pixel de bordure (*2) et moins le pixel de marge (*2 aussi).
Pour être plus clair, largeur de chaque élément = 25% – 4px.
Vous l’aurez compris, c’est ce que la fonction Calc permet de faire. La syntaxe est la suivante :
width: calc(25% – 4px);
Et voilà le résultat !
On a nos 4 boutons alignés qui s’adapteront dynamiquement à la taille de l’écran.
Pour aller plus loin
Évidemment il s’agit ici d’un exemple d’utilisation de cette fonction parmi beaucoup d’autres ! En effet la fonction CSS Calc peut être aussi utilisée pour un temps, une fréquence, obtenir une variable en somme ! Cependant, attention à la compatibilité entre navigateurs…
Pour plus d’infos : https://developer.mozilla.org/fr/docs/CSS/calc
Fin du cours, place à la (ré)création !
Un article rédigé pour vous par Alex
Gérant & Directeur technique. "Spécialisé dans les métiers du web depuis plus de seize ans, il a créé l'agence web Keole en 2012. Architecte, Il analyse, synthétise et conceptualise les différents projets de l'agence depuis sa tour de contre-ordre." Spécialités : Touche à tout écervelé. Il aime : voir le verre à moitié plein | les cataclysmes, les volcans et les dinosaures | l'absurde | l'abîme. Il n'aime pas : ceux qui voient le verre à moitié vide | le repli sur soi | Dieu, s'il existait. Son idole : Laszlo Carreidas
