Контейнерные запросы представляют собой мощный инструмент в современном CSS, вводящий новый подход к созданию адаптивной верстки. Они дополняют обычные медиазапросы, позволяя легко настраивать размер дочерних элементов контейнера в зависимости от размера родительского элемента и определять точку изменения размера.

Пример использования контейнерного запроса:

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

@container (min-width: 600px) {
  .child {
    align-self: center;
  }
}

Здесь мы устанавливаем container-type для родительского элемента, указывая, что он будет адаптироваться по ширине (inline-size). Затем, с помощью контейнерного запроса, мы определяем поведение дочернего элемента .child при изменении размера родительского контейнера.

Преимущества контейнерных запросов:

1. Изоляция вёрстки: Возможность локализовать и контролировать стили компонента внутри своего контейнера.
2. Отсутствие привязки к ширине вьюпорта: Нет необходимости подбирать ширину вьюпорта для адаптации, контейнерные запросы позволяют ориентироваться на размер родительского контейнера.

Этот метод особенно полезен при создании адаптивных компонентов пользовательского интерфейса. Вместо того чтобы зависеть от ширины вьюпорта, элементы могут адаптироваться к размерам своего контейнера или контекста.

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