Первые дни запросов в стиле контейнеров

Мы все еще находимся в suuuuuper первых днях с контейнерными запросами. Слишком рано для широкой поддержки браузеров, но Chromium уже поддерживает это, Safari начал поддерживать его в версии 16, а Firefox предположительно не далеко позади.

Большинство ранних разговоров, вращающихся вокруг контейнерных запросов, обычно сравнивают синтаксис с медиа-запросами.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Оба они делают запросы для min-width: 600. Разница в том, что медиа-запрос просматривает ширину области просмотра, чтобы инициировать эти изменения стиля, в то время как запрос контейнера просматривает вычисленную ширину области просмотра. .posts элемент. Сладкий!

Но после прослушивания Подкаст CSS Эпизод 59, Уна и Адам рассказали о будущем контейнерных запросов: стиль запросов! Текущий рабочий проект спецификации CSS Containment Module Level 3 определяет запросы в стиле контейнера:

A запрос в стиле контейнера позволяет запрашивать вычисленные значения   контейнер запросов. Это логическая комбинация отдельных особенности стиля (), каждый из которых запрашивает одно конкретное свойство контейнера запросов.

Но пока никаких примеров по синтаксису — только краткое описание:

Синтаксис  то же самое, что и для заявление, и его запрос является истинным, если вычисленное значение данного свойства в контейнере запроса соответствует заданному значению (которое также вычисляется относительно контейнера запроса), неизвестно, если свойство или его значение недопустимо или не поддерживается, и ложно в противном случае . Сочетание логического синтаксиса и логики особенности стиля в стиль запроса то же самое, что и для Запросы функций CSS. (См. @поддерживает.)

Итак, да, со временем мы должны ожидать, что проделаем что-то вроде этого:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Это довольно глупый пример. Следует отметить, что container-type больше не основан на контейнере inline-size но по style. Мы могли бы сделать это так:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…но все контейнерные запросы style запросы по умолчанию. Что ж. по крайней мере, как сегодня. Мириам Сюзанна имеет хороший описание возможных проблем, которые могут возникнуть с этим.

Где может пригодиться запрос стилей контейнера? Я еще не знаю! Но мой разум идет в несколько мест:

• Пользовательские значения свойств: Мы видели пользовательские свойства, используемые как индикаторы состояния, такие как Метод DRY-переключения, о котором Ана рассказывала некоторое время назад. Значение меняется, как и стили.
• Альтернативный подход в темном режиме: Вместо того, чтобы основывать все это на изменении класса тела, которое переназначает значения пользовательских свойств, возможно, мы можем изменить всю цветовую палитру, если, скажем, фон тела меняет цвет.
• Более сложные условия запроса: Например, мы хотим применить стили, когда size и style условия для контейнера соблюдены.

Уна также упомянул в подкасте CSS, что запросы стиля контейнера могут помочь предотвратить некоторые неудобные ситуации со стилем, например, если у нас есть выделенный курсивом текст в уже выделенном курсивом blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}