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-MethodeMath.ceil()
. Der Wert wird auf das nächste ganzzahlige Vielfache des Rundungsintervalls aufgerundet.down
: Entspricht der JavaScript-MethodeMath.floor()
. Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls ab.nearest
(Standardeinstellung): Entspricht JavaScriptMath.round()
. Rundet den Wert auf das nächste ganzzahlige Vielfache des Rundungsintervalls auf oder ab.to-zero
: Entspricht der JavaScript-MethodeMath.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.