Использование математических функций CSS

В двух из трех примеров выше мы хотим установить стиль элемента в соответствии с результатом сложения или вычитания. Это как раз один из случаев применения функции calc().

Функция calc() позволяет задавать значения свойств CSS с использованием сложения, вычитания, умножения и деления. Она часто используется для объединения двух значений CSS с различными единицами, таких как % и px.

Математическая функция calc() принимает математическое выражение в качестве параметра и возвращает результат этого выражения, например:

property: calc(expression);

Нажмите на значок воспроизведения ниже, чтобы посмотреть пример calc() в игровом поле кода и попробовать его самостоятельно.

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: red;
  color: white;
  height: 48px;
}

.calc1 > code {
  /* Output width: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /* Output width: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /* Output width: Depends on the container's width */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /* Output width: Depends on the container's width */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

Иногда необходимо, чтобы значение свойства CSS не превышало определенного числа. Например, мы хотим, чтобы ширина нашей области содержимого была минимальной из "полной ширины экрана" и "500 пикселей". В таких случаях можно использовать математическую функцию CSS min().

Функция min() принимает набор значений, разделенных запятыми, в качестве аргументов и возвращает наименьшее из этих значений, например:

property: min(<first value>, <second value>, <third value>, ...);

Эта функция часто используется для сравнения двух значений CSS с разными единицами, таких как % и px.

Нажмите на значок воспроизведения ниже, чтобы посмотреть пример min() в игровом поле кода и попробовать его самостоятельно.

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: darkblue;
  color: white;
  height: 48px;
}

.min1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: min(9999px, 50%);
}

.min2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: min(9999px, 100%);
}

.min3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `120px` of the container's width */
  width: min(120px, 150px, 90%);
}

.min4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80px` of the container's width */
  width: min(80px, 90%);
}

Аналогично min(), иногда необходимо, чтобы значение свойства CSS не опускалось ниже определенного числа. Например, мы хотим, чтобы ширина нашей области содержимого была наибольшей из "полной ширины экрана" и "500 пикселей". В таких случаях мы можем использовать математическую функцию CSS max().

Функция max() принимает набор значений, разделенных запятыми, в качестве аргументов и возвращает наибольшее из этих значений, например:

property: max(<first value>, <second value>, <third value>, ...);

Эта функция часто используется для сравнения двух значений CSS с разными единицами, таких как % и px.

Обратите внимание на сходства и различия между примерами для min() и max().

Нажмите на значок воспроизведения ниже, чтобы посмотреть пример max() в игровом поле кода и попробовать его самостоятельно.

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkmagenta;
  color: white;
  height: 48px;
}

.max1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: max(50px, 50%);
}

.max2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: max(50px, 100%);
}

.max3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: max(20px, 50px, 90%);
}

.max4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80%` of the container's width */
  width: max(80px, 80%);
}

Мы можем объединить функции min() и max() с помощью clamp(). Функция clamp() принимает минимальное значение, значение для ограничения и максимальное значение в качестве аргументов, например:

property: clamp(<minimum value>, <value to be clamped>, <maximum value>);

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

Эта функция часто используется для сравнения двух значений CSS с разными единицами, таких как % и px.

Нажмите на значок воспроизведения ниже, чтобы посмотреть пример clamp() в игровом поле кода и попробовать его самостоятельно.

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkgreen;
  color: white;
  height: 48px;
}

.clamp1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `20%` of the container's width */
  width: clamp(20%, 1px, 80%);
}

.clamp2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: clamp(10%, 9999px, 90%);
}

.clamp3 > code {
  /* Output width: `125px` */
  width: clamp(125px, 1px, 250px);
}

.clamp4 > code {
  /* Output width: `150px` */
  width: clamp(25px, 9999px, 150px);
}

При компоновке и стилизации элементов DOM четыре основные математические функции calc(), min(), max() и clamp() часто оказываются достаточными. Однако для сложных применений, таких как учебные материалы по математике, 3D визуализации или анимации CSS, вы можете рассмотреть:

• Функции для дискретных значений
  • round(): вычисляет значение с заданной стратегией округления
  • mod(): вычисляет остаток от деления с знаком, совпадающим со знаком делителя
  • rem(): вычисляет остаток от деления с знаком, совпадающим со знаком делимого
• Тригонометрические функции
  • sin(): вычисляет тригонометрический синус числа
  • cos(): вычисляет тригонометрический косинус числа
  • tan(): вычисляет тригонометрический тангенс числа
  • asin(): вычисляет обратный тригонометрический синус числа
  • acos(): вычисляет обратный тригонометрический косинус числа
  • atan(): вычисляет обратный тригонометрический тангенс числа
  • atan2(): вычисляет обратный тригонометрический тангенс, заданный двумя числами
• Экспоненциальные функции
  • pow(): вычисляет число, возведённое в степень другого числа
  • sqrt(): вычисляет квадратный корень из числа
  • hypot(): вычисляет квадратный корень из суммы квадратов заданных чисел
  • log(): вычисляет логарифм числа (с e по умолчанию)
  • exp(): вычисляет e от другого числа
• Функции, связанные со знаком
  • abs(): вычисляет абсолютное значение числа
  • sign(): вычисляет знак (положительный, отрицательный или нулевой) числа

• Вы можете использовать математические функции CSS для создания адаптивных пользовательских интерфейсов без написания кода JavaScript.
• Иногда математические функции CSS могут использоваться вместо CSS-запросов на соответствие среде для определения точек разрыва макета.
• В 2023 году члены проекта Interop выбрали «Математические функции CSS» в качестве приоритетной области улучшения. Это означает, что поставщики браузеров сотрудничают, чтобы обеспечить одинаковое выполнение математических функций CSS в различных браузерах и устройствах.