He visto que se usan en Plugins y en Discourse nativo, pero no en Temas (¿ejemplo?). ¿Son compatibles?
En Temas, ¿es compatible @container en .scss?
Parece que esto funciona, por ejemplo:
.side-by-side {
container-type: inline-size;
container-name: side-by-side;
}
pero @container no. El CSS incluido parece desaparecer a pesar de cumplir la condición de la consulta de contenedor.
@container side-by-side (min-width: 500px) {
.side-by-side {
tbody {
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.
@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:
¡Gracias por revisar esto! Y gracias por confirmar,
¡Oh!
¡Ciertamente! 
Creo que he aislado mi problema: los contenedores no pueden ser tablas, parece que deben ser divs.
Creé un pen que tenía dos contenedores idénticos, excepto que uno era una tabla.
La consulta de contenedor falla en la tabla, pero tiene éxito en el div, por lo demás casi idéntico.
¡La solución definitiva aquí fue mover el contenedor a #list-area, que es un div, y eso resolvió mi problema!
Realmente aprecio que hayas revisado esto, ¡porque confirmar que debería funcionar en los temas (en la medida en que lo hace) me dio ese impulso extra tan importante!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
