Fonction calc()

6.1 Principales fonctionnalités de la fonction calc()

La fonction calc() permet d'effectuer des opérations mathématiques en CSS, ce qui permet de créer des styles plus flexibles et adaptatifs. Cette fonction est particulièrement utile pour combiner différentes unités de mesure et calculer dynamiquement des valeurs, comme les tailles, marges, bordures et autres propriétés.

La fonction calc() permet d'effectuer quatre opérations mathématiques de base : addition, soustraction, multiplication et division. Ces opérations peuvent être utilisées pour combiner différentes unités de mesure (pixels, pourcentages, em, rem, etc.), ce qui simplifie la création de styles adaptatifs et dynamiques.

Syntaxe :

    
      selecteur {
        propriété: calc(expression);
      }
    
  

Exemples d'opérations

• Addition: calc(100% + 20px)
• Soustraction: calc(50% - 10px)
• Multiplication: calc(10px * 2)
• Division: calc(100px / 2)

Exemple :

    
      <div>
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      div {
        width: calc(100% - 50px);
        margin: calc(1em + 10px);
        background: lightblue;
      }
    
  

Dans cet exemple :

• La largeur de l'élément est calculée comme 100% moins 50px
• La marge est calculée comme la somme de 1em et 10px

6.2 Exemples d'utilisation de la fonction calc()

1. Addition et soustraction

La fonction calc() est souvent utilisée pour additionner et soustraire des valeurs, ce qui permet de mieux contrôler les tailles et marges des éléments.

Exemple 1 : Addition de pourcentages et pixels

Dans cet exemple, la largeur du conteneur est calculée comme 100% de la largeur de l'élément parent moins 40 pixels. Cela permet de prendre en compte les marges et d'autres éléments à l'intérieur du conteneur :

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        width: calc(100% - 40px);
        margin: 20px;
        background: lightgreen;
      }
    
  

Exemple 2 : Soustraction d'une valeur fixe

Dans cet exemple, la largeur de la barre latérale est calculée comme 100% de la largeur de l'élément parent moins 250 pixels, ce qui permet de laisser de l'espace pour le contenu principal :

    
      <div class="sidebar">
        <ul>
          <li><a href="#"></a>Article 1</li>
          <li><a href="#"></a>Article 2</li>
          <li><a href="#"></a>Article 3</li>
        </ul>
      </div>
    
  

    
      .sidebar {
        width: calc(100% - 250px);
        background: tomato;
      }
    
  

2. Multiplication et division

La fonction calc() permet également de faire de la multiplication et division, ce qui peut être utile pour créer des tailles et marges proportionnelles.

Exemple 3 : Multiplication

Dans cet exemple, la hauteur de l'élément est calculée comme 20 pixels multipliés par 3, ce qui donne 60 pixels :

    
      <div class="element">Element</div>
    
  

    
      .element {
        height: calc(20px * 3);
        background: lightpink;
      }
    
  

Exemple 4 : Division

Dans cet exemple, la largeur du bloc est calculée comme un tiers de la largeur de l'élément parent, ce qui permet de créer trois colonnes égales :

    
      <div class="box">
        Box
      </div>
    
  

    
      .box {
        width: calc(100% / 3);
        background: yellow;
      }
    
  

6.3 Combinaison de différentes unités de mesure

Une des principales possibilités de la fonction calc() est de combiner différentes unités de mesure, ce qui permet de créer des styles adaptatifs et flexibles.

Exemple 5 : Combinaison de pourcentages et pixels

Dans cet exemple, la hauteur de l'en-tête est calculée comme 100% de la hauteur de la fenêtre de visualisation (viewport height) moins 50 pixels, ce qui permet de prendre en compte une marge fixe.

    
      <header class="header">
        <nav>
          <ul>
            <li>Accueil</li>
            <li>À propos</li>
            <li>Contacts</li>
          </ul>
        </nav>
      </header>
    
  

    
      .header {
        height: calc(100vh - 100px);

        background: lightgreen;
      }

      nav ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }
    
  

Calcul dynamique des tailles

La fonction calc() est utile pour créer des tailles dynamiquement calculées des éléments, ce qui rend le design plus adaptatif et flexible.

Exemple 6 : Calcul dynamique de largeur

Dans cet exemple, la largeur du contenu est calculée comme 100% de la largeur de l'élément parent moins la double marge de 20 pixels de chaque côté :

    
      <div class="content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .content {
        width: calc(100% - 2 * 20px);
        background: lightgreen;
      }
    
  

6.4 Utilisation de calc() dans les médias-queries

La fonction calc() peut être utilisée dans les médias-queries pour créer des styles adaptatifs.

Exemple 7 : Marges adaptatives dans les médias-queries

Dans cet exemple, les marges du conteneur augmentent en fonction de la largeur de la fenêtre de visualisation lorsque la largeur minimale de 600 pixels est atteinte :

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        padding: 10px;
        background: tomato;
      }

      @media (min-width: 600px) {
        .container {
          padding: calc(10px + 2vw);
        }
      }
    
  

Exemple 8 : Tailles adaptatives dans les médias-queries

Dans cet exemple, les marges du conteneur sont réduites de moitié sur les écrans d'une largeur allant jusqu'à 600 pixels, ce qui améliore l'adaptabilité du design :

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      :root {
        --main-padding: 20px;
      }

      .container {
        padding: var(--main-padding);
        background: yellow;
      }

      @media (max-width: 600px) {
        .container {
          padding: calc(var(--main-padding) / 2);
        }
      }
    
  

6.5 Avantages et inconvénients

Avantages de l'utilisation de la fonction calc() :

1. Flexibilité. La fonction calc() permet de créer des designs plus flexibles et adaptatifs, en combinant différentes unités de mesure et en effectuant des opérations mathématiques.

2. Gestion dynamique des styles. Avec calc(), on peut changer dynamiquement les tailles et marges des éléments, rendant le design plus réactif et adaptatif.

3. Simplification des calculs complexes. La fonction calc() simplifie l'exécution des calculs complexes directement en CSS, évitant ainsi la nécessité d'utiliser JavaScript pour des opérations mathématiques simples.

Limitations et particularités de la fonction calc() :

1. Espaces autour des opérateurs. Dans les expressions calc(), des espaces sont obligatoires autour des opérateurs. Par exemple, calc(100% - 50px) est correct, alors que calc(100%-50px) causera une erreur.

2. Compatibilité avec les navigateurs. La fonction calc() est supportée par la plupart des navigateurs modernes, mais pour les versions obsolètes, une vérification de compatibilité pourrait être nécessaire.

3. Performance. L'utilisation de la fonction calc() peut légèrement augmenter le temps de rendu de la page, surtout dans le cas de calculs complexes ou de changements fréquents de valeurs.