Die mathematischen CSS-Funktionen für schrittweise Werte sind jetzt in Baseline 2024 verfügbar

Rachel Andrew

Alle gängigen Engines unterstützen jetzt die mathematischen CSS-Funktionen round(), mod() und rem().

Feierlichkeit: Diese Webfunktion ist jetzt in allen drei gängigen Browser-Engines verfügbar.

Alle Funktionen für Stufenwerte transformieren einen bestimmten Wert gemäß einem anderen Schrittwert.

Die round()-Funktion

Die Funktion round() verwendet einen zu rundenden Wert, ein Rundungsintervall und eine optionale Rundungsstrategie. Der Wert wird entsprechend der Rundungsstrategie auf das nächste ganzzahlige Vielfache des Rundungsintervalls gerundet.

Der zu gerundete Wert oder das gerundete Intervall sollte eine benutzerdefinierte CSS-Eigenschaft sein. Beide Werte dürfen zwar hartcodiert werden, aber es ist nicht möglich, eine Zahl zu runden, wenn Sie den Wert selbst berechnen könnten.

Der folgende CSS-Code rundet den Wert von --my-font-size auf das Intervall 1rem.

font-size: round(var(--my-font-size), 1rem);

Die Standardrundungsstrategie ist nearest. Das vorherige Beispiel mit der Rundungsstrategie sieht so aus:

font-size: round(nearest,var(--my-font-size), 1rem);

Die möglichen Werte für die Rundungsstrategie sind:

• up: Entspricht der JavaScript-Methode Math.ceil(). Rundet den Wert auf das nächste ganze Vielfache des Rundungsintervalls auf.
• down: Entspricht der JavaScript-Methode Math.floor(). Rundet den Wert auf das nächste ganze Vielfache des Rundungsintervalls ab.
• nearest (Standard): Entspricht JavaScript-Math.round(). Rundet den Wert auf das nächste ganze Vielfache des Rundungsintervalls auf oder ab.
• to-zero: Entspricht der JavaScript-Methode Math.trunc(). Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls näher an null.

Weitere Informationen zu round() finden Sie in The New CSS Math: round() von Dan Wilson.

Die Funktionen rem() und mod()

Die CSS-Funktionen rem() und mod() funktionieren ähnlich wie der Restoperator (%) in JavaScript. Sie nehmen zwei Werte an: Der erste (Dividende) wird durch den zweiten (Divisor) geteilt und der Rest wird zurückgegeben.

margin: rem(18px, 5px); /* returns 3px */

Der Unterschied zwischen den beiden Funktionen besteht darin, dass rem() immer das Vorzeichen des Dividends annimmt. Wenn der erste Wert also positiv ist, ist der zurückgegebene Wert positiv. Die Funktion mod() übernimmt das Vorzeichen des Divisors.

Hinweis: Die Einheiten der beiden Werte müssen nicht identisch sein. Die Werte müssen jedoch vom gleichen Typ sein, also eine Zahl, eine Dimension oder ein Prozentsatz. Der zurückgegebene Wert ist vom selben Typ wie der übergebene Wert.

Weitere Informationen zu rem() und mod() finden Sie in The New CSS Math: rem() and mod() von Dan Wilson.