Какие знаешь новые возможности CSS

CSS постоянно развивается, добавляя мощные фичи. Вот несколько ключевых новинок:

1. Container Queries
Адаптация стилей не только по viewport, но и по размеру контейнера:

.component {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .component { flex-direction: row; }
}

2. :has()
Селектор родителя по дочерним элементам:

.card:has(img) { border: 1px solid #ccc; }

3. CSS Nesting
Вложенность стилей как в препроцессорах:

.card {
  & .title { font-size: 1.2rem; }
}

4. Scroll Snap
Контроль прокрутки:

.container {
  scroll-snap-type: y mandatory;
}
.item {
  scroll-snap-align: start;
}

5. CSS Grid Level 2 (subgrid)
Наследование структуры грида:

.grid {
  display: grid;
  grid-template-columns: subgrid;
}

Также стоит отметить @layer, aspect-ratio, color-mix(), accent-color и улучшенную поддержку кастомных свойств (CSS Variables).