Математические функции ступенчатого значения CSS теперь включены в базовую версию 2024.

Рэйчел Эндрю

Все основные движки теперь поддерживают математические функции ступенчатого значения CSS — round() , mod() и rem() .

Все функции ступенчатого значения преобразуют данное значение в соответствии с другим значением шага .

Функция round()

Функция round() принимает значение для округления, интервал округления и необязательную стратегию округления. Значение округляется в соответствии со стратегией округления до ближайшего целого числа, кратного интервалу округления.

Либо значение, подлежащее округлению, либо округленный интервал, должно быть пользовательским свойством CSS. Хотя можно жестко запрограммировать оба значения, нет смысла округлять число, если вы можете вычислить значение самостоятельно.

Следующий код CSS округляет значение --my-font-size до интервала 1rem .

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

Стратегия округления по умолчанию — nearest . Предыдущий пример, включающий стратегию округления, выглядит следующим образом:

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

Возможные значения для стратегии округления:

  • up : эквивалент метода JavaScript Math.ceil() . Округляет значение до ближайшего целого числа, кратного интервалу округления.
  • down : эквивалент метода JavaScript Math.floor() . Округляет значение до ближайшего целого числа, кратного интервалу округления.
  • nearest (по умолчанию): эквивалент JavaScript Math.round() . Округляет значение вверх или вниз до ближайшего целого числа, кратного интервалу округления.
  • to-zero : эквивалент метода JavaScript Math.trunc() . Округляет значение до ближайшего целого числа, кратного интервалу округления, ближе к нулю.

Узнайте больше о round() в книге «Новая математика CSS: round() » Дэна Уилсона.

Функции rem() и mod()

CSS-функции rem() и mod() работают аналогично оператору остатка (%) в JavaScript. Они принимают два значения: первое (делимое) делится на второе (делитель), а остаток возвращается.

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

Разница между этими двумя функциями заключается в том, что rem() всегда принимает знак делимого, поэтому, если первое значение положительное, возвращаемое значение будет положительным. Функция mod() принимает знак делителя.

Узнайте больше о rem() и mod() в книге Дэна Уилсона «Новая математика CSS: rem() и mod() .