CSS Container Queries. ¿Sabes lo que es? Es una
nueva funcionalidadque van a implementar en
CSS para facilitar el
responsive. En concreto permite hacer componentes (o elementos de una página)
fluidos.
Vale, todo esto viene de un problema que quizás te hayas encontrado a la hora de crear webs. Necesitas elementos o componentes responsive y para ello creas media queries.
Pero no todo es tan bonito. Las media queries detectan el tamaño de toda la página y no puedes detectar dónde se ha insertado el componente. Imagina que tienes un componente que muestra una lista de algo, por mucho que metas media queries no puedes saber si han metido ese componente dentro de un div con 200px de ancho, por poner un ejemplo.
Si usas flex y grid, puede que tengas la suerte de no necesitar nada más porque los elementos se van apilando solo si no cogen, pero imagina casos más complejos, como ocultar cosas para ciertos tamaños, mostrarlos de otra forma, etc.
Con un sistema de componentes una forma rudimentaria de resolver esto es pasar al componente una clase o algo así como prop indicando el tamaño que queremos para el componente, en plan: xl, lg, md, xs y ya desde dentro del componente metes los estilos que quieras para cada tamaño. Lo malo de eso es que al usar cada componente te tienes que acordar de especificar la clase con el tamaño para que se vea bien.
Otra forma de resolverlo sería desde dentro del componente, meter un código Javascript que de forma automática metiera esas clasesdetectando su propio tamaño.
Pues bien, CSS Container Queries viene para resolver estos problemas. Igual que hacemos media queries dependiendo del tamaño de la página, vamos a poder hacer lo mismo pero para elementos de la página.
La sintaxis es así:
.parent {
contain: layout inline-size;
}
@container (min-width: 400px) {
.child {
display: flex;
flex-wrap: wrap;
}
}
En este ejemplo la clase .child aplicará esos estilos definidos cuando su antecesor más cercano que tenga la propiedad contain tenga un tamaño mínimo de 400px. Cuando esto esté implementado este ejemplo funcionaría sin tener que añadr Javascript ni hacer nada extraño.
Compartir
Facebook
Twitter
LinkedIn
Telegrama
Tumblr
WhatsApp
VK
Correo