CSS/Funktionen/calc()

Browserunterstützung
caniuse.com

Die CSS-Funktion calc() ermöglicht es Berechnungen durchzuführen, deren Ergebnis dann als CSS-Wert einer Eigenschaft zugewiesen wird. calc() kann überall dort verwendet werden, wo eine CSS Eigenschaft eine Integer- oder Fließkommazahl, eine Längenangabe, einen Prozentwert, ein Winkelmaß, eine Zeitangabe oder eine Frequenzangabe erwartet (Frequenzangaben sind in CSS vorgesehen, aber derzeit noch unbenutzt).

anwendbar auf

Das Ergebnis von calc() hat den gleichen Typ wie die genutzten Operanden. Sie können innerhalb von calc() also nur Werte verwenden, die für die jeweilige Eigenschaft zulässig sind.

• Bei Längenangaben können Werte mit Einheiten und Prozentangaben beliebig kombiniert werden.
• Bei Multiplikationen muss ein Operand eine Zahl sein.
• Bei Divisionen muss der Nenner eine Zahl sein.

Parameter

Einziger Parameter ist eine mathematischer Ausdruck. Darin sind vor allem die Operatoren Plus (+), Minus (-), Mal (*), Geteilt (/) sowie runde Klammern zulässig.

Beispiel

min-height: calc(100px + 5em);

width: calc(100% - 2 * 3px); width: calc(100% / 3);

min-width: calc((80% + 4px) / 2 ) );

 

Beachten Sie: Plus- und Minuszeichen müssen in Leerstellen eingeschlossen sein, wenn sie als Operator für Addition oder Subtraktion verwendet werden sollen. Damit sollen sie von einem Vorzeichen einer Zahlenangabe unterschieden werden. Wir empfehlen, dass Sie jeden Operator in Leerstellen einschließen. Erfolgt eine Division durch null oder ergibt die Berechnung ein Maß, das die Eigenschaft nicht erlaubt (beispielsweise negative Maße für width), so wird die Eigenschaft ignoriert.

Siehe auch

Beachten Sie: Die Browser rechnen intern mit Integer-Werten anstatt „echten“ Pixeln (, die es im Gewirr zwischen physikalischen und logischen Pixeln gar nicht gibt). Deshalb kann es zu geringfügigen Rundungsfehlern kommen.

• Self-Forum: calc() rechnet falsch? vom 26.09.2017
• Programmiertechnik/Rechnerarithmetik

Weblinks

• W3C: Mathematical Expressions: calc()
• MDN: calc()
• Browser-Support: caniuse.com