Функция mod()

Стилевая функция mod() возвращает остаток от деления — это число, которое остаётся после того, как одно целое число делится на другое. Например, 15 делится на 4 с остатком 3:

15 / 4 = 3, остаток 3.

То есть 4 умещается в 15 ровно 3 раза, а после чего остается ещё число 3. Это и есть остаток от деления.

С помощью остатка от деления можно определить, делится ли число нацело на другое. Если остаток равен нулю — значит число делится нацело. А если остаток не равен нулю — то число не делится нацело, деление происходит с остатком.

Есть небольшая разница между стилевыми функциями mod() и rem(), она проявляется при использовании отрицательных чисел. В табл. 1 приведены результаты при разных значениях этих функций.

rem() mod() Комментарий
rem(9, 4) = 1 mod(9, 4) = 1 При использовании положительных чисел результат будет всегда положительный.
rem(-9, -4) = -1 mod(-9, -4) = -1 При использовании отрицательных чисел результат будет всегда отрицательный.
rem(9, -4) = 1 rem() всегда принимает знак делимого (первый параметр).
rem(-9, 4) = -1
mod(9, -4) = -3 mod() всегда принимает знак делителя (второй параметр).
mod(-9, 4) = 3

В случае rem(-9, 4) находим наибольшее число от 0 до -9, которое делится на 4 без остатка. Это число -8. Вычитаем из делимого найденное число: -9 - (-8) = -1. Это и будет результатом функции rem().

В случае mod(-9, 4) находим наибольшее число после -9, которое делится на 4 без остатка. Это число -12. Вычитаем из делимого найденное число: -9 - (-12) = 3. Это и будет результатом функции mod().

Синтаксис

mod(<делимое>, <делитель>);
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве значений допустимо указывать целые числа (mod(20, 3)), проценты (mod(100%, 3%)) и любые допустимые единицы CSS (mod(40deg, 3deg)).

  • Делимое и делитель должны быть одного типа (mod(5em, 2em)).
  • На ноль делить нельзя, в противном случае результатом будет NaN — mod(2, 0) вернёт NaN.
  • Если в качестве делимого указать ключевое слово infinite (бесконечность), то результатом будет NaN — mod(infinite, 3) вернёт NaN.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>mod()</title> <style> .container { display: flex; /* Выстраиваем по горизонтали */ min-height: 6rem; /* Минимальная высота */ gap: mod(100%, 3%); /* Расстояние между блоками */ } .container > div { background-color: cadetblue; /* Цвет фона */ color: white; /* Цвет текста */ display: flex; /* Для выравнивания текста */ justify-content: center; align-items: center; /* Выравнивание по центру */ flex-grow: 1; /* Занимают одинаковую ширину */ font-size: 2em; /* Размер текста */ } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>

В данном примере функция mod() используется для вычисления размера между блоками по горизонтали.

Спецификация

CSS Values and Units Module Level 4

Браузеры

15.4 118
119 15.4

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также