Container queries in Themes?

dev
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
image795×22 2.03 KB

:+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 Likes
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: Cascading Style Sheets | 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 Likes
3

thanks for looking at this! And thanks for confirming,

Oh!

Quite! :cry:

2 Likes
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!

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.