Übersicht

Die CSS Funktion calc() kann anstelle der folgenden Werte verwendet werden: <length>, <frequency>, <angle>, <time>, <number> und <integer>. Mit der CSS Funktion calc() lassen sich mehrere Werte miteinander verrechnen.

Es ist auch möglich,  calc() Funktionen ineinander zu verschachteln.

Syntax

calc(Ausdruck)

Werte

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

Ausdrücke

FIXME: mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

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

Es können beliebig viele Operatoren aneinander gekettet werden. Es können auch verschiedene Einheiten miteinander verrechnet werden und Klammern gesetzt werden.

Hinweis: Der Divisor darf nicht Null sein.
Hinweis: Die + und - Zeichen erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Bei einer Multiplikation oder Division spielt dies keine Rolle.

Beispiele

Relative Grösse eines Objekts mit einer absoluten Positionierung

Mit calc() ist es kein Problem mehr, die dynamische Grösse eines Objekts zu bestimmen, dessen Position absolut ist. In diesem Beispiel wurde ein Banner erstellt, dass auf beiden Seiten einen Abstand von 40 Pixeln zum Rand aufweisen soll.

Links ist die Position mit left: 40px bereits definiert. Jetzt wird mit calc(100% - 80px) von der Gesamtlänge 80 Pixel Abgezogen, 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);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
<div class="banner">This is a banner!</div>

Relative Grösse eines Objekts mit absoluten Abständen

Ein weiterer Anwendungsbereich ist die Grössenanpassung von Objekten, welche einen fixen Abstand definiert haben:

input {
  padding: 2px;
  display: block;
  width: 98%;               /* fallback for browsers without support for calc() */
  width: calc(100% - 1em);
}

#formbox {
  width: 130px;             /* fallback for browsers without support for calc() */
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Der Container indem das Eingabefeld liegt soll 1/6 der Gesamtbreite einnehmen. Für die Grösse des Eingabefelds wählen wir einen Abstand zum Container von 1em.

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

Spezifikation

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

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung 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 12Firefox Vollständige Unterstützung 16
Hinweise
Vollständige Unterstützung 16
Hinweise
Hinweise Before Firefox 57 calc(1*2*3) 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 9Opera Vollständige Unterstützung 15Safari 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 28Firefox Android Vollständige Unterstützung 16
Hinweise
Vollständige Unterstützung 16
Hinweise
Hinweise Before Firefox 57 calc(1*2*3) 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 14Safari 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 Ja
<color> value supportChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 59IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Vollständige Unterstützung 6WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 59Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 6Samsung Internet Android Keine Unterstützung Nein
Gradient color stops supportChrome Vollständige Unterstützung 19Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 19IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 28Firefox Android Vollständige Unterstützung 19Opera Android ? Safari iOS Vollständige Unterstützung 6Samsung Internet Android ?
Nested calc() supportChrome Vollständige Unterstützung 51Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 48IE Keine Unterstützung NeinOpera Vollständige Unterstützung 38Safari Vollständige Unterstützung 11WebView Android Vollständige Unterstützung 51Chrome Android Vollständige Unterstützung 51Firefox Android Vollständige Unterstützung 48Opera Android ? Safari iOS Vollständige Unterstützung 11Samsung Internet Android Vollständige Unterstützung 5.0
<number> value supportChrome Vollständige Unterstützung 31Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 48IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 18Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung 4.4.3Chrome Android Vollständige Unterstützung 31Firefox Android Vollständige Unterstützung 48Opera Android Vollständige Unterstützung 18Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Zuletzt aktualisiert von: mdnwebdocs-bot,