CSS container-name — іменований контейнер запитів

CSS властивість container-name дає контейнеру ім'я, щоб правило @container могло звернутися саме до нього.

правити

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

Без імені @container дивиться на найближчий контейнер угору по дереву. Якщо контейнерів кілька вкладених, це не завжди той, який потрібен.

Ім'я знімає двозначність: @container sidebar (min-width: 300px) звернеться саме до контейнера з іменем sidebar, хай навіть між ними є інші.

правити

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

Синтаксис

container-name: none | <custom-ident>+;

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

none

Без імені — запити знаходять найближчий контейнер.

автор: NagarD

правити

custom-ident

Одне чи кілька імен через пробіл.

автор: NagarD

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="page">
    <div class="widget">
        <p class="text">Реагую на ширину сторінки, а не віджета</p>
    </div>
</div>

.page {
    container-name: page;
    container-type: inline-size;
}

.widget {
    container-type: inline-size;
}

@container page (min-width: 700px) {
    .text { font-size: 1.25rem; }
}