Container queries in Themes?

Development

AI-generated summary

Container Queries in Discourse Themes

Container queries are supported in Discourse themes, but they have some limitations. merefield initially questioned their support in themes, and awesomerobot confirmed they work, but noted that they are harder to reason around than media queries.

One major limitation is that container queries require a static width on the container, which can limit their use cases. awesomerobot shared a proof of concept that demonstrates how container queries work in themes.

merefield and awesomerobot discussed the limitations of container queries, with merefield expressing disappointment that they cannot be used with dynamic widths.

However, merefield later isolated their issue to containers being tables, which do not support container queries. They found a solution by moving the container up to a div element, which solved the problem.

1

I’ve seen these used in Plugins and native Discourse, but not in Themes (example?). Are they supported?

In Themes is @container supported in .scss?

This seems this gets through, e.g.:

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

image

:+1:

but not @container - the enclosed CSS seems to disappear despite meeting the container query condition.

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

I’ve just done a quick test and can confirm that container queries work in themes… one thing I will note is that they’re a lot harder to reason around than media queries. A couple of us on the team have been confused by this initially.

They’re not simply media queries on containers, but have a separate set of requirements. The biggest issue being:

Size containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops.

from container-type CSS property - CSS | MDN

So you can not use a container query with a container that has a dynamic width. You must set a static width on the container. This significantly limits what you’d expect to be able to do with them unfortunately.

Here's a really goofy proof of concept that shows that they work 
@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;
  }
}

Container under 400px:

image
image816×177 12.3 KB

Container over 400px:

image
image1002×185 13.4 KB

3

thanks for looking at this! And thanks for confirming,

Oh!

Quite! :cry:

4

I believe I’ve isolated my issue: containers can’t be tables, looks like they must be divs.

I created a pen which had two identical containers, except one was a table.

The container query fails on the table, but succeeds on the otherwise almost identical div.

the ultimate solution here was moving the container up to #list-area which is a div and that solved my issue!

Really appreciate you looking at this, because confirming it should work in themes (to the extent that it does) gave me that all-important extra impetus!