CSS container-type — контейнерні запити замість media query

CSS властивість container-type робить елемент контейнером запитів — після цього його нащадки можуть реагувати на його розмір через правило @container.

правити

Загальний опис

Media query знає лише ширину екрана. Але картка може стояти і в широкій колонці, і у вузькому сайдбарі — а вигляд їй потрібен різний.

Контейнерні запити розв'язують саме це: компонент дивиться на розмір свого контейнера, а не вікна. Той самий код — і в сайдбарі картка вертикальна, а в основній колонці горизонтальна.

Значення inline-size (реагувати на ширину) покриває майже всі потреби.

правити

Порада

Це те, чого чекали від CSS роками: справді перевикористовувані компоненти, які підлаштовуються під місце, а не під екран.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

container-type: normal | size | inline-size;

Властивість container-type може отримувати 3 значень:

normal

Не контейнер розмірних запитів.

автор: NagarD

правити

inline-size

Запити до ширини (inline-осі) контейнера.

автор: NagarD

правити

size

Запити до обох вимірів.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
container-type	105+	110+	16+	91+	105+	-

Підтримка: мобільні переглядачі

Переглядач
container-type	105+	yes	yes	16+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="sidebar">
    <article class="card">
        <img src="/img/logo.svg" alt="">
        <p>У вузькому контейнері — вертикально</p>
    </article>
</div>

.sidebar {
    container-type: inline-size;
    width: 250px;
}

.card {
    display: grid;
}

/* коли контейнер ширший за 400px — стає горизонтальною */
@container (min-width: 400px) {
    .card {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
    }
}