Chapitre 585 | La fonction calc() en CSS

La fonction calc() en CSS

1. Introduction à calc()

La fonction calc() permet d’effectuer des calculs directement dans les styles CSS. Elle est particulièrement utile pour créer des mises en page dynamiques en combinant différentes unités de mesure (par exemple, px, %, vh, etc.).

---

2. Syntaxe de base

propriété: calc(valeur1 opération valeur2);


• Opérations disponibles :
  • Addition (+)
  • Soustraction (-)
  • Multiplication (*)
  • Division (/)
• Utilisation courante : calc() est souvent utilisé pour gérer des dimensions, des espacements, ou des tailles de texte de manière flexible.

---

3. Exemples simples avec calc()

Exemple 1 : Largeur dynamique

.container {
  width: calc(100% - 50px); /* La largeur est la largeur totale de l'écran, moins 50 pixels */
  padding: 20px;
  background-color: lightblue;
}

Explication : La boîte occupe presque toute la largeur de l’écran, tout en laissant une marge fixe de 50 pixels.

---

Exemple 2 : Hauteur dynamique

.content {
  height: calc(100vh - 100px); /* La hauteur est 100% de la hauteur de la fenêtre visible, moins 100 pixels */
  background-color: lightcoral;
}

Explication : Cet exemple est utile pour des mises en page où vous voulez tenir compte d’un en-tête ou d’un pied de page.

---

Exemple 3 : Taille de texte flexible

.text {
  font-size: calc(16px + 1vw); /* La taille du texte est une combinaison fixe et proportionnelle */
}

Explication : La taille de la police augmente avec la largeur de l’écran (1vw = 1% de la largeur de la fenêtre).

---

4. Points importants à retenir

• Espaces obligatoires : Les opérateurs (+, -, *, /) doivent toujours être entourés d’espaces.
  Exemple correct : calc(100% - 50px)
  Exemple incorrect : calc(100%-50px)
• Combinaisons d’unités : Vous pouvez mélanger des unités (par exemple, px et %), mais elles doivent être compatibles avec la propriété utilisée.
• Compatibilité navigateur : calc() est largement supporté par tous les navigateurs modernes.

---

Conclusion

La fonction calc() est une solution puissante et flexible pour créer des mises en page dynamiques et adaptatives. Elle simplifie le calcul des dimensions directement dans le CSS, sans avoir besoin de JavaScript ou d’autres outils.