Эта функция до сих пор не получила стабильного распространения в браузерах, но скоро она появится в Chrome. Если коротко, мы можем проверять, есть ли у элемента определённая CSS-переменная, и стилизовать его дочерние элементы на основе этого.
Переключение тем на уровне компонента
В некоторых случаях нам может понадобиться переключить тему компонента в зависимости от того, где он находится.
В следующем примере я хочу, чтобы компонент статистики менял свою тему на тёмную, если он находится во втором разделе.
Мы можем сделать нечто подобное:
.special-wrapper {
--theme: dark;
container-name: stats;
}
@container stats style(--theme: dark) {
.stat {
/* Добавление тёмных стилей. */
}
}
Узнайте больше о стилевых запросах в моей статье.
Компонент для статьи
Переключение стиля статьи в зависимости от ширины контейнера полезно, но иногда нам нужно разрешить это только в случае необходимости. Стилевые запросы могут это сделать!
Нам нужно добавить CSS-переменную и проверить, есть ли она. Если да, то нам нужен именно тот стиль, который мы хотим.
.o-grid__item {
container-type: inline-size;
--horizontal: true;
}
@container (min-width: 400px) and style(--horizontal: true) {
/* Горизонтальный стиль */
}
Таким образом, статья будет меняться в зависимости от ширины её контейнера только в том случае, если переменная --horizontal имеет значение true.
