**CSS Container Queries: чому це не «нові медіа-запити»**

Контейнерні запити підтримуються 94% браузерів, але використовують їх рідше за медіа-запити. Легко сприйняти як майже те саме.
Різниця принципова
→ `@media` дивиться на **viewport** — ширину екрана.
→ `@container` дивиться на **доступний простір компонента**.

Уявіть картку шириною 300 px у бічній панелі на екрані 1920 px. `@media` бачить великий екран і може застосувати desktop-стилі, хоча картці бракує місця. `@container` реагує на ширину її контейнера.

Автор пропонує:
`@media` **→ макет сторінки**
`@container` **→ макет компонента**
Це корисно для карток, віджетів, форм, навігації, які можуть опинятися в контекстах. Компонент може змінюватися, коли контейнер стає ширшим, незалежно від пристрою.

Для адаптивних компонентів правильніше питати не «який розмір екрана?», а **«скільки місця доступно цьому компоненту?»**. Це робить їх незалежнішими від макета та придатнішими для повторного використання.

[🔎 Детальний розбір](https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/)[❖ Персональне менторство (900 грн/міс)](http://t.me/dsgn_mentor_bot)• [YouTube канал](https://www.youtube.com/@chronicwebdesign)