calc()

Die calc()-Funktion ermöglicht mathematische Berechnungen direkt im CSS.

calc() wird überall dort eingesetzt, wo CSS mit Längen-, Prozent- oder Zahlenwerten rechnet – bei vielen CSS-Properties wie width, margin, padding, gap, border-width oder font-size.

---

Syntax

element { width: calc(100% - 50px); }

Wichtig: Leerzeichen um die Operatoren (+, -, *, /) sind Pflicht!

---

Die vier Operatoren

1. Addition (+)

.element {
  width: calc(50% + 20px);
  padding: calc(1rem + 5px);
}

2. Subtraktion (-)

.element {
  width: calc(100% - 40px);
  height: calc(100vh - 60px);
}

3. Multiplikation (*)

.element {
  width: calc(100% * 0.5);  /* = 50% */
  font-size: calc(1rem * 1.5);
}

4. Division (/)

.element {
  width: calc(100% / 3);  /* = 33.333...% */
  padding: calc(20px / 2);
}

---

Einheiten kombinieren

Mit calc() lassen sich unterschiedliche Einheiten kombinieren und dynamisch aufeinander abstimmen.

Prozent + Pixel

/* Container: Volle Breite minus fixer Abstand */
.container {
  width: calc(100% - 40px);
  margin: 0 auto;
}

Viewport + Pixel

/* Volle Höhe minus Header */
                
.main { height: calc(100vh - 80px); }

rem + px

/* Schriftgrösse: Basis plus fixer Wert */
                    
h1 { font-size: calc(1rem + 10px); }

---

Beispiele

Hinweis: Bei Layout-Berechnungen mit Padding oder Border kann box-sizing: border-box; helfen, unerwartete Breiten zu vermeiden.

Spalten kalkulieren

.drei {
   display: flex;
    margin: 0 0 20px;
}
.drei div {
   width: calc(100% / 3);
   border: 1px solid indigo;
   background: plum;
   height: 100px;
}

---

Spalten kalkulieren und margin subtrahieren

.pad-box {
  display: flex;
  flex-flow: row wrap;
  margin: 0 0 20px;
}
.pad-box div{
  width: calc(100% / 4 - 10px);
  height: 100px;
  background: salmon;
  padding: 20px;
  margin: 0 10px 10px 0;
}

Shadows

.box {
  border-width: calc(2px + 0.1vw);
  box-shadow: calc(2px + 0.5vw) calc(2px + 0.5vw) 10px rgba(0,0,0,0.3);
}

---

calc() mit CSS Variables

Perfekte Kombination für wartbaren Code:

:root {
  --sidebar-width: 250px;
  --gap: 20px;
  --header-height: 80px;
}

.content {
  width: calc(100% - var(--sidebar-width) - var(--gap));
}

main {
  height: calc(100vh - var(--header-height));
}

---

Responsive Typo

Typografie ohne Media Queries ist skalierbar und einfach in der Anwendung.

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.

.text {
  font-size: calc(1rem + 0.5vw);
}

Mit calc() und Viewport-Einheiten lassen sich fliessende Schriftgrössen erstellen.

/* Wächst mit Viewport */
h1 {
  font-size: calc(1.5rem + 2vw);
}

/* Mit Minimum und Maximum */
h1 {
  font-size: clamp(1.5rem, calc(1rem + 2vw), 3rem);
}

---

calc() vs. clamp()

Oft werden calc() und clamp() verwechselt. Hier der Unterschied:

calc() – Berechnung

/* Berechnet einen Wert */
font-size: calc(1rem + 2vw);
/* Kann unbegrenzt wachsen */

clamp() – Begrenzte Berechnung

/* Min, Ideal, Max */
font-size: clamp(1rem, calc(1rem + 2vw), 3rem);
/* Wächst, aber nie kleiner als 1rem oder grösser als 3rem */

---

Performance

calc() ist performant! Der Browser berechnet den Wert einmal beim Rendern. Es gibt keinen Performance-Unterschied zu statischen Werten.

/* Beide gleich schnell */
width: 200px;
width: calc(100px + 100px);

Bei dynamischen Werten (mit CSS Variables) wird neu berechnet, wenn sich die Variable ändert – aber auch das ist sehr schnell.

---

Kurz gesagt

• calc() ermöglicht Berechnungen im CSS
• Vier Operatoren: +, -, *, /
• Leerzeichen um Operatoren sind Pflicht
• Perfekt zum Mixen verschiedener Einheiten
• Funktioniert mit CSS Variables
• Zu verschachtelte Berechnungen sind schwer wartbar
• Nicht übertreiben – zu komplexe calc() sind schwer zu debuggen
• Performance ist kein Problem

---