¡Las consultas de contenedores finalmente están aquí! Ahora disponible detrás de una bandera en la última versión de Chrome Canary, puede seguir adelante y experimentar al contenido de su corazón. Ah, y si no está familiarizado con las consultas de contenedores, consulte esta publicación de Ethan Marcotte sobre por qué son tan importantes.
Ahmad Shadeed describió su entusiasmo y mostró una gran cantidad de casos de uso excelentes para los problemas que resuelven las consultas de contenedores:
No he estado más emocionado por una función CSS como lo estoy ahora en los últimos seis años que pasé como desarrollador front-end. El prototipo de consultas de contenedores ahora está disponible detrás de una bandera en Chrome Canary. Gracias a los esfuerzos de personas inteligentes como Miriam Suzanne y otras personas.
Recuerdo haber visto muchos chistes sobre la compatibilidad con las consultas de contenedores CSS, pero finalmente están ahí.
Una vez que haya activado la función en chrome://flags luego puede comenzar a escribir código como este:
.parent {
contain: layout inline-size;
}
@container (min-width: 400px) {
.child {
display: flex;
flex-wrap: wrap;
}
}En primer lugar, debe decirle al componente principal que un niño necesita cambiar de tamaño (esa es la contain: layout inline-size parte). A continuación, puede utilizar un nuevo tipo de consulta llamada @container que detectará cuando el padre de un elemento cambia de ancho.
Andy Bell también hizo un montón de buenos ejemplos cuando argumentó que a menudo necesitamos que los elementos cambien según el tamaño del elemento principal más que el ancho de la ventana del navegador, especialmente cuando se trata de tipografía:
Lo más importante con las consultas de contenedor, ¡podemos configurar la tipografía contextualmente! Esto para mi es la característica más necesaria en implementaciones de sistemas de diseño y por qué deseo constantemente tener consultas de contenedores. Podemos responder con consultas de medios y establecer tamaños de fuente, etc. de esa manera, pero cuando no tiene idea de dónde terminará un elemento, este no es un enfoque ideal. Ahora que tenemos consultas de contenedor, podemos hacer ajustes de tipo que realmente tengan sentido mucho más fáciles que antes.
Esta publicación me recuerda que Miriam Suzanne hizo una excelente propuesta en la que puede leer más sobre cómo se diseñaron las consultas de contenedores y todos los diversos inconvenientes y problemas que surgieron en el camino. Es genial ver un documento como este que muestra CSS mejorando en público.
Personalmente, creo que esta es la mayor mejora de CSS desde Grid. Abre todo tipo de soluciones elegantes a los problemas que solucionamos a diario. Me encontré con un inconveniente el otro día cuando quería establecer el tipo de un elemento en una barra lateral dependiendo del ancho del elemento que lo envuelve. Y vaya, ¡simplemente no era posible sin introducir un montón de trucos extraños!
Las consultas de contenedores no son solo una quimera remota ahora. Están aquí para quedarse.
Enlace directo →