Сучасні CSS функції, які варто використовувати у 2026

CSS драматично еволюціонував за останні кілька років, представляючи потужні функції, які спрощують складні макети та взаємодії. Давайте дослідимо найвпливовіші сучасні CSS функції, які кожен розробник повинен освоїти у 2026 році.

1. Container Queries

Container queries нарешті тут, дозволяючи компонентам реагувати на розмір їхнього контейнера, а не вікна перегляду. Це змінює правила гри для справді адаптивного дизайну компонентів.

Приклад:

.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

2. Селектор :has()

Часто називається "батьківським селектором", :has() дозволяє стилізувати елемент на основі його нащадків. Це усуває багато обхідних шляхів JavaScript.

Приклад:

.form:has(input:invalid) {
  border-color: red;
}
.card:has(img) {
  padding: 0;
}

3. Каскадні шари (@layer)

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

Приклад:

@layer reset, base, components, utilities;
@layer base {
  h1 { font-size: 2rem; }
}
@layer components {
  .heading { font-size: 3rem; }
}

4. Subgrid

Subgrid розширює CSS Grid, дозволяючи вкладеним сіткам брати участь у розмірах треків батьківської сітки. Це вирішує багато проблем вирівнювання.

Приклад:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.child {
  display: grid;
  grid-template-columns: subgrid;
}

5. Функція color-mix()

Змішуйте кольори безпосередньо в CSS без препроцесорів або JavaScript. Ідеально для створення варіантів кольорів на льоту.

Приклад:

.button {
  background: color-mix(in srgb, var(--primary) 80%, white);
}
.button:hover {
  background: color-mix(in srgb, var(--primary) 90%, black);
}

6. Псевдокласи :is() та :where()

Ці псевдокласи спрощують складні селектори та допомагають ефективніше керувати специфічністю.

Приклад:

:is(h1, h2, h3):hover {
  color: var(--primary);
}
:where(.card, .panel) > img {
  width: 100%;
}

7. Індивідуальні властивості трансформацій

Замість використання властивості transform з кількома функціями, тепер ви можете встановлювати трансформації окремо для кращих анімацій.

Приклад:

.element {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: translate 0.3s, rotate 0.3s;
}
.element:hover {
  translate: 0 -10px;
  rotate: 5deg;
  scale: 1.1;
}

8. accent-color

Налаштовуйте елементи форм однією властивістю, зберігаючи доступність і відповідаючи вашому бренду.

Приклад:

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

9. aspect-ratio

Визначайте співвідношення сторін без хаків з padding. Важливо для адаптивних зображень і відео.

Приклад:

.video-wrapper {
  aspect-ratio: 16 / 9;
}
.square-avatar {
  aspect-ratio: 1;
  width: 100%;
}

10. Логічні властивості

Використовуйте логічні властивості для кращої інтернаціоналізації та підтримки різних режимів письма.

Приклад:

.card {
  padding-block: 1rem;
  padding-inline: 2rem;
  margin-block-start: 2rem;
  border-inline-start: 3px solid var(--primary);
}

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

Більшість цих функцій мають чудову підтримку браузерів у 2026. Container queries та :has() тепер підтримуються в усіх сучасних браузерах. Завжди перевіряйте caniuse.com для отримання останніх даних про сумісність.

Висновок

Ці сучасні CSS функції зменшують потребу в JavaScript, покращують продуктивність і роблять ваш код більш підтримуваним. Починайте впроваджувати їх у свої проекти для створення кращих, більш стійких веб-сайтів.