Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Ü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 einen Leerschlag 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 Gesammtlä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 Gesammtbreite 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

Funktion Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 19 (WebKit 536.3) -webkit
26
4.0 (2) -moz
16 (16)
9 - 6 -webkit (buggy)
In Farbverläufen 19 (WebKit 536.3) -webkit
27 (maybe 26)
19 (19) 9 - 6 -webkit (buggy)
Funktion Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? 4.0 (2) -moz
16.0 (16)
? ? ?
In Farbverläufen ? 19.0 (19) ? ? ?

Siehe auch

 

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: mrstork, prayash, teoli, hansspiess, dominikschreiber, fscholz, SJW
 Zuletzt aktualisiert von: mrstork,