Funktion calc()

6.1 Grundlegende Funktionen von calc()

Die Funktion calc() ermöglicht mathematische Operationen in CSS, wodurch flexiblere und anpassbare Styles erstellt werden können. Diese Funktion ist besonders hilfreich bei der Kombination verschiedener Maßeinheiten und dynamischen Berechnung von Werten wie Größen, Abständen, Grenzen und anderen Eigenschaften.

Mit der Funktion calc() können vier grundlegende mathematische Operationen durchgeführt werden: Addition, Subtraktion, Multiplikation und Division. Diese Operationen ermöglichen es, verschiedene Maßeinheiten (Pixel, Prozent, em, rem usw.) zu kombinieren, was die Erstellung von anpassbaren und dynamischen Stilen erleichtert.

Syntax:

    
      selektor {
        eigenschaft: calc(ausdruck);
      }
    
  

Beispiele für Operationen

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

Beispiel:

    
      <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;
      }
    
  

In diesem Beispiel:

• Die Breite des Elements wird als 100% minus 50px berechnet
• Der Abstand wird als Summe von 1em und 10px berechnet

6.2 Anwendungsbeispiele der Funktion calc()

1. Addition und Subtraktion

Die Funktion calc() wird häufig zur Addition und Subtraktion von Werten verwendet, um die Größen und Abstände von Elementen präziser zu kontrollieren.

Beispiel 1: Addition von Prozenten und Pixeln

In diesem Beispiel wird die Breite des Containers als 100% der Breite des übergeordneten Elements minus 40 Pixel berechnet. Dies ermöglicht die Berücksichtigung von Abständen und anderen Elementen innerhalb des Containers:

    
      <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;
      }
    
  

Beispiel 2: Subtraktion eines festen Wertes

In diesem Beispiel wird die Breite der Seitenleiste als 100% der Breite des übergeordneten Elements minus 250 Pixel berechnet, um Platz für den Hauptinhalt zu lassen:

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

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

2. Multiplikation und Division

Die Funktion calc() ermöglicht auch die Multiplikation und Division, was bei der Erstellung proportionaler Größen und Abstände nützlich sein kann.

Beispiel 3: Multiplikation

In diesem Beispiel wird die Höhe des Elements als 20 Pixel mal 3 berechnet, was 60 Pixel ergibt:

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

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

Beispiel 4: Division

In diesem Beispiel wird die Breite des Blocks als ein Drittel der Breite des übergeordneten Elements berechnet, um drei gleich große Spalten zu erstellen:

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

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

6.3 Kombination von verschiedenen Maßeinheiten

Eine der Schlüsselmöglichkeiten der Funktion calc() ist die Kombination von verschiedenen Maßeinheiten, wodurch anpassbare und flexible Styles erstellt werden können.

Beispiel 5: Kombination von Prozenten und Pixeln

In diesem Beispiel wird die Höhe des Headers als 100% der Höhe des Viewports minus 50 Pixel berechnet, um einen festen Abstand zu berücksichtigen.

    
      <header class="header">
        <nav>
          <ul>
            <li>Startseite</li>
            <li>Über Uns</li>
            <li>Kontakte</li>
          </ul>
        </nav>
      </header>
    
  

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

        background: lightgreen;
      }

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

Dynamische Berechnung von Größen

Die Funktion calc() ist nützlich für die Erstellung dynamisch berechneter Elementgrößen, was das Design anpassungsfähiger und flexibler macht.

Beispiel 6: Dynamische Berechnung der Breite

In diesem Beispiel wird die Breite des Inhalts als 100% der Breite des übergeordneten Elements minus doppeltem Abstand von je 20 Pixeln berechnet:

    
      <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 Verwendung von calc() in Media-Queries

Die Funktion calc() kann innerhalb von Media-Queries verwendet werden, um anpassbare Stile zu erstellen.

Beispiel 7: Anpassbare Abstände in Media-Queries

In diesem Beispiel werden die Abstände des Containers unter Berücksichtigung der Breite des Viewports erhöht, wenn eine Mindestbreite von 600 Pixeln erreicht wird:

    
      <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);
        }
      }
    
  

Beispiel 8: Anpassbare Größen in Media-Queries

In diesem Beispiel werden die Abstände des Containers auf Bildschirmen mit einer Breite von bis zu 600 Pixeln um die Hälfte reduziert, was die Anpassungsfähigkeit des Designs verbessert:

    
      <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 Vorteile und Nachteile

Vorteile der Verwendung der Funktion calc():

1. Flexibilität. Die Funktion calc() ermöglicht es, flexiblere und anpassbare Designs zu erstellen, indem verschiedene Maßeinheiten kombiniert und mathematische Operationen durchgeführt werden.

2. Dynamische Steuerung der Stile. Mit calc() können die Größen und Abstände von Elementen dynamisch geändert werden, was das Design reaktiver und anpassbarer macht.

3. Vereinfachung komplexer Berechnungen. Die Funktion calc() vereinfacht die Durchführung komplexer Berechnungen direkt in CSS, sodass die Notwendigkeit von JavaScript für einfache mathematische Operationen entfällt.

Einschränkungen und Merkmale der Funktion calc():

1. Leerzeichen um Operatoren. In calc()-Ausdrücken müssen Leerzeichen um die Operatoren vorhanden sein. Zum Beispiel ist calc(100% - 50px) richtig, während calc(100%-50px) zu einem Fehler führt.

2. Browser-Kompatibilität. Die Funktion calc() wird von den meisten modernen Browsern unterstützt, erfordert jedoch möglicherweise eine Überprüfung der Kompatibilität für ältere Versionen.

3. Performance. Die Verwendung der Funktion calc() kann die Rendering-Zeit der Seite geringfügig verlängern, insbesondere bei komplexen Berechnungen oder häufigen Wertänderungen.