Future CSS: новые и экспериментальные возможности (container-style, subgrid и др.)

Будущее CSS уже здесь: что нас ждёт? 🔮

CSS постоянно эволюционирует, и новые возможности появляются быстрее, чем мы успеваем их освоить. Сегодня разберём экспериментальные и перспективные функции, которые изменят ваш подход к вёрстке.

🔥 Важно: Некоторые из этих технологий пока работают только в отдельных браузерах или требуют флага #experimental-web-platform-features в Chrome. Проверяйте поддержку на caniuse.com!

Контейнерные запросы (container-type и container-name)

Наконец-то мы можем создавать стили, зависящие от размера контейнера, а не всего окна браузера! Это революция для компонентного дизайна.

.component {
  container-type: inline-size; /* Отслеживает ширину */
  container-name: card; /* Опциональное имя */
}

@container card (max-width: 600px) {
  .component__title {
    font-size: 1.2rem;
  }
}

Как это работает:

• container-type: может быть size (ширина + высота), inline-size (только ширина) или normal
• @container — аналог @media, но для конкретного элемента

Подсетка (subgrid): магия вложенных гридов

Проблема: когда грид-элемент сам становится грид-контейнером, его дочерние элементы не выравниваются с родительской сеткой. subgrid решает это!

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

.child {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* Наследует колонки родителя! */
}

Где применить:

• Сложные формы с единым выравниванием
• Карточки продуктов с согласованными блоками
• Медиа-галереи с переменным контентом

Стилизация контейнеров (container-style)

Экспериментальная возможность, позволяющая применять стили к самому контейнеру на основе его состояния:

@container style(--theme: dark) {
  .component {
    background: #222;
    color: white;
  }
}

В JavaScript можно динамически менять стиль:

element.style.setProperty('--theme', 'dark');

Цветовые пространства (lch(), oklch(), color-mix())

Будущее цветов в CSS — более естественные и предсказуемые системы:

.item {
  background: oklch(70% 0.3 150); /* Лучше воспринимается глазом */
  border-color: color-mix(in lch, red, blue 30%);
}

Преимущества:

• oklch — более точная светлотная составляющая
• color-mix — плавные переходы между цветовыми пространствами

Анимация без JavaScript (@scroll-timeline)

Теперь анимации можно привязывать к прокрутке страницы:

@scroll-timeline progress {
  source: selector(#scroller);
  orientation: vertical;
}

@keyframes grow {
  to { width: 100%; }
}

.progress-bar {
  animation: grow 1s linear forwards;
  animation-timeline: progress;
}

Практическое применение: собираем всё вместе

Давайте создадим адаптивную карточку с новыми технологиями:

.card {
  container-type: inline-size;
  container-name: card;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

@container card (width < 400px) {
  .card {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

.card__footer {
  background: oklch(90% 0.05 200);
  transition: background 0.3s;
}

@container style(--hover: true) {
  .card__footer {
    background: oklch(70% 0.2 200);
  }
}

Что дальше? 🚀

Эти технологии — лишь верхушка айсберга. В разработке:

• @when / @else — условия в CSS
• :has() — селектор родителя
• anchor() — позиционирование относительно любых элементов

Следите за обновлениями в Chrome Canary и Firefox Nightly, экспериментируйте и внедряйте новое в свои проекты постепенно!

💡 Совет от Данилы Бежина: «Используйте новые возможности как progressive enhancement — пусть сайт работает везде, но становится лучше в современных браузерах».