Оригінальна публікація: CSS Functions – How to Use calc(), max(), min(), and clamp()

У CSS багато різних одиниць вимірювання. Існують пікселі, відсотки, vh, vw, em, rem тощо.

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

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

Якщо ви навчитесь використовувати їх правильно, ви уникнете різкої зміни макету, яка трапляється при зміні розміру вікна, якщо ви використовували медіазапит. І код буде меншим!

Як використовувати функцію calc() у CSS

Функція calc приймає один параметр. Цей параметр може бути виразом, який складається з будь-якої одиниці та математичного оператора +, -, /, *.

Ви також можете використати дужки, щоб вказати порядок виконання дій, який відрізняється від загальних правил.

У виразі всередині функції calc() ви можете використовувати змінні CSS, значення, отримані з attr(), і значення з функцій max(), min() та clamp().

calc() дозволяє обчислити значення з комплексних параметрів.

div {
    width: calc(100% - 2em);
}

Примітка: завжди залишайте пробіл з обох сторін математичних операторів.

Як використовувати функцію max() у CSS

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

Можна подумати, що функцію max можна використати, щоб знайти найменше число.

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

Наприклад:

h1 {
    font-size: max(1rem, 10vh);
}

У такому разі текст становитиме десяту частину висоти вікна (за умови, що висота не стане замалою). Текст завжди матиме font-size зі значенням принаймні 1rem, щоб забезпечити легкість для читання.

Як використовувати функцію min() у CSS

Як і функція max, min приймає декілька аргументів (включно з іншими функціями max, min чи clamp) та повертає найменше значення.

Можна подумати, що завдяки функції min можна знайти найбільше значення.

Скажімо, ви створюєте форму та хочете, щоб вона була адаптивною. Щоб уникнути розтягнутого екрану, який часто зустрічається на найбільших екранах, потрібно надати максимальної ширини.

Ви б написали щось схоже:

.form {
    width: min(600px, 90vw);
}

Ваша сторінка матиме ширину, яка дорівнює 90% ширини вікна перегляду, або 600 пікселям, незалежно від найменшого розміру. Якщо ширина вікна перегляду більша за ~670 пікселів, форма не буде розтягуватись горизонтально.

Приклад min() та max():

Тут ви можете побачити, як працюють фрагменти коду. Спробуйте змінити розмір по горизонталі та вертикалі. Ви побачите, як змінюються ширина форми та розмір тексту.

Як використовувати функцію clamp() у CSS

Функція clamp скріпляє значення між максимальним й мінімальним лімітом та обирає значення між ними.

clamp приймає три значення. Перше значення є мінімальним, друге — переважним, а третє — максимальним.

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

Використовуйте clamp, щоб елементи макету адаптовано змінювали розмір у межах діапазону.

h1 {
    font-size: clamp(1rem, 10vw, 2rem);
}

div {
    padding: clamp(10px, 6vw, 50px);
    width: clamp(140px, 90vw, 600px);
}

Приклад clamp:

Перегляньте це в дії! Змініть розмір горизонтально. Ви побачите, як різні елементи змінюють розміри.

MDN має детальнішу інформацію щодо цих функцій:

Ви коротко дізнались про чотири чудові функції. Цих знань достатньо, щоб почати використовувати їх, тому до роботи!