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

Ми все ще на дуже ранньому етапі запитів до контейнерів. Занадто рано для широкої підтримки браузера, але 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 Podcast Епізод 59, Уна та Адам подумали про майбутнє контейнерних запитів: стильові запити! Поточний робочий проект специфікації CSS Containment Module Level 3 визначає запити стилю контейнера:

A запит стилю контейнера дозволяє запитувати обчислені значення в контейнер запиту. Це булева комбінація окремих особливості стилю (), що кожен запит має одну специфічну властивість контейнера запиту.

Але прикладів синтаксису поки що немає — лише короткий опис:

Синтаксис a  те саме, що для 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 запити за замовчуванням. Ну. принаймні так, як воно є сьогодні. У Міріам Сюзанни приємно опис можливих проблем, які можуть виникнути З цим.

Де може стати в нагоді запит стилів контейнера? я ще не знаю! Але я думаю про кілька місць:

• Значення настроюваних властивостей: Ми бачили власні властивості, які використовувалися як індикатори стану, наприклад Метод сухого перемикання Ана згадувала деякий час тому. Цінність змінюється, а також стилі.
• Альтернативний підхід до темного режиму: Замість того, щоб базувати все на зміні класу тіла, яке повторно призначає значення власних властивостей, можливо, ми можемо змінити всю палітру кольорів, якщо, скажімо, фон тіла змінить колір.
• Більш складні умови запиту: Скажімо, ми хочемо застосувати стилі, коли size та style умови для контейнера виконуються.

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

blockquote {
  container-name: quote;
}

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