CSS-функции

CSS поддерживает функции для вычислений и динамических значений: calc() — арифметика (width: 100% - 200px), min()/max() — минимум/максимум, clamp() — ограничение между min/preferred/max, var() — переменные, url() — файлы, attr() — атрибуты HTML.

Основные CSS-функции:

calc() — арифметика: width: calc(100% - 40px); height: calc(100vh - 60px); font-size: calc(14px + 0.5vw);

Можно смешивать единицы!

min() — минимум из значений: width: min(90%, 800px); /* Не больше 90% и не больше 800px */

max() — максимум из значений: font-size: max(16px, 1vw); /* Не меньше 16px и не меньше 1vw */

clamp(min, preferred, max) — ограничение: font-size: clamp(1rem, 2.5vw, 2rem); /* Не меньше 1rem, не больше 2rem, предпочтительно 2.5vw */

var() — CSS-переменные: color: var(--primary, #3498db);

url() — файлы: background: url('bg.jpg');

attr() — HTML-атрибут: .content::after { content: attr(data-count); }

min-content / max-content / fit-content: width: min-content; /* Минимальная ширина содержимого */ width: max-content; /* Максимальная ширина содержимого */ width: fit-content; /* По размеру содержимого */

CSS-функции — как калькулятор в CSS. calc() — считает. min/max — выбирает минимум/максимум. clamp() — «золотая середина»: не меньше минимума, не больше максимума, а между — как получится.

**Самый простой:**

.container {
  width: min(90%, 800px);
  margin: 0 auto;
  padding: max(1rem, 3vw);
}

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Базовые min(), max(), clamp() для адаптива.

**Простой:**

/* calc() для layout */
.sidebar {
  width: 250px;
}

.main {
  width: calc(100% - 250px - 2rem);
}

/* min/max для контейнера */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 3rem);
}

/* clamp для типографики */
:root {
  --step-0: clamp(0.875rem, 0.81rem + 0.33vw, 1rem);
  --step-1: clamp(1rem, 0.93rem + 0.33vw, 1.13rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
}

/* min-content для текста */
.badge {
  width: min-content;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

calc(), min(), clamp() и min-content для реальных задач.

**Реальный пример:**

/* Полная адаптивная типографика */
html {
  font-size: clamp(14px, 1vw + 12px, 18px);
}

/* Динамический padding */
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: min(5vw, 3rem);
}

/* Адаптивная сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 300px), 1fr)
  );
  gap: clamp(1rem, 2vw, 2rem);
}

/* Картинка с ограничениями */
.hero-image {
  width: min(100%, 600px);
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
}

/* Вычисление позиции */
.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

/* Динамическая ширина */
.text-input {
  width: calc(100% - 2rem);
  padding: 1rem;
  /* padding + width = 100% (border-box) */
}

Полный набор CSS-функций для адаптивного дизайна.

**Неправильно:** Не использовать clamp() для типографики

**Почему:** clamp() заменяет множество медиа-запросов для font-size.

**Правильно:** font-size: clamp(1rem, 2.5vw, 2rem) — плавное масштабирование.

**Неправильно:** Путать min() и max()

**Почему:** min(90%, 800px) = не больше 800px. max(16px, 1vw) = не меньше 16px.

**Правильно:** min — «потолок» (не больше). max — «пол» (не меньше).

**Неправильно:** Не знать calc() для смешивания единиц

**Почему:** width: calc(100% - 200px) — нельзя написать без calc(). Проценты и пиксели не складываются напрямую.

**Правильно:** calc() — единственный способ смешивать единицы: 100% - 200px, 16px + 1vw.

• calc() — арифметика со смешиванием единиц
• min() — «потолок» (не больше max значения)
• max() — «пол» (не меньше min значения)
• clamp(min, preferred, max) — ограничение посередине
• var() — CSS-переменные с fallback

Назад: Вы знаете переходы (C21) — CSS-функции обеспечивают динамические и адаптивные значения.

Вперёд: В следующем уроке (C23) вы изучите фоны и градиенты — финальный урок CSS.