kostyl.dev
HTML & CSS

CSS-функції та сучасні sizing primitives

Повний огляд CSS математичних функцій: calc(), min(), max(), clamp(), round(), mod(), тригонометричні sin/cos/tan, env() для безпечних зон, та сучасні layout primitives — The Stack, The Sidebar, The RAM, The Reel.

CSS-функції та сучасні sizing primitives

CSS як мова обчислень

Більшість розробників сприймають CSS як дескриптивну мову: «задай колір, задай відступ, задай шрифт». Але сучасний CSS — це мова обчислень. Він може обчислювати арифметичні вирази між різними одиницями, виконувати тригонометрію, округлювати числа, витягувати системні константи і навіть реалізовувати умовну логіку — без жодного JavaScript.

Функції CSS не просто зручна нотація: вони дозволяють виразити наміри, а не фіксовані значення. Замість «padding: 24px» ми пишемо «padding: clamp(1rem, 3vw, 2.5rem)» — і браузер сам обраховує правильне значення для кожного viewport.

calc() — глибокий dive

calc() — перша й найбільш відома CSS-функція, з'явилась у 2012 році. Вона дозволяє змішувати різні одиниці в одному виразі.

Правила синтаксису

.element {
  /* ✅ Пробіли навколо операторів + і - обов'язкові */
  width: calc(100% - 2rem);

  /* ✅ Множення і ділення — без пробілів допустимо, але зі — краще */
  font-size: calc(1rem * 1.5);

  /* ✅ Вкладений calc (спрощується в сучасних браузерах) */
  padding: calc(calc(100% / 3) - 1rem);

  /* ❌ Дільник не може мати одиниці */
  /* width: calc(100px / 2px); */

  /* ✅ Дільник — лише число без одиниць */
  width: calc(100px / 2);
}

calc() у контексті різних властивостей

/* Класичні паттерни */
.sidebar-layout {
  display: flex;
}
.sidebar {
  width: 280px;
  flex-shrink: 0;
}
.main-content {
  width: calc(100% - 280px); /* для float-layouts */
}

/* Декоративне позиціонування */
.centered-badge {
  left: calc(50% - 20px); /* центр мінус половина ширини */
}

/* Динамічний line-height */
.readable {
  line-height: calc(1em + 0.5rem); /* базовий + відступ */
}

/* Кольори через hsl */
.dynamic-hue {
  --base-hue: 240;
  background: hsl(calc(var(--base-hue) + 30), 80%, 60%);
}
🔒localhost:3000

min(), max(), clamp() — умовна геометрія

Детальний розбір цих функцій є у статті Розміри у CSS. Тут розглянемо просунуті паттерни.

Fluid Spacing System

Одне з найважливіших застосувань clamp() — fluid spacing: відступи, що природно масштабуються між мобільною та десктопною версіями без медіа-запитів.

🔒localhost:3000

Тригонометричні функції

CSS підтримує повний набір тригонометрії: sin(), cos(), tan(), asin(), acos(), atan(), atan2(). А також математичні константи: pi, e, infinity, NaN.

Підтримка: Chrome 111+, Firefox 108+, Safari 15.4+

Розміщення елементів по колу

Класичний приклад — іконки по колу без JavaScript:

🔒localhost:3000

Функції округлення: round(), mod(), rem()

CSS Level 4 додав математичні функції для роботи з сіткою та числовими паттернами:

/* round(strategy, value, interval) */
.grid-aligned {
  /* Округлити до найближчих 8px (базова одиниця сітки) */
  margin-top: round(nearest, var(--spacing), 8px);

  /* Завжди вгору — наступне кратне 16px */
  padding: round(up, 17px, 16px); /* → 32px */

  /* Завжди вниз */
  font-size: round(down, 15px, 4px); /* → 12px */
}

/* mod(value, modulus) — залишок від ділення */
.alternating {
  /* 0, 1, 2, 3, 0, 1, 2, 3... */
  background-hue: calc(mod(var(--index), 4) * 90);
}

/* rem(value, divisor) — залишок зі знаком */
.signed-remainder {
  offset: rem(-7px, 4px); /* → -3px */
}
🔒localhost:3000

env() — системні змінні середовища

env() дає доступ до системних значень, що недоступні через звичайний CSS.

Safe Area Insets (iPhone Notch)

🔒localhost:3000
/* Правильне використання для мобільних додатків */
.app-shell {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* З fallback для десктопу */
.bottom-nav {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

Сучасні Layout Primitives

Layout Primitives — це невеликі, повторно використовувані CSS-паттерни, з яких будуються складні layouts. Концепцію популяризував Heydon Pickering у «Every Layout».

The Stack — вертикальний ритм

🔒localhost:3000

The Sidebar — самоорганізований sidebar

🔒localhost:3000

The RAM — Responsive Auto Minmax

RAM (Repeat, Auto, Minmax) — найпопулярніший grid-патерн для адаптивних галерей без медіа-запитів:

🔒localhost:3000

The Reel — горизонтальний скрол

🔒localhost:3000

Зведена таблиця CSS-функцій

ФункціяКатегоріяВикористання
calc()АрифметикаЗмішування одиниць
min(a, b)ПорівнянняНе більше за значення
max(a, b)ПорівнянняНе менше за значення
clamp(min, val, max)FluidОбмежений діапазон
round(s, v, i)ОкругленняВирівнювання до сітки
mod(v, m)МатематикаЗалишок від ділення
sin(), cos(), tan()ТригонометріяПозиціонування по колу
atan2(y, x)ТригонометріяКут між точками
abs()МатематикаАбсолютне значення
env()Системаsafe-area-inset, PWA
var()ЗмінніCustom Properties
color-mix()КолірЗмішування кольорів
light-dark()ТемаАвто-вибір для теми

Практика

Рівень 1 — Базовий: fluid компонент

Реалізуйте картку, де:

  • Ширина: min(100%, 400px)
  • Padding: clamp(1rem, 3vw, 2rem)
  • Заголовок: clamp(1.1rem, 2vw + 0.5rem, 1.5rem)
  • Текст: clamp(0.85rem, 1.5vw, 1rem)

Рівень 2 — Анімоване clock через тригонометрію

Реалізуйте годинникові стрілки через CSS:

  • rotate() для анімації
  • cos() та sin() для кінцевих точок стрілок
  • Анімація через animation: clock-hand linear infinite з animation-duration

Рівень 3 — Design Token система

Побудуйте повну систему дизайн-токенів:

  1. Fluid spacing scale (8 рівнів) через clamp()
  2. Fluid typography scale (6 рівнів) через clamp()
  3. Color palette через color-mix() (10 відтінків від одного brand color)
  4. @property для анімованих color tokens
  5. Layout через RAM + Stack + Sidebar primitives

Доступність у CSS (CSS Accessibility)

Практичне керівництво з CSS-доступності: :focus-visible та кастомний outline, prefers-reduced-motion, prefers-color-scheme, forced-colors, sr-only техніка, контрастність кольорів, розміри touch targets та print styles.

Rendering Pipeline і CSS Performance

Як браузер перетворює CSS у пікселі: Critical Rendering Path, Layout → Paint → Composite, властивості що спричиняють reflow та repaint, GPU-прискорення через transform та opacity, will-change, content-visibility та CSS Containment.