@container: компонентът реагира на своето място

Полезно е да знаеш

@container прилага стилове, когато подходящ контейнер изпълнява зададено условие. При заявки по размер обвивката трябва да е подготвена чрез container-type. [1]

Пример: @container (min-width: 30rem) { .card { display: flex; } }. Картата сменя подредбата, когато има достатъчно място в контейнера си. Широкият екран сам по себе си не гарантира изпълнение: компонентът може да е в тесен панел. За сложна вложена страница използвай container-name, за да уточниш кой контейнер се проверява и да избегнеш зависимост от случайна обвивка.