Магія clamp() у CSS

Photo by Claudio Schwarz on Unsplash

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

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

Що таке clamp()?

clamp() — це функція CSS, яка визначає значення за допомогою трьох параметрів:

• Мінімальне значення
• Бажане значення
• Максимальне значення

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

property: clamp(minimum, preferred, maximum);

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

width: clamp(100px, 50%, 600px);

• При ширині перегляду 150px, 50% — це 75px, тому ширина стає 100px (мінімум).
• При ширині перегляду 1000px, 50% — це 500px, тому ширина стає 500px (бажане значення).

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

Чому використовувати clamp()?

clamp() спрощує адаптивний дизайн і зменшує необхідність у медіа-запитах (ми порівняємо clamp і медіа-запити пізніше в цьому пості). Це особливо корисно для:

• Адаптивної типографіки: Визначення розмірів шрифтів, які адаптуються до ширини перегляду, при цьому залишаючись в межах визначеного діапазону.
• Гнучких макетів: Визначення ширини, відступів і маргінів, які адаптуються до різних розмірів екранів.
• Чистий код: Заміна складної логіки медіа-запитів на один зрозумілий рядок CSS.

Хоча деякі можуть стверджувати, що clamp() не повністю виключає медіа-запити, вона безсумнівно зменшує складність і покращує підтримуваність.

Практичні приклади

1. Адаптивна типографіка

Створіть розмір шрифта, який змінюється між 16px і 24px в залежності від ширини перегляду:

font-size: clamp(16px, 3vw, 24px);

• Починається з 16px.
• Збільшується в міру зростання ширини перегляду (3% від ширини перегляду).
• Обмежується до 24px для кращої читабельності.

1. Гнучкі макети

Встановіть ширину колонки, яка динамічно змінюється:

width: clamp(100px, 50%, 600px);

• Мінімальна ширина становить 100px для малих екранів.
• Масштабується до 50% ширини контейнера.
• Обмежується до 600px для великих екранів.

3.

Photo by Claudio Schwarz on Unsplash

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

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

Що таке clamp()?

clamp() — це функція CSS, яка визначає значення за допомогою трьох параметрів:

• Мінімальне значення
• Бажане значення
• Максимальне значення

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

property: clamp(minimum, preferred, maximum);

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

width: clamp(100px, 50%, 600px);

• При ширині перегляду 150px, 50% — це 75px, тому ширина стає 100px (мінімум).
• При ширині перегляду 1000px, 50% — це 500px, тому ширина стає 500px (бажане значення).

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

Чому використовувати clamp()?

clamp() спрощує адаптивний дизайн і зменшує необхідність у медіа-запитах (ми порівняємо clamp і медіа-запити пізніше в цьому пості). Це особливо корисно для:

• Адаптивної типографіки: Визначення розмірів шрифтів, які адаптуються до ширини перегляду, при цьому залишаючись в межах визначеного діапазону.
• Гнучких макетів: Визначення ширини, відступів і маргінів, які адаптуються до різних розмірів екранів.
• Чистий код: Заміна складної логіки медіа-запитів на один зрозумілий рядок CSS.

Хоча деякі можуть стверджувати, що clamp() не повністю виключає медіа-запити, вона безсумнівно зменшує складність і покращує підтримуваність.

Практичні приклади

1. Адаптивна типографіка

Створіть розмір шрифта, який змінюється між 16px і 24px в залежності від ширини перегляду:

font-size: clamp(16px, 3vw, 24px);

• Починається з 16px.
• Збільшується в міру зростання ширини перегляду (3% від ширини перегляду).
• Обмежується до 24px для кращої читабельності.

1. Гнучкі макети

Встановіть ширину колонки, яка динамічно змінюється:

width: clamp(100px, 50%, 600px);

• Мінімальна ширина становить 100px для малих екранів.
• Масштабується до 50% ширини контейнера.
• Обмежується до 600px для великих екранів.

1. Динамічні відступи

Створіть відступи, які плавно змінюються:

padding: clamp(10px, 5vw, 50px);

• Починається з 10px.
• Збільшується в залежності від ширини перегляду (5% від ширини).
• Обмежується до 50px.

Ви можете експериментувати з цими прикладами у цьому CodePen, змінюючи розмір вікна.

Підтримка браузерами

