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

Rachel Andrew

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

Die abgestuften Wertfunktionen transformieren einen gegebenen Wert alle gemäß einem anderen step value:

Die round()-Funktion

Für die round()-Funktion wird ein Wert zum Runden angenommen. ein Rundungsintervall und eine optionale Rundungsstrategie. Der Wert wird gemäß der Rundungsstrategie gerundet, auf das nächste ganzzahlige Vielfache des Rundungsintervalls.

Entweder der zu gerundete Wert oder das gerundete Intervall sollte ein CSS-Code sein. benutzerdefinierte Eigenschaft erstellen. Eine Hartcodierung beider Werte ist zwar zulässig, runden Sie eine Zahl ab, wenn Sie den Wert selbst berechnen könnten.

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

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

Die standardmäßige Rundungsstrategie ist nearest. Das vorherige Beispiel mit den Die Rundungsstrategie lautet wie folgt:

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

Für die Rundungsstrategie sind folgende Werte möglich:

  • up: Entspricht der JavaScript-Methode Math.ceil(). Rundet den Wert auf auf das nächste ganze Vielfache des Rundungsintervalls.
  • down: Entspricht der JavaScript-Methode Math.floor(). Rundet den Wert bis zum nächsten ganzen Vielfachen des Rundungsintervalls.
  • nearest (Standard): Entspricht JavaScript Math.round(). Rundet die Wert auf oder ab, auf das nächste ganze Vielfache des Rundungsintervalls.
  • to-zero: Entspricht der JavaScript-Methode Math.trunc(). Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls, das näher bei Null liegt.

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 die JavaScript-Funktionen Restoperator (%). Sie nehmen zwei Werte, wobei der erste (Dividende) durch den zweiten (Divisor) geteilt wird. 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 der Dividende. Wenn also der erste Wert positiv ist, wird der zurückgegebene Wert positiv sein wird. Die Funktion mod() ermittelt das Vorzeichen des Divisors.

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