CSS calc – Breite von Elementen berechnen

Rechnen mit CSS calc

calc berechnet width, height, margin und weitere Größen – einfacher als Javascript, denn ein Script müsste die Werte bei jedem Resize des Browserfensters neu berechnen. calc kann überall eingesetzt werden, wo ansonsten eine Längenangabe oder ein numerischer Wert stehen würde, sowohl für die Positionierung, für Farben, Breite und Höhe von Elementen und sogar für Zeitangaben in Animationen.

Gegenüber CSS Preprozessoren wie SASS kann CSS calc mit gemischten Maßeinheiten rechnen, z.B. 100% - 50px.

.right { 
   width: calc(100% - 150px);
}
.left { 
   width: 150px; 
}

Die + und - Operatoren der calc-Formel müssen immer von Weißraum (Blanks, Leerzeichen) umgeben sein: So würde z.B. ansonsten der Operand von calc(50% -8px) als Prozentanteil gefolgt von einer negativen Länge geparst und wäre kein korrekter Ausdruck. Hingegen ist der Operand von calc(50% - 8px) ein Prozentanteil gefolgt von einem Minuszeichen und einer Länge.

.header {
   width: calc(50% - 8px);
}

* und / Operatoren brauchen keinen Weißraum oder Blanks um sich hierum, aber Leerzeichen sind der Konsistenz zuliebe erlaubt und in diesem Sinne auch empfehlenswert.

Komplexe Berechnungen mit calc

.complex {
   width: calc(100% - 50%/3);
   padding: 5px calc(3% - 2px);
   margin-left: calc(10% + 10px);
   calc(2rem * 3rem) Falsch
   calc(2rem / blue) Quatsch
}

Browser-Unterstützung für CSS calc

Die Browser haben CSS calc schon in einem frühen Stadium in trauter Einigkeit unterstützt. So kommt es, dass selbst IE10 calc bereits unterstützte.

Da die Unterstützung so gut ist, kann Calc auch mal für die bessere Lesbarkeit des Stylesheets herhalten.

.col-1-2 {
   width: calc(100% / 2);
}
.col-1-3 {
   width: calc(100% / 3);
}
.col-2-3 {
   width: calc(100% * 2 / 3);
}

Elemente mit CSS calc zentrieren

Absolut positionierte Elemente werden normalerweise von ihren Ecken aus positioniert. Ohne calc brauchen wir dafür die Breite des umfassenden Elements, die aber bei responsiven Elementen variabel ist.

figure {
	position:relative; 
	max-width:720px; 
}
figcaption {
	position: absolute;
	max-width:300px;
	left: calc(50% - 150px);
	right: calc(50% - 150px);
	font-size: clamp(1.4rem, 3vw, 2rem);
}

Einfache font-size: clamp(1.4rem, 3vw, 2rem) beschränkt die Schriftgröße auf einen Wert zwischen Minimum und Maximum bei einem bevorzugten Wert.

CSS calc mit CSS Variablen

calc operiert nicht nur auf Prozent- bzw. Pixel- oder EMS-Angaben, sondern auch auf Zeiteinheiten. In der Slideshow oben synchronisiert eine Zeitgabe als Variable die Bewegung der Slideshow und des Fortschrittbalkens.

:root {
  --time: 6s;
}

figure.slider {
  …
  animation-duration: calc(var(--time) * 4);
  animation-name: shifting;
  animation-iteration-count: infinite;
}

.progress-bar {
  …
  animation-duration: var(--time);
  animation-name: fullexpand;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

Quelle: Using CSS variables inside calc() auf Codepen.