CSS container — скорочення для контейнерних запитів

CSS властивість container — скорочення для container-name і container-type, записане через похилу риску.

правити

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

Запис container: sidebar / inline-size еквівалентний двом окремим рядкам. Якщо ім'я не потрібне, простіше писати одразу container-type: inline-size.

правити

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

Синтаксис

container: <container-name> / <container-type>;

Властивість container може отримувати єдине значення:

name / type

Ім'я контейнера і тип: sidebar / inline-size.

автор: NagarD

правити

Переглядачі

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

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

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

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

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

Приклади

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

<aside class="sidebar">
    <article class="card">Картка</article>
</aside>

.sidebar {
    /* ім'я / тип */
    container: sidebar / inline-size;
}

@container sidebar (min-width: 400px) {
    .card { display: flex; gap: 1rem; }
}