Запросы контейнера в темах?

Разработка
1

Я видел, как их используют в плагинах и нативном Discourse, но не в темах (пример?). Поддерживаются ли они?

Поддерживается ли @container в .scss в темах?

Похоже, это проходит, например:

.side-by-side {
  container-type: inline-size;
  container-name: side-by-side;
}

image

:+1:

но не @container — встроенный CSS, похоже, исчезает, хотя условие контейнерного запроса выполняется.

@container side-by-side (min-width: 500px) {
  .side-by-side {
     tbody {
2

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

Они не являются просто медиа-запросами для контейнеров, а имеют отдельный набор требований. Главная проблема заключается в следующем:

Ограничение размера отключает возможность элемента получать информацию о размере от своего содержимого, что важно для запросов контейнеров, чтобы избежать бесконечных циклов.

из container-type CSS property - CSS | MDN

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

Вот довольно забавное доказательство концепции, показывающее, что они работают 
@media screen and (min-width: 500px) {
  .fk-d-button-tooltip {
    width: 300px;
    background: green;
    container-type: inline-size;
  }
}

@media screen and (min-width: 1000px) {
  .fk-d-button-tooltip {
    width: 500px;
    background: yellow;
    container-type: inline-size;
  }
}

@container (min-width: 400px) {
  #create-topic {
    background: blue !important;
  }
}

Контейнер меньше 400px:

image
image816×177 12.3 KB

Контейнер больше 400px:

image
image1002×185 13.4 KB

3

Спасибо, что посмотрели это! И спасибо за подтверждение,

О!

Да уж! :cry:

4

Я полагаю, что мне удалось локализовать проблему: контейнеры не могут быть таблицами, похоже, они должны быть div-элементами.

Я создал пример с двумя идентичными контейнерами, за исключением того, что один из них был таблицей.

Запрос контейнера не сработал для таблицы, но успешно выполнился для почти идентичного div-элемента.

Окончательным решением здесь стало перемещение контейнера вверх к #list-area, который является div, и это решило мою проблему!

Очень благодарен вам за то, что вы уделили этому внимание, так как подтверждение того, что это должно работать в темах (насколько это возможно), дало мне тот самый важный дополнительный стимул!