Модуль 5 · Урок 19
Container queries і автономні components
Media query знає про viewport; reusable component часто має знати про власний layout context. Container query дозволяє одній семантичній card адаптуватися у вузькому sidebar й широкому content region без дублювання DOM або сторінкових винятків.
Створіть containment context
.collection { container: collection / inline-size; }
.card { display:grid; gap:1rem; }
@container collection (width >= 34rem) {
.card { grid-template-columns:minmax(8rem, 12rem) 1fr; }
}
.card__title { font-size:clamp(1.25rem, 3cqi, 2rem); }container-type:inline-size дозволяє query inline dimension; shorthand також задає name. @container collection шукає найближчого ancestor з відповідним query context. Сам container не може query власний розмір для style своїх outer properties — адаптуються descendants.
Media чи container?
| Question | Media query | Container query |
|---|---|---|
| Що вимірюємо? | Viewport/device environment | Найближчий eligible ancestor |
| Типова роль | Page shell/navigation | Reusable component |
| Example | Main+aside після failure | Card змінює internal layout у wide slot |
| Fallback | Mobile-first baseline | Base component без query |
Container-relative units без runaway text
1cqi — 1% inline size query container. Такі units корисні для локального rhythm, але typography має floor і ceiling через clamp(). Не перетворюйте кожну property на container unit: якщо fixed token або normal flow уже працює, додаткова залежність не дає цінності.
Контекстна матриця
Вставте той самий component без зміни DOM у slots 18rem, 33rem, 34rem і 52rem. Зафіксуйте active rule, columns, overflow, reading order і focus order.
Практика й acceptance
- Назвіть container і вкажіть
inline-sizecontainment. - Додайте рівно одну виправдану boundary для внутрішньої card composition.
- Перевірте component у main, sidebar і nested region.
- Збережіть однаковий semantic DOM, content і keyboard order.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.