Faire des maths en css avec calc()

calc() est une fonction native de CSS3 qui permet de faire des calculs mathématiques simples (addition, soustraction, multiplication et division) en remplacement de n'importe quelle valeur de largeur / hauteur / position / angle / temps ...etc.

Etre capable de faire des calculs mathématiques simples en CSS peut être utile dans certains cas et peut éviter d'utiliser du javascript inutilement.

Elle s'écrit de cette façon :

.maDiv {
	width: calc(100% - 150px);
	height: calc(50% / 20em);
    width: calc(75em + 10%);
    height: calc(100% * 5px);
}

Attention : ne pas oublier l'espace autour de l'opérateur numérique pour qu'il soit pris en compte dans le css.

Prenons un cas très simple :

.maDiv {
	width: calc(100% - 150px);
}

Ici, la largeur de ma div sera toujours de 100% moins 150 pixels, peu importe la valeur de mon 100%, nous pouvons donc définir une largeur dynamique à l'aide d'une simple soustraction et grâce à ce système nous savons que le contenu sera toujours avec une marge fixe de 150px à droite.

sur desktop

 

sur mobile

Mixer les unités

Le principal avantage de calc() est qu'il offre la possibilité de combiner différentes unités de mesure, par exemple, vous pouvez mixer em et px, pourcentage et pixel, em et pourcentage... etc.

.maDiv {
	width: calc(5em + 10px);
}

En mixant des unités de valeurs, nous pouvons avoir plus de contrôle sur un élément tout en gardant un côté adaptatif très pratique pour le responsive.

Quelques cas utiles :

Un layout CSS

calc() peut être très utile pour mettre en place rapidement un layout css sans grid. Grâce à cette fonction, il est possible, par exemple, de mettre en place un layout avec trois colonnes qui sont séparées par une gouttière de 2em.

.maDiv {
	width: calc((100% / 3) - (2em - 2em / 3));  
	float: left; 
}

Une police de caractère adaptative

Un autre exemple, vous pouvez utiliser calc() afin de faire une typographie fluide.

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

Grâce à ce code, nous définissons une police de caractère d'un minimum de 16px (lorsque l'on est sur un viewport de 320px) à un maximum de 22px (lorsque l'on est sur un viewport de 1000px).

Positionner un background image

Supposons que nous voulons que notre image de background soit toujours en bas à droite de notre container, à 20px de la droite et à 20px du bas et ceci dans tous les cas. En utilisant un background-position classique comme background-position: 20px 20px; nous partons du haut et de la gauche, mais en utilisant calc nous pouvons lui spécifier une valeur à droite et en bas.

.maDiv {
    background-position: calc(100% - 20px) calc(100% - 20px);
}

Et la compatibilité ?

La compatibilité est assez bonne, il nous faudra juste prévoir un fallback pour les anciennes versions d'IE.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.