Les fonctions mathématiques de CSS

Les fonctions mathématiques de CSS permettent de réaliser des opérations mathématiques directement dans les feuilles de style. Parmi ces fonctions, nous allons nous concentrer sur calc(), max() et min().

La fonction calc()

La fonction calc() permet de réaliser des calculs complexes en CSS. Elle est souvent utilisée pour définir des dimensions de blocs ou des marges en fonction de pourcentages, de pixels et d'autres valeurs.

La syntaxe générale de calc() est la suivante :

width: calc(expression);

où l'expression peut être une opération mathématique impliquant des nombres et des unités de mesure. Par exemple :

width: calc(50% - 20px);

Cette expression calcule la largeur d'un bloc en soustrayant 20 pixels de 50% de la largeur de son conteneur.

Les fonctions max() et min()

Les fonctions max() et min() permettent de définir une valeur maximale ou minimale entre plusieurs valeurs. Elles sont souvent utilisées pour définir des dimensions de blocs ou des tailles de police en fonction de différents facteurs, comme la taille de l'écran ou les préférences de l'utilisateur.

La syntaxe générale de max() et min() est la suivante :

property: max(value1, value2, ...);

property: min(value1, value2, ...);

où value1, value2, ... sont les valeurs que l'on souhaite comparer.

Par exemple, pour définir la taille de police en fonction de la largeur de l'écran, on peut utiliser la fonction min() :

font-size: min(3vw, 24px);

Cette règle CSS définit la taille de police à 3% de la largeur de l'écran ou à 24 pixels, en fonction de la valeur la plus petite.

Conseils et astuces d'utilisation

Veillez à bien respecter la syntaxe des fonctions mathématiques de CSS pour éviter les erreurs.
Utilisez les fonctions max() et min() avec précaution pour éviter des effets indésirables sur l'accessibilité ou la lisibilité du contenu.
La fonction calc() peut être utilisée pour créer des mises en page complexes et responsives en CSS.

Conclusion

En conclusion, les fonctions mathématiques de CSS comme calc(), max() et min() permettent de réaliser des opérations mathématiques directement dans les feuilles de style. Elles offrent des possibilités intéressantes pour créer des mises en page complexes et responsives en CSS. Cependant, il est important de les utiliser avec précaution pour éviter des effets indésirables sur l'accessibilité ou la lisibilité du contenu. En respectant la syntaxe et en suivant les bonnes pratiques, ces fonctions peuvent être de véritables atouts pour vos projets CSS.

Exemples pratiques

1 - Utilisez la fonction calc() pour calculer la largeur d'un élément <div id="div1"> :

Exemple :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>Utilisation de la fonction calc() pour calculer la largeur </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}
</style>
</head>
<body>

<h1>La fonction calc()</h1>

<p>Créez un div qui s'étend sur toute la fenêtre, avec un espace de 50px entre les deux côtés du div et les bords de la fenêtre :</p>

<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus luctus. Risus commodo viverra maecenas accumsan lacus vel. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Velit euismod in pellentesque massa. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Fermentum leo vel orci porta non pulvinar. Amet consectetur adipiscing elit ut aliquam purus sit. Lacus sed turpis tincidunt id aliquet risus feugiat in. Lacus vel facilisis volutpat est velit egestas dui id. Turpis in eu mi bibendum neque. Ac turpis egestas sed tempus urna. Risus in hendrerit gravida rutrum. A condimentum vitae sapien pellentesque habitant morbi tristique. At varius vel pharetra vel turpis nunc eget lorem dolor. Condimentum lacinia quis vel eros. Quis risus sed vulputate odio ut.
</div>
</body>
</html>

2 - Utilisez la fonction max() pour définir la largeur de la #div1 en fonction de la valeur la plus grande, 50% ou 300px :

Exemple :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>Utilisation de la fonction max() pour calculer la largeur </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
 background-color: yellow;
  height: auto;
  width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>La fonction max()</h1>

<p> Utilisez max() pour définir la largeur de #div1 à la valeur la plus grande, soit 50 % de la largeur de la fenêtre  ou 300px :</p>

