He realizado una prueba rápida y confirmo que las consultas de contenedor funcionan en los temas… una cosa que notaré es que son mucho más difíciles de razonar que las consultas de medios. Un par de nosotros en el equipo nos hemos confundido inicialmente con esto.
No son simplemente consultas de medios en contenedores, sino que tienen un conjunto de requisitos separado. El mayor problema es:
La contención de tamaño desactiva la capacidad de un elemento para obtener información de tamaño de sus contenidos, lo cual es importante para que las consultas de contenedor eviten bucles infinitos.
Por lo tanto, no puedes usar una consulta de contenedor con un contenedor que tenga un ancho dinámico. Debes establecer un ancho estático en el contenedor. Esto limita significativamente lo que esperarías poder hacer con ellos, desafortunadamente.
Aquí hay una prueba de concepto realmente tonta que muestra que funcionan
@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;
}
}
Contenedor de menos de 400px:
Contenedor de más de 400px:
