Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome 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 JaFirefox 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 ? Chrome Android Vollständige Unterstützung 28Edge Mobile Vollständige Unterstützung JaFirefox 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 21Safari 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
Gradient color stops supportChrome Vollständige Unterstützung 19Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 19IE Vollständige Unterstützung 9Opera ? Safari Vollständige Unterstützung 6WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 19Opera Android ? Safari iOS ? Samsung Internet Android ?
Nested calc() supportChrome Vollständige Unterstützung 51Edge ? Firefox Vollständige Unterstützung 48IE ? Opera ? Safari ? WebView Android ? Chrome Android Vollständige Unterstützung 51Edge Mobile ? Firefox Android Vollständige Unterstützung 48Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung 5.0
<number> value supportChrome ? Edge ? Firefox Vollständige Unterstützung 48IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 48Opera Android ? Safari iOS ? Samsung Internet Android ?
<color> value supportChrome ? Edge ? Firefox Vollständige Unterstützung 59IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 59Opera Android ? Safari iOS ? Samsung Internet Android ?
Media query value supportChrome Vollständige Unterstützung 66Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 59IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung 66Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 53Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

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: 
Mitwirkende an dieser Seite: SJW, giffeler, mrstork, prayash, teoli, hansspiess, dominikschreiber, fscholz
Zuletzt aktualisiert von: SJW,