<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus luctus. Risus commodo viverra maecenas accumsan lacus vel. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Velit euismod in pellentesque massa. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Fermentum leo vel orci porta non pulvinar. Amet consectetur adipiscing elit ut aliquam purus sit. Lacus sed turpis tincidunt id aliquet risus feugiat in. Lacus vel facilisis volutpat est velit egestas dui id. Turpis in eu mi bibendum neque. Ac turpis egestas sed tempus urna. Risus in hendrerit gravida rutrum. A condimentum vitae sapien pellentesque habitant morbi tristique. At varius vel pharetra vel turpis nunc eget lorem dolor. Condimentum lacinia quis vel eros. Quis risus sed vulputate odio ut.
</div>
<p> Redimensionnez la fenêtre du navigateur pour voir l'effet. </p>
</body>
</html>

3 - Utilisez min() pour définir la largeur de #div1 à la valeur la plus petite, soit 50 % de la largeur de la fenêtre ou 300px

Exemple :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>Utilisation de la fonction min() pour calculer la largeur </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
 background-color: yellow;
  height: auto;
  width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>La fonction min()</h1>

<p> Utilisez min() pour définir la largeur de #div1 à la valeur la plus petite, soit 50 % de la largeur de la fenêtre  ou 300px :</p>

<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus luctus. Risus commodo viverra maecenas accumsan lacus vel. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Velit euismod in pellentesque massa. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Fermentum leo vel orci porta non pulvinar. Amet consectetur adipiscing elit ut aliquam purus sit. Lacus sed turpis tincidunt id aliquet risus feugiat in. Lacus vel facilisis volutpat est velit egestas dui id. Turpis in eu mi bibendum neque. Ac turpis egestas sed tempus urna. Risus in hendrerit gravida rutrum. A condimentum vitae sapien pellentesque habitant morbi tristique. At varius vel pharetra vel turpis nunc eget lorem dolor. Condimentum lacinia quis vel eros. Quis risus sed vulputate odio ut.
</div>
<p> Redimensionnez la fenêtre du navigateur pour voir l'effet. </p>
</body>
</html>

Bien sûr il y a plusieurs fonctions css, voici une liste d'autres fonctions CSS couramment utilisées avec un exemple pour chacune d'entre elles :

rgb() : permet de spécifier une couleur RVB en utilisant des valeurs de rouge, de vert et de bleu. Exemple :
color: rgb(255, 0, 0);
pour définir la couleur rouge.
rgba() : similaire à la fonction rgb(), mais permet également de spécifier une valeur alpha pour la transparence. Exemple :
background-color: rgba(255, 255, 255, 0.5);
pour définir un fond blanc semi-transparent.
hsl() : permet de spécifier une couleur en utilisant des valeurs de teinte, de saturation et de luminosité. Exemple :
color: hsl(120, 100%, 50%);
pour définir une couleur vert vif.
calc() : permet de calculer des expressions mathématiques pour définir des valeurs de propriété CSS. Exemple :
width: calc(100% - 50px);
pour définir une largeur égale à la largeur de l'élément parent moins 50 pixels.
url() : permet de spécifier une adresse URL pour une image ou une ressource externe. Exemple :
background-image: url("image.jpg");
pour définir une image de fond.
linear-gradient() : permet de créer un dégradé linéaire en utilisant des couleurs et des points d'arrêt. Exemple :
background-image: linear-gradient(to right, red, orange, yellow);
pour créer un dégradé de couleurs allant du rouge à l'orange, puis au jaune.
box-shadow() : permet d'ajouter une ombre à un élément en utilisant des valeurs pour l'ombre, telles que la couleur, la distance, le flou et la propagation. Exemple :
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
pour ajouter une ombre légèrement floue à un élément.
transform() : permet de transformer un élément en appliquant des translations, rotations, échelles ou inclinaisons. Exemple :
transform: rotate(45deg);
pour faire pivoter un élément de 45 degrés.
transition() : permet de définir une transition d'une valeur de propriété CSS à une autre avec une durée et une fonction de chronométrage. Exemple :
transition: background-color 0.3s ease-in-out;
pour créer une transition fluide de la couleur de fond.
@media() : permet de définir des règles CSS pour des périphériques ou des tailles d'écran spécifiques en utilisant des requêtes de média. Exemple :
@media (min-width: 768px) { ... }
pour appliquer des styles CSS spécifiques aux écrans d'au moins 768 pixels

chapitre précédent

chapitre suivant

Comment utiliser les fonctions mathématiques de CSS pour créer des mises en page responsives

Cours HTML & CSS

Plus de langage HTML ET CSS

Plus...

Nos références