CSS Funktionen

Zuletzt aktualisiert am 10. Februar 2026

Du hast im letzten Artikel gelernt, wie Custom Properties Werte zentral speichern. Aber was, wenn du Werte nicht nur speichern, sondern berechnen willst? Zum Beispiel “volle Breite minus 200 Pixel für die Sidebar”? Genau dafür gibt es CSS-Funktionen. Sie erlauben dir, direkt in CSS zu rechnen, Grenzen zu setzen und Werte dynamisch anzupassen.

calc(): Rechenoperationen in CSS

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() und max()

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(): Wert mit Ober- und Untergrenze

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(): Ressourcen referenzieren

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.

Funktionen kombinieren

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.

Häufige Fehler

• Fehlende Leerzeichen in calc(): calc(100%-20px) ist ungültig. Schreibe calc(100% - 20px) mit Leerzeichen um + und -.
• Division durch eine Einheit: calc(100px / 2px) funktioniert nicht. Bei Division muss der Divisor eine reine Zahl sein: calc(100px / 2).
• clamp() mit vertauschten Werten: clamp(max, ideal, min) ist falsch. Die Reihenfolge ist immer Minimum, bevorzugter Wert, Maximum.
• calc() für einfache Werte verwenden: calc(20px) ist sinnlos und weniger lesbar als 20px. Nutze calc() nur, wenn du tatsächlich rechnest oder Einheiten mischst.
• min() und max() verwechseln: min() setzt eine Obergrenze (wird nie größer als der kleinste Wert). max() setzt eine Untergrenze (wird nie kleiner als der größte Wert). Die Namen sind aus Sicht des Ergebnisses zu verstehen, nicht aus Sicht der Grenze.

Zusammenfassung

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.