clamp() добре підтримується в сучасних браузерах, включаючи Chrome, Edge, Firefox та Safari.

caniuse.com

Для старіших браузерів, якщо ви все ще підтримуєте IE11, надайте запасне значення:

property: fallback-value;   
property: clamp(minimum, preferred, maximum);

Реальний приклад: Плавна типографіка

Тепер, коли ми ознайомлені з clamp(), давайте розглянемо практичне застосування для плавної типографіки.

Уявіть, що ваш дизайнер вказує, що заголовки повинні мати:

• Мінімальний розмір шрифта 16px при ширині перегляду 320px.
• Максимальний розмір шрифта 32px при ширині перегляду 1000px.

Традиційний підхід через медіа-запити

Зазвичай вирішенням може бути визначення фіксованих розмірів шрифтів за допомогою медіа-запитів:

h1 {  
 font-size: 16px;  
}  

@media screen and (min-width: 1000px) {  
 h1 {   
 font-size: 32px;  
 }  
}

Однак це налаштування змушує розмір шрифта різко змінюватися з 16px на 32px при ширині 1000px, втрачаючи плавне масштабування між цими значеннями.

Альтернатива: використання розрахунків з медіа-запитами

Інший підхід — це додавання багатьох медіа-запитів або використання математичної формули з цієї статті CSS Tricks стаття, щоб створити безперервний ефект масштабування:

h1 {  
 font-size: 16px;  
}  

@media screen and (min-width: 320px) {  
 h1 {  
 font-size: calc(16px + 16 * ((100vw - 320px) / 680));  
 }  
}  

@media screen and (min-width: 1000px) {  
 h1 {   
 font-size: 32px;  
 }  
}

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

Елегантне рішення: clamp()

Використовуючи clamp(), ми можемо досягти того ж плавного масштабування в одному елегантному рядку CSS:

h1 {  
 font-size: clamp(16px, 2.35vw + 8.48px, 32px)  
}

Цей один рядок динамічно коригує розмір шрифта:

• Починається з 16px для малих екранів.
• Збільшується в залежності від ширини перегляду (на основі формули).
• Обмежується до 32px для більших екранів.

Як це працює?

Щоб зрозуміти, як clamp() визначає масштабування, уявіть зв'язок між шириною перегляду (вісь x) і розміром шрифта (вісь y) та визначте дві точки:

1. Точка A: (320px, 16px)
2. Точка B: (1000px, 32px)

Ширина перегляду за розміром шрифта

Прямі чорні лінії представляють мінімальний та максимальний розміри шрифтів, а зелена лінія — це масштабування розміру шрифта в міру зміни ширини перегляду. Це називається лінійною інтерполяцією.

Щоб знайти рівняння зеленої лінії, згадайте форму рівняння з нахилом:

Форма рівняння з нахилом

1. Обчисліть нахил (m), використовуючи точки A і B.
2. Використовуйте одну з точок для знаходження y-перехоплення (b).

Нахил — швидкість зміни

y-перехоплення

Отримана функція clamp() має вигляд:

clamp(minFontSize, m * 100vw + b, maxFontSize);

Оскільки vw — це одиниця відсотка, швидкість зміни (нахил) повинна бути відповідним чином відкоригована.
Ось фінальний Codepen.

Бонус: Перехід до rem

Для сучасних практик CSS вам потрібно буде конвертувати ваші точки A і B в одиниці rem (перехід можна здійснити на початку або в кінці). Для базового розміру шрифта 10px:

clamp(1.6rem, 2.35vw + .848rem, 3.2rem);

Для базового розміру шрифта 16px:

font-size: clamp(1rem, 2.35vw + .53rem, 2rem);

Підсумки

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

Чи використовували ви clamp() у своїх проектах? Поділіться своїми думками або улюбленими випадками використання в коментарях. Давайте вчитися і розвиватися разом! 💎

Останнє питання

А що, якщо ваше рівняння не є прямою лінією? Чи можуть розміри шрифтів змінюватися або зменшуватися нелінійно?

Слідкуйте за новими UI Gems наступного тижня! Можливо, це буде пов'язано з кривою вище — завжди є більше для відкриття.

Спочатку опубліковано на www.linkedin.com 23 січня 2025 року.

Перекладено з: The Magic of clamp() in CSS