calc - CSS

Übersicht

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

calc() kann überall verwendet werden, wo <length>, <frequency>, <angle>, <time>, <number> und <integer> eingesetzt werden dürfen.

Syntax

calc( <calc-sum> )wobei 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
wobei 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
wobei 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

/* Eigenschaft: calc(Ausdruck) */
width: calc(100% - 80px);

Werte

Ausdruck: Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.

Ausdrücke

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+: Addition.
-: Subtraktion.
*: Multiplikation (muss mindestens eine <number> enthalten).
/: Division (Divisor muss eine <number> sein).

Bei den Operanden darf es sich um jeden Wert vom Typ <length> handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
Das Setzen von Klammern ist ebenfalls möglich.

calc()-Funktionen können ineinander verschachtelt werden.

Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.

Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.

Beispiele

Relative Größe eines Objekts mit einer absoluten Positionierung

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

.banner {
  position: absolute;
  left: 40px;
  width: 90%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);
}

<div class="banner">This is a banner!</div>

Spezifikation

Spezifikation	Status	Anmerkung
CSS Values and Units Module Level 3 Die Definition von 'calc()' in dieser Spezifikation.	Anwärter Empfehlung

Browserkompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`<calc()>`	Chrome Vollständige Unterstützung 26 Vollständige Unterstützung 26 Vollständige Unterstützung 19 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 16 Hinweise Vollständige Unterstützung 16 Hinweise Hinweise Before Firefox 57 `calc(123)` is not parsed successfully. Hinweise Firefox 57 increased the number of places `calc()` could substitute another value. See bug 1350857. Keine Unterstützung 4 — 53 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 15	Safari Vollständige Unterstützung 7 Vollständige Unterstützung 7 Vollständige Unterstützung 6 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung ≤37 Vollständige Unterstützung ≤37 Vollständige Unterstützung ≤37 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 28	Firefox Android Vollständige Unterstützung 16 Hinweise Vollständige Unterstützung 16 Hinweise Hinweise Before Firefox 57 `calc(123)` is not parsed successfully. Hinweise Firefox 57 increased the number of places `calc()` could substitute another value. See bug 1350857. Keine Unterstützung 4 — 53 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 14	Safari iOS Vollständige Unterstützung 7 Vollständige Unterstützung 7 Vollständige Unterstützung 6 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 1.5
`<color>` value support	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 59	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Vollständige Unterstützung 6	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 59	Opera Android Keine Unterstützung Nein	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Keine Unterstützung Nein
Gradient color stops support	Chrome Vollständige Unterstützung 19	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 19	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 15	Safari Vollständige Unterstützung 6	WebView Android Vollständige Unterstützung 37	Chrome Android Vollständige Unterstützung 28	Firefox Android Vollständige Unterstützung 19	Opera Android Vollständige Unterstützung 15	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Vollständige Unterstützung 1.5
Nested `calc()` support	Chrome Vollständige Unterstützung 51	Edge Vollständige Unterstützung 16	Firefox Vollständige Unterstützung 48	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 38	Safari Vollständige Unterstützung 11	WebView Android Vollständige Unterstützung 51	Chrome Android Vollständige Unterstützung 51	Firefox Android Vollständige Unterstützung 48	Opera Android Vollständige Unterstützung 41	Safari iOS Vollständige Unterstützung 11	Samsung Internet Android Vollständige Unterstützung 5.0
`<number>` value support	Chrome Vollständige Unterstützung 31	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 48	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 18	Safari Vollständige Unterstützung 6	WebView Android Vollständige Unterstützung 4.4.3	Chrome Android Vollständige Unterstützung 31	Firefox Android Vollständige Unterstützung 48	Opera Android Vollständige Unterstützung 18	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Vollständige Unterstützung 2.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog