Застосування математичних функцій CSS

Математичні функції CSS дають змогу записувати значення властивості елемента – такої як height, animation-duration або font-size - як математичний вираз.

Вбудовані одиниці вимірювання CSS, як то rem, vw та %, часто достатньо гнучкі, щоб оформлювати елементи HTML для досягнення певного враження користувачів.

Проте є випадки, коли може здаватися обмеженням вираження стилю елемента за допомогою одного значення та одиниці вимірювання. Розгляньмо наступні приклади:

Необхідно задати висоту області вмісту як "висота області перегляду мінус висота навігаційної смуги".
Необхідно додати ширини двох елементів докупи, щоб визначити ширину третього.
Необхідно не дати змінному значенню font-size певного тексту перевищити певний розмір.

У всіх цих випадках необхідно вдатися до математичних обчислень, щоб отримати бажаний результат. Одним з рішень може бути використання математичних функцій, визначених JavaScript, і динамічне задання стилів елементів на основі результатів, обчислених сценаріями.

У багатьох випадках, в тому числі прикладах вище, замість цього можна скористатися математичними функціями, вбудованими безпосередньо в CSS. Таке рішення нерідко простіше реалізувати, а також швидше виконується браузером, ніж використання JavaScript.

В цілому розробники можуть скористатися поєднанням більш ніж двох десятків математичних функцій CSS у своїх списках стилів. У цьому посібнику вводяться чотири з найбільш поширених, а також складніші.

`calc()` – базові математичні операції

У перших двох з наведених вище трьох прикладів ми хочемо задати стиль елемента відповідно до результату операції додавання або віднімання. Це саме один з випадків використання calc().

Функція calc() дає змогу задавати значення властивостей CSS за допомогою додавання, віднімання, множення та ділення. Часто вона використовується для поєднання двох значень CSS, які мають різні одиниці вимірювання, наприклад % та px.

Математична функція calc() приймає як параметр математичний вираз, а повертає результат цього виразу, наприклад:

property: calc(expression);

Приклад `calc()`

Клацніть піктограму відтворення нижче, щоб побачити приклад calc() у кодовому майданчику та спробувати його самостійно.

<div class="calc1">
  <code>width: calc(10px + 100px);</code>
</div>
<div class="calc2">
  <code>width: calc(2em * 5);</code>
</div>
<div class="calc3">
  <code>width: calc(100% - 32px);</code>
</div>
<div class="calc4">
  <code>width: calc(var(--predefined-width) - calc(16px * 2));</code>
</div>

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

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

.calc1 > code {
  /* Вивід ширини: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /* Вивід ширини: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /* Вивід ширини: Залежить від ширини контейнера */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /* Вивід ширини: Залежить від ширини контейнера */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

`min()` – пошук мінімального значення серед кількох

Є випадки, коли ми не хочемо, щоб значення властивості CSS перевищувало певне число. Скажімо, наприклад, хочемо, щоб ширина контейнера вмісту була меншою поміж "повної ширини нашого екрана" та "500 пікселів". У таких випадках можна скористатися математичною функцією CSS min().

Математична функція min() приймає як параметр набір значень, розділених комами, і повертає найменше з цих значень, наприклад:

property: min(<перше значення>, <друге значення>, <третє значення>, ...);

Ця функція нерідко використовується для порівняння двох значень CSS, які мають різні одиниці вимірювання, наприклад, % і px.

Приклад `min()`

Клацніть піктограму відтворення нижче, щоб побачити приклад min() у кодовому майданчику та спробувати його самостійно.

<div class="min1">
  <code>width: min(9999px, 50%);</code>
</div>
<div class="min2">
  <code>width: min(9999px, 100%);</code>
</div>
<div class="min3">
  <code>width: min(120px, 150px, 90%);</code>
</div>
<div class="min4">
  <code>width: min(80px, 90%);</code>
</div>

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

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

.min1 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `50%` від його ширини */
  width: min(9999px, 50%);
}

.min2 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `100%` від його ширини */
  width: min(9999px, 100%);
}

.min3 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `120px` від його ширини */
  width: min(120px, 150px, 90%);
}

.min4 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `80px` від його ширини */
  width: min(80px, 90%);
}

`max()` – пошук максимального значення серед кількох

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

Математична функція max() приймає як аргументи набір значень, розділених комами, і повертає найбільше з цих значень, наприклад:

property: max(<перше значення>, <друге значення>, <третє значення>, ...);

Зверніть увагу на подібності та відмінності між прикладами для min() і max().

Приклад `max()`

Клацніть піктограму відтворення нижче, щоб побачити приклад max() у кодовому майданчику та спробувати його самостійно.

<div class="max1">
  <code>width: max(50px, 50%);</code>
</div>
<div class="max2">
  <code>width: max(50px, 100%);</code>
</div>
<div class="max3">
  <code>width: max(20px, 50px, 90%);</code>
</div>
<div class="max4">
  <code>width: max(80px, 80%);</code>
</div>

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

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

.max1 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `50%` від його ширини */
  width: max(50px, 50%);
}

.max2 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `100%` від його ширини */
  width: max(50px, 100%);
}

.max3 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `90%` від його ширини */
  width: max(20px, 50px, 90%);
}

.max4 > code {
  /* Вивід ширини: Залежить від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `80%` від його ширини */
  width: max(80px, 80%);
}

`clamp()` – обмеження значення між двома значеннями

Функції min() і max() можна поєднати шляхом використання clamp(). Математична функція clamp() приймає як аргументи мінімальне значення, значення для обмеження та максимальне значення, наприклад:

property: clamp(
  <мінімальне значення>,
  <значення для обмеження>,
  <максимальне значення>
);

Якщо значення для обмеження менше за передане мінімальне значення, то ця функція поверне мінімальне значення.
Якщо значення для обмеження більше за передане максимальне значення, то ця функція поверне максимальне значення.
Якщо значення для обмеження лежить між переданими мінімальним і максимальним значеннями, то функція поверне вихідне значення для обмеження.

Приклад `clamp()`

Клацніть піктограму відтворення нижче, щоб побачити приклад clamp() у кодовому майданчику та спробувати його самостійно.

<div class="clamp1">
  <code>width: clamp(10%, 1px, 90%);</code>
</div>
<div class="clamp2">
  <code>width: clamp(10%, 9999px, 90%);</code>
</div>
<div class="clamp3">
  <code>width: clamp(125px, 1px, 250px);</code>
</div>
<div class="clamp4">
  <code>width: clamp(25px, 9999px, 150px);</code>
</div>

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

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

.clamp1 > code {
  /* Вивід ширини: Залежть від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `20%` від його ширини */
  width: clamp(20%, 1px, 80%);
}

.clamp2 > code {
  /* Вивід ширини: Залежть від ширини контейнера; */
  /* на цій сторінці, ймовірно, буде `90%` від його ширини */
  width: clamp(10%, 9999px, 90%);
}

.clamp3 > code {
  /* Вивід ширини: `125px` */
  width: clamp(125px, 1px, 250px);
}

.clamp4 > code {
  /* Вивід ширини: `150px` */
  width: clamp(25px, 9999px, 150px);
}

Просунуті математичні функції CSS

При компонуванні та оформленні елементів DOM нерідко достатньо чотирьох базових математичних функцій – calc(), min(), max() і clamp(). Проте для складних випадків, таких як навчальні матеріали з математики, тривимірні візуалізації чи анімації 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 у всіх браузерах і пристроях.

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.

Застосування математичних функцій CSS

calc() – базові математичні операції

Приклад calc()

min() – пошук мінімального значення серед кількох

Приклад min()

max() – пошук максимального значення серед кількох

Приклад max()

clamp() – обмеження значення між двома значеннями

Приклад clamp()