CSS calc – Breite von Elementen berechnen

Breite und Höhe mit CSS calc und Variablen rechnen

CSS calc führt Berechnungen auf gemischten Werten aus, für die wir ansonsten Javascript oder einen CSS Preprozessor einsetzen müssten: z.B. den verbleibenden Platz, wenn wir eine feste Breite von einer relativen Breite abziehen.
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.

calc berechnet width, height, margin und weitere Größen – einfacher als Javascript, denn ein Script müsste die Werte bei jedem Resize des Browserfensters permanent neu berechnen.

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 müssen immer von Weißraum (Blanks, Leerzeichen) umgeben sein: So wird z.B. der Operand von calc(50% -8px) als Prozentanteil gefolgt von einer negativen Länge geparst – ein invalider 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.

width: 12em;
      Mitte des umfassenden Elements
                       +
                       |
left: calc(50% - 8em);
                             |
            halbe Breite  ---+
            von figcaption

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