container-type¶

Свойство container-type используется для определения типа включения, используемого в запросе контейнера.

Синтаксис¶

1

container-type: <type>;

Значения¶

size

Устанавливает контейнер запросов для запросов размера контейнера как на встроенной, так и на блочной оси как во встроенном, так и в блочном измерениях. Применяет ограничение макета, ограничение стиля и ограничение размера к контейнеру.

inline-size

Устанавливает контейнер запросов для многомерных запросов на встроенной оси контейнера. Применяет макет, стиль и встроенный размер к элементу.

normal

Элемент не является контейнером запросов для любых запросов размера контейнера, но остается контейнером запросов для запросов в стиле контейнера.

Спецификация¶

• CSS Containment Module Level 3

Пример¶

Учитывая следующий пример HTML, который представляет собой компонент карты с изображением, заголовком и некоторым текстом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="container">
    <div class="card">
        <img
            src="image.png"
            alt="Cat with two different color eyes"
        />
        <h2>Card title</h2>
        <p>Card content</p>
    </div>
</div>

Чтобы создать контекст контейнера, добавьте к элементу свойство container-type. В следующем примере значение inline-size используется для создания контекста включения для встроенной оси контейнера:

1
2
3

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

Написание запроса к контейнеру с помощью at-правила @container применит стили к элементам контейнера, если он шире 400 пикселей:

1
2
3
4
5
6

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

Комментарии