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 {

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!

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] Container over 400px: [image]

thanks for looking at this! And thanks for confirming, [תמונה] Kris: So you can not use a container query with a container that has a dynamic width Oh! [תמונה] Kris: This significantly limits what you’d expect to be able to do with them unfortunately. Quite! :cry:

Container queries ב Themes?

מפתח

merefield (Robert) 16 במרץ,‏ 2024,‏ 12:09am 3

thanks for looking at this! And thanks for confirming,

Oh!

Quite!

נושא		תגובות	צפיות
Making templates work with container queries UX	0	45	5 במרץ,‏ 2025
Designing for Responsive Widths (Breakpoints, Viewport & Containers) Developer Guides	0	186	4 באוגוסט,‏ 2026
Container posts grid layout issue? UX mobile	3	714	12 באפריל,‏ 2022
Making the container wider Development graceful-theme	2	94	7 ביוני,‏ 2019
Something recently changed, can't increase `--topic-body-width` Development css	4	542	2 בפברואר,‏ 2024

Container queries ב Themes?

נושאים קשורים