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

Veröffentlicht: 14. Mai 2024

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

Mit den Funktionen für abgestufte Werte wird ein bestimmter Wert anhand eines anderen Abstufungswerts transformiert.

Die round()-Funktion

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

Entweder der zu runde Wert oder das gerundete Intervall muss eine benutzerdefinierte CSS-Eigenschaft sein. Es ist zwar zulässig, beide Werte hartzucodieren, aber es macht wenig Sinn, eine Zahl abzurunden, wenn Sie den Wert selbst berechnen können.

Im folgenden CSS-Code wird der Wert von --my-font-size auf das Intervall 1rem gerundet.

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

Die Standardrundung 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(). Der Wert wird auf das nächste ganzzahlige Vielfache des Rundungsintervalls aufgerundet.
  • down: Entspricht der JavaScript-Methode Math.floor(). Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls ab.
  • nearest (Standardeinstellung): Entspricht JavaScript Math.round(). Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls auf oder ab.
  • to-zero: Entspricht der JavaScript-Methode Math.trunc(). Der Wert wird auf das nächste ganzzahlige Vielfache des Rundungsintervalls aufgerundet, das näher an Null liegt.

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

Die Funktionen rem() und mod()

Die CSS-Funktionen rem() und mod() funktionieren ähnlich wie der JavaScript-Restoperator (%%). Sie nehmen zwei Werte an, der erste (der Dividend) wird durch den zweiten (den 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 Dividenden nimmt. Wenn der erste Wert also positiv ist, ist auch der zurückgegebene Wert positiv. Die Funktion mod() berücksichtigt das Vorzeichen des Nenners.

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