Правило CSS @container

определение и использование

CSS @container правила используются для определения стиля для других элементов в зависимости от размера или стиля контейнера.

стили будут фильтроваться в зависимости от условия, и если условие истинно, они будут применяться к контейнеру. Когда размер или значение стиля контейнера изменяется, условие будет переоценено.

подсказка:В CSS контейнер - это элемент, который обертывает другие элементы, используется для их группировки для стилизации.

пример

определите стиль для других элементов в зависимости от размера или стиля контейнера:

.parent {
  имя контейнера: myContainer;
  тип контейнера: внутренний размер;
}
/* Добавьте стили, если ширина myContainer менее 500px */
@container myContainer (ширина < 500px) {
  .child {
    ширина: 50%;
    граница: 2px твердая марoon;
    background-color: salmon;
  }
}

попробуйте сами

CSS грамматика

@container containername (containerquery) {
  css declarations
}

значение атрибута

Поддержка браузера

Числа в таблице показывают версию первого браузера, который полностью поддерживает это @ правило.