Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке container queries? Чим вони відрізняються від media queries?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Container queries** - це механізм CSS, який дозволяє змінювати стилі **залежно від розмірів самого контейнера**, усередині якого перебуває елемент.
За логікою вони працюють так само, як media queries, але **орієнтуються не на viewport, а на батьківський блок**.

---

### **Приклад container query**

```css
.card {
  container-type: inline-size; /* вмикаємо вимірювання контейнера */
}

@container (max-width: 500px) {
  .title {
    font-size: 18px;
  }
}
```

Тут `.title` змінить розмір шрифту **лише якщо ширина контейнера .card ≤ 500px**, а не ширина вікна браузера.

---

### **Чим відрізняються від media queries**

| Характеристика | Media Queries | Container Queries |
|---|---|---|
| На що реагують | На розміри viewport | На розміри контейнера |
| Де застосовуються | Глобальна адаптація всієї сторінки | Локальна адаптація компонента |
| Підхід | «сторінка → компоненти» | «компоненти → незалежна адаптація» |
| Проблема, яку вирішують | Перебудови під екрани | Універсальні, повторно використовувані компоненти |

---

### **Ключова ідея**

- **Media queries**: адаптують макет «зовні», від екрана.
- **Container queries**: адаптують компоненти «зсередини», незалежно від оточення.

**Підсумок:** container queries - це наступний етап після media queries. Вони дозволяють створювати повністю **повторно використовувані, незалежні й адаптивні компоненти**, не прив'язані до ширини всього екрана.

Якщо потрібно - можу показати приклад реального UI, який ламався з media queries і вирішився з container queries.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати215 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.