Saluda a las consultas de contenedores CSS

¡Las consultas sobre contenedores finalmente están aquí! Ahora disponible detrás de una bandera en la última versión de Chrome Canary , puedes seguir adelante y experimentar a tu gusto. 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ó un montón de excelentes casos de uso para 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 contenedor 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 consultas de contenedores CSS, pero finalmente están ahí.

Una vez que haya activado la función, chrome://flagspodrá comenzar a escribir código como este:

.parent {  container: layout inline-size;}@container (min-width: 400px) {  .child {    display: flex;    flex-wrap: wrap;  }}

En primer lugar, debe decirle al componente principal que un elemento secundario necesita cambiar de tamaño (esa es la container: layout inline-sizeparte). A continuación, puede utilizar un nuevo tipo de consulta llamada @containerque detectará cuando el padre de un elemento cambia de ancho.

Andy Bell también dio muchos ejemplos excelentes 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 contenedores es que podemos configurar la tipografía contextualmente . Para mí, esta es la característica más necesaria en las implementaciones de sistemas de diseño y por la que constantemente deseo tener consultas sobre contenedores. Podemos responder con consultas de medios y establecer tamaños de fuente, etc. de esa manera, pero cuando no tienes 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 tienen sentido mucho más fácilmente que antes.

Esta publicación me recuerda que Miriam Suzanne hizo una excelente propuesta donde se puede leer más sobre cómo se diseñaron las consultas de contenedores y todos los diversos problemas que surgieron en el camino. Es muy interesante ver un documento como este que muestra la mejora de CSS en público.

Personalmente, creo que esta es la mayor mejora en CSS desde Grid. Abre todo tipo de soluciones elegantes a los problemas con los que trabajamos a diario. El otro día tuve un problema cuando quería establecer el tipo de elemento en una barra lateral dependiendo del ancho del elemento que lo envolvía. Y vaya, ¡simplemente no era posible sin introducir un montón de trucos extraños!

Las consultas sobre contenedores ya no son sólo una quimera lejana. Están aquí para quedarse.