5.1 Функція calc()
CSS-функції надають круті інструменти для виконання різних операцій прямо в стилях. Функції calc(), min(), max() та clamp() особливо корисні для створення адаптивних та гнучких дизайнів, бо дозволяють виконувати математичні операції та умовні обчислення значень.
Функція calc() використовується для виконання математичних операцій у CSS. Вона дозволяє комбінувати різні одиниці вимірювання, такі як пікселі (px), відсотки (%), em, rem та інші, в одному виразі.
Синтаксис:
селектор {
властивість: calc(вираз);
}
Приклад використання
У цьому прикладі ширина блоку розраховується як 50% ширини батьківського елемента мінус 20 пікселів:
/* Ширина блоку - половина батьківського елемента мінус 20px */
.block {
width: calc(50% - 20px);
}
5.2 Функції min(), max() та clamp()
Функції min(), max() та clamp() у CSS
Функція min()
Функція min() приймає кілька значень і повертає найменше з них. Корисна для створення гнучких розмірів, які змінюються залежно від контексту.
Синтаксис:
селектор {
властивість: min(значення1, значення2);
}
Приклад
У цьому прикладі ширина контейнера буде 50% або 300 пікселів, залежно від того, що менше:
.container {
width: min(50%, 300px);
}
Функція max()
Функція max() приймає кілька значень і повертає найбільше з них. Корисна для задання мінімальних розмірів та забезпечення адаптивності.
Функція clamp()
Функція clamp() приймає три значення: мінімальне, бажане та максимальне. Обмежує значення між мінімальним і максимальним, прагнучи до бажаного значення.
5.3 Переваги використання CSS-функцій
Переваги використання CSS-функцій:
- Гнучкість. CSS-функції дозволяють створювати більш гнучкі й адаптивні стилі, бо дозволяють динамічно обчислювати значення.
- Спрощення адаптивного дизайну. Функції
min(),max()таclamp()значно спрощують створення адаптивних дизайнів, дозволяючи обмежувати значення певними межами. - Зменшення потреби у медіа-запитах. Використання цих функцій може скоротити кількість медіа-запитів, необхідних для адаптації стилів під різні розміри екранів.
5.4 Приклад повної реалізації
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання CSS-функцій</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Блок з шириною calc(50% - 20px)</div>
<div class="block">Блок з шириною min(300px, 100%)</div>
<div class="block">Блок з шириною max(200px, 50%)</div>
<p class="text">Текст з розміром шрифту clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