CSS Container Queries: чому це не «нові медіа-запити» Контейнерні запити підтримуються 94% браузерів

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

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

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

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

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

🔎 Детальний розбір

❖ Персональне менторство (900 грн/міс) • YouTube канал