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