CSS function clamp()

Опис

clamp() - функція в CSS, яка дозволяє встановлювати динамічні значення властивостей залежно від різних умов. Вона дозволяє обмежити властивість значеннями в заданому діапазоні. Це корисний інструмент для створення адаптивних та гнучких макетів на веб-сайті.

Функція clamp() приймає три параметри: preferred, min і max. Значення властивості буде обчислюватися наступним чином:

• Якщо preferred значення знаходиться між min і max, то результатом буде preferred значення;
• Якщо preferred значення менше min, то властивість прийматиме значення min;
• Якщо preferred значення більше max, то властивість прийматиме значення max.

Приклад використання:

Допустимо, у нас є блок зі шириною 600px, але ми хочемо, щоб його ширина змінювалася залежно від розмірів екрану, але при цьому не менше 300px і не більше 800px. Ми можемо використати функцію clamp() для цього:

width: clamp(300px, 50%, 800px);

У цьому прикладі, якщо ширина батьківського елемента буде більше 1200px, то ширина блоку буде становити 600px (50% від 1200px). Але якщо ширина батьківського елемента буде менше 600px, то ширина блоку буде фіксованою і дорівнюватиме 300px. Таким чином, за допомогою clamp() ми забезпечуємо адаптивність ширини блоку з врахуванням заданого діапазону значень.

Синтаксис

clamp(<min>, <preferred>, <max>);

<number>

Числові значення, які можуть бути вказані з одиницями вимірювання, такими як пікселі (px), відсотки (%), em або rem.

<expression>

Ви можете використовувати будь-який допустимий CSS вираз, такий як calc(), var(), rgba(), і так далі, які повертають числові значення.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2