CSS Funktionen

calc() ist die Basis-Funktion für Berechnungen. Du kannst addieren, subtrahieren, multiplizieren und dividieren, und das Beste: Du kannst verschiedene Einheiten mischen.

.sidebar {
  width: 200px;
}

.content {
  width: calc(100% - 200px - 16px);
}

<div class="container">
<div class="sidebar">Sidebar: 200px</div>
<div class="content">Content: calc(100% - 200px - 16px)</div>
</div>

Die Content-Spalte nimmt die volle Breite, minus die feste Sidebar-Breite und den Gap. Das wäre mit einer einzigen Einheit nicht möglich.

Rechenregeln

calc() unterstützt vier Operatoren:

.add { width: calc(100px + 50px); }
.sub { width: calc(100% - 40px); }
.mul { width: calc(20px * 3); }
.div { width: calc(100% / 3); }

<div class="box add">+ Addition: calc(100px + 50px) = 150px</div>
<div class="box sub">- Subtraktion: calc(100% - 40px)</div>
<div class="box mul">× Multiplikation: calc(20px * 3) = 60px</div>
<div class="box div">÷ Division: calc(100% / 3) ≈ 33.3%</div>

Wichtig: Bei + und - brauchst du Leerzeichen um den Operator. calc(100%-40px) funktioniert nicht, calc(100% - 40px) schon. Bei * und / sind Leerzeichen optional, aber empfohlen.

calc() mit Custom Properties

calc() und Custom Properties ergänzen sich perfekt:

:root {
  --sidebar-breite: 200px;
  --abstand: 16px;
}

.main {
  width: calc(100% - var(--sidebar-breite) - var(--abstand));
}

<div class="layout">
<div class="side">Sidebar</div>
<div class="main">Content: calc(100% - var(--sidebar-breite) - var(--abstand))</div>
</div>

Änderst du --sidebar-breite, passt sich die Content-Breite automatisch an. Das ist deutlich wartbarer als feste Werte in der calc()-Formel.

min() gibt den kleinsten Wert zurück, max() den größten. Beide akzeptieren beliebig viele Werte, getrennt durch Kommas.

/* Nimmt den kleineren Wert */
.box-min {
  width: min(100%, 400px);
  /* Wie max-width: 400px, aber flexibler */
}

/* Nimmt den größeren Wert */
.box-max {
  width: max(50%, 200px);
  /* Wie min-width: 200px, aber flexibler */
}

<div class="box-min">min(100%, 400px): nie breiter als 400px</div>
<div class="box-max">max(50%, 200px): mindestens 200px breit</div>

min(100%, 400px) verhält sich wie eine flexible Breite mit eingebautem Maximum: Auf schmalen Bildschirmen ist 100% kleiner und wird genommen, auf breiten Bildschirmen greift die 400px-Grenze. Das ersetzt in vielen Fällen max-width.

clamp() kombiniert min() und max() in einer einzigen Funktion. Sie akzeptiert drei Werte: Minimum, bevorzugter Wert und Maximum.

.fluid-text {
  font-size: clamp(16px, 4vw, 32px);
  /*              min   ideal  max   */
}

<div class="fluid-text">Diese Schrift skaliert mit dem Viewport: mindestens 16px, maximal 32px, dazwischen 4vw.</div>

Die Schriftgröße ist mindestens 16px und maximal 32px. Dazwischen skaliert sie mit 4vw (4% der Viewport-Breite). Auf einem 1000px breiten Bildschirm wären das 40px, aber clamp begrenzt auf 32px.

clamp() für flexible Breiten

.container {
  width: clamp(300px, 80%, 900px);
  margin: 0 auto;
}

/* Gleichbedeutend mit: */
.container-alternative {
  width: 80%;
  min-width: 300px;
  max-width: 900px;
}

<div class="container">Container: clamp(300px, 80%, 900px)</div>

clamp(300px, 80%, 900px) ist kürzer als die Alternative mit drei separaten Eigenschaften und macht in einer Zeile klar: Der Container ist 80% breit, aber nie schmaler als 300px und nie breiter als 900px.

url() ist keine Rechen-Funktion, aber eine der am häufigsten verwendeten CSS-Funktionen. Sie referenziert externe Ressourcen wie Bilder.

.element {
  background-image: url("bild.jpg");
}

/* Auch für andere Ressourcen: */
.cursor {
  cursor: url("zeiger.png"), auto;
}

<div class="mit-hintergrund">Ein Element mit Hintergrundbild (SVG-Muster).</div>

url() funktioniert überall dort, wo CSS eine externe Ressource erwartet: background-image, list-style-image, cursor, @font-face und mehr.

Die wahre Stärke der CSS-Funktionen zeigt sich, wenn du sie kombinierst:

:root {
  --base-size: 1rem;
  --scale: 1.25;
}

/* calc() in clamp() mit var() */
.heading {
  font-size: clamp(
    1rem,
    calc(var(--base-size) * var(--scale) + 1vw),
    2.5rem
  );
}

/* calc() in min() */
.section {
  padding: min(calc(2 * var(--base-size)), 5vw);
}

<div class="combo-text">Fluid Heading: clamp + calc + var</div>
<div class="combo-spacing">Padding: min(calc(2 * var(--base-size)), 5vw)</div>

var() in calc() in clamp(): Die Schriftgröße basiert auf Custom Properties, wird dynamisch berechnet und hat feste Grenzen. Das klingt komplex, aber jede Funktion hat eine klare Aufgabe: var() liefert den Wert, calc() rechnet, clamp() begrenzt.

Du kannst jetzt direkt in CSS rechnen, Werte begrenzen und Funktionen kombinieren. Im nächsten Artikel geht es um Responsives Design: Wie du mit Media Queries, Mobile-First und den Einheiten und Funktionen aus den letzten Artikeln Layouts baust, die auf jedem Bildschirm funktionieren.