Стилевые запросы

Эта функция до сих пор не получила стабильного распространения в браузерах, но скоро она появится в 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.