Загрузка...
Загрузка...
Container Queries (контейнерные запросы) — это новая возможность CSS, которая позволяет применять стили на основе размера контейнера, а не размера окна браузера. Это революционное изменение для создания по-настоящему модульных и переиспользуемых компонентов.
Container Queries позволяют компонентам адаптироваться к размеру их родительского контейнера, а не к размеру viewport. Это особенно полезно для создания компонентов, которые могут использоваться в разных контекстах.
Media Queries реагируют на размер окна браузера:
@media (min-width: 768px) {
.card {
width: 50%;
}
}
Container Queries реагируют на размер контейнера:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
width: 50%;
}
}
Сначала нужно объявить элемент как контейнер:
.card-container {
container-type: inline-size;
/* или */
container-type: size;
/* или */
container-type: normal; /* по умолчанию, не создает контейнер */
}
Типы контейнеров:
inline-size — отслеживает только ширину (inline dimension)size — отслеживает и ширину, и высотуnormal — не создает контейнерПосле объявления контейнера можно использовать запросы:
.card {
padding: 1rem;
font-size: 1rem;
}
@container (min-width: 400px) {
.card {
padding: 2rem;
font-size: 1.25rem;
}
}
@container (min-width: 600px) {
.card {
padding: 3rem;
font-size: 1.5rem;
}
}
<div class="sidebar">
<div class="card-container">
<div class="card">
<h3>Заголовок карточки</h3>
<p>Текст карточки адаптируется к размеру контейнера.</p>
</div>
</div>
</div>
<div class="main-content">
<div class="card-container">
<div class="card">
<h3>Заголовок карточки</h3>
<p>Та же карточка, но в другом контексте.</p>
</div>
</div>
</div>
.sidebar {
width: 300px;
}
.main-content {
width: 800px;
}
.card-container {
container-type: inline-size;
}
.card {
background: #f0f0f0;
padding: 1rem;
border-radius: 8px;
}
/* Карточка адаптируется к размеру контейнера */
@container (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
.card h3 {
font-size: 1.5rem;
}
}
@container (min-width: 600px) {
.card {
padding: 2rem;
}
.card h3 {
font-size: 2rem;
}
}
Можно дать контейнеру имя для более точного контроля:
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
.main-content {
container-type: inline-size;
container-name: main;
}
/* Стили применяются только к контейнеру с именем "sidebar" */
@container sidebar (min-width: 300px) {
.card {
/* стили для карточки в sidebar */
}
}
/* Стили применяются только к контейнеру с именем "main" */
@container main (min-width: 600px) {
.card {
/* стили для карточки в main */
}
}
Container Queries вводят новые единицы измерения:
cqw — 1% ширины контейнераcqh — 1% высоты контейнераcqi — 1% inline-size контейнераcqb — 1% block-size контейнераcqmin — меньшее значение из cqi и cqbcqmax — большее значение из cqi и cqb.card-container {
container-type: inline-size;
}
.card {
font-size: clamp(1rem, 4cqw, 2rem);
padding: clamp(1rem, 5cqw, 3rem);
}
Container Queries и Media Queries можно использовать вместе:
/* Media Query для общего layout */
@media (min-width: 1024px) {
.page {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
/* Container Query для компонента */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
Container Queries поддерживаются в современных браузерах:
Для старых браузеров можно использовать полифилл или fallback через Media Queries.
Используйте Container Queries, когда:
Используйте Media Queries, когда:
Совет:
Container Queries — это мощный инструмент для создания модульных компонентов. Используйте их вместе с Media Queries для создания гибких и адаптивных интерфейсов.