1 июля 2022 года обновился черновик CSS Containment Module Level 3, в котором добавили новую возможность контейнеру — работать от стилей.

До обновления выражение от контейнера имело одну единственную характеристику — размер. Контейнер принимал решение, как ему измениться, в зависимости от размера — ширины, высоты, inline-size, block-size, пропорции и ориентации.

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

.card {
  padding: 10px;
}

@container (width > 500px) {
  .card {
    padding: 20px;
  }
}

Теперь у выражений от контейнеров появилась новая характеристика — стили. Это значит, что контейнер в зависимости от вычисленного значения стиля может принять решение, как ему выглядеть.

Вычисленное значение — процесс преобразования относительного значения в абсолютное. Например, если у элемента значения font-size: 18px, а padding: 2em, то вычисленное значение у padding будет 36px.

Сейчас опустим проценты для лайаута, безразмерные числа и специальные значенийinitialиinheritдля упрощения.

@container style(background-color: white) {
    .card {
        color: black;
    }
}

Выражения от стилей должны быть быть обёрнуты в style(), чтобы отличать запросы от размера. Также хорошей новостью является то, что все элементы по умолчанию будут иметь container-type: style. Именно поэтому он не указан в предыдущем примере кода.

Выражения от размеров и стилей можно комбинировать.

@container (width > 500px) and style(background-color: white) {
  .card { }
}

Где применять на практике

Пока сложно говорить, так как сама спецификация ещё черновик, а выражения от размеров работают в последней версии Safari и свежем Chrome, но кто нам помешает пофантазировать?

Например, если все наклонные тексты вам нужно сделать с подложкой, то это будет достаточно просто сделать:

@container style(font-style: italic) {
    span,
    i,
    .etc {
        background: lavender;
    }

    /* или */
    * {
        background: lavender;
    }
}

Конечно же для добавления тем на сайт:

@container style(--theme: dark) {
  .card { }
}

И даже для ховеров:

.card:hover,
.card:focus {
  --theme: darkHover;
}

/* apply darkHover theme styles */
@container style(--theme: darkHover) {
  .card { }
}

А пока ждём, пока выражения от стилей появятся везде.

Дополнительное чтение