Генератор CSS Container Queries
Налаштування container query
Живий перегляд
Про CSS container queries
CSS container queries дозволяють компонентам реагувати на розмір батьківського контейнера, а не всього viewport. Це корисно для карток, панелей, віджетів, сайдбарів і повторно використовуваних компонентів.
Цей генератор створює і налаштування контейнера, і @container правило, щоб можна було швидко скопіювати готовий responsive pattern.
Як користуватися генератором
- Оберіть container type, зазвичай inline-size для layout, який залежить від ширини.
- Вкажіть container name, якщо потрібен named container query.
- Оберіть min-width, max-width, min-height або max-height умову.
- Введіть selector і CSS declaration, які мають застосовуватись всередині container query.
- Скопіюйте згенерований CSS у свій stylesheet.
Поради
- Використовуйте container queries, коли компонент має адаптуватися до доступного місця.
- Використовуйте media queries, коли зміна залежить від усього viewport.
- Named containers корисні, якщо всередині є кілька можливих query containers.
- Тримайте selector простим і локальним: .card, .panel або .product-card.
Перевірки container query перед публікацією responsive component
Container queries адаптують component до доступного простору, але containment, query units, nesting і fallback behavior потребують перевірки.
Оберіть query container
Задайте container-type потрібному ancestor і використайте стабільне container name, якщо nested layouts можуть вибрати інший element.
Тестуйте contexts компонента
Розмістіть component у sidebars, grids, modals, cards і full-width layouts, щоб поведінка залежала саме від container.
Перевірте query boundaries
Перегляньте значення безпосередньо до, на та після breakpoint й уникайте gaps або overlaps між умовами.
Сплануйте compatibility
Уточніть browser support для size, style і scroll-state queries та залиште придатний baseline без нових features.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.