Funkcje matematyczne z danymi matematycznymi krokowymi CSS są teraz dostępne w programie Baseline w 2024 r.

Rachel Andrew

Wszystkie główne wyszukiwarki obsługują teraz schodkowe funkcje matematyczne CSS – round(), mod() i rem().

Wszystkie funkcje wartości krokowych przekształcają daną wartość zgodnie z inną wartością kroku.

Funkcja round()

Funkcja round() przyjmuje do zaokrąglenia wartość, odstęp zaokrąglania i opcjonalną strategię zaokrąglania. Wartość jest zaokrąglana zgodnie ze strategią zaokrąglania do najbliższej całkowitej wielokrotności przedziału czasowego zaokrąglania.

Wartość do zaokrąglenia lub przedział czasu zaokrąglonego powinien być właściwością niestandardową CSS. Chociaż obie wartości można zakodować na stałe, niewiele punktów można zaokrąglić, jeśli możesz je obliczyć samodzielnie.

Ten kod CSS zaokrągla wartość --my-font-size do przedziału 1rem.

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

Domyślna strategia zaokrąglania to nearest. Poprzedni przykład ze strategią zaokrąglania:

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

Możliwe wartości strategii zaokrąglania:

  • up: odpowiednik metody JavaScript Math.ceil(). Zaokrągla wartość do najbliższej całkowitej wielokrotności przedziału zaokrąglania.
  • down: odpowiednik metody JavaScript Math.floor(). Zaokrągla wartość w dół do najbliższej całkowitej wielokrotności przedziału zaokrąglania.
  • nearest (domyślny): odpowiednik JavaScript Math.round(). Zaokrągla wartość w górę lub w dół do najbliższej całkowitej wielokrotności przedziału zaokrąglania.
  • to-zero: odpowiednik metody JavaScript Math.trunc(). Zaokrągla wartość do najbliższej całkowitej wielokrotności przedziału zaokrąglania do zera.

Więcej informacji o temacie round() znajdziesz w filmie The New CSS Math: round() autorstwa Dana Wilsona.

Funkcje rem() i mod()

Funkcje CSS rem() i mod() działają podobnie do operatora reszty (%) JavaScriptu. Przyjmują 2 wartości: pierwsza (dzielna) jest dzielona przez drugą (dzielnik), a reszta jest zwracana.

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

Różnica między tymi 2 funkcjami polega na tym, że rem() zawsze przyjmuje znak dywidendy, więc jeśli pierwsza wartość jest dodatnia, zwrócona wartość będzie dodatnia. Funkcja mod() przyjmuje znak dzielnika.

Więcej informacji na temat rem() i mod() The New CSS Math: rem() oraz mod() autorów Dana Wilsona.