Cómo usar consultas de contenedores en CSS

Durante mucho tiempo, las consultas de medios fueron la única forma de hacer que los diseños de interfaz de usuario respondieran en diferentes tamaños de pantalla. Pero incluso eso tenía sus limitaciones. Uno de los mayores problemas con el uso de consultas de medios era que solo podía diseñar un elemento en respuesta a los cambios en el tamaño de la pantalla, no su elemento contenedor más cercano.

Las consultas de contenedor se introdujeron para resolver este problema. También han aumentado con la popularidad de marcos como React y Vue.js que funcionan mediante la creación de "componentes" de interfaz de usuario modular. Aprenda a usar consultas de contenedor para crear elementos receptivos en su CSS.

El código utilizado en este artículo está disponible en este repositorio GitHub y es gratis para su uso bajo la licencia MIT.

¿Por qué debería usar consultas de contenedor CSS?

Para comprender la importancia de las consultas de contenedor, usemos un ejemplo que facilita la comprensión del concepto. Pero primero, debe clonar el código de inicio de este repositorio GitHub.

Una vez que haya clonado con éxito el repositorio, ejecute el código. Encontrarás una página web similar a la siguiente imagen:

Aquí tiene un diseño de cuadrícula que consta de dos columnas: la sección principal y la barra lateral. La sección principal se ve bien, pero la barra lateral (que es mucho más pequeña que el contenido principal) se ve un poco aplastada.

El diseño es receptivo. Cuando reduce el tamaño del navegador, puede ver que la tarjeta se transforma en una columna vertical:

En otras palabras, cuando el contenido comienza a volverse ilegible, el diseño se transforma en una columna vertical donde la imagen se apila sobre el contenido. Este efecto se produce como resultado de las consultas de medios, que es la única forma en que puede determinar el tamaño de los elementos en función del tamaño total de su pantalla.

En este caso, siempre que su pantalla tenga menos de 800 px, apila todo uno encima del otro usando Alineación de caja flexible. En pantallas más grandes, colocamos el contenido uno al lado del otro:

@medios de comunicación(anchura máxima: 800px) {
.tarjeta {
dirección de flexión: columna;
 }
.card-header { 
ancho: 100%;
 }
}

Durante mucho tiempo, las consultas de los medios han sido una de las principales principios de diseño web por crear diseños receptivos con CSS (y ha sido lo suficientemente bueno para la mayoría de las cosas). Pero seguramente se encontrará con escenarios en los que las consultas de medios no serán suficientes, o al menos no serán una solución conveniente.

Uno de esos escenarios es cuando tienes una barra lateral (como lo hacemos en el ejemplo anterior). En estos casos en los que tienes una barra lateral, tendrías que seleccionar directamente la tarjeta de la barra lateral e intentar hacerla más pequeña:

.barra lateral.tarjeta {
/* Hacer la tarjeta de la barra lateral más pequeña */
}
@medios de comunicación(anchura máxima: 800px) {
/* Aplica estilo a la página cuando la pantalla es más estrecha que 800px */
}

Puede ser bastante complicado si está trabajando con muchos elementos porque tiene que seleccionar manualmente todos los elementos y cambiar su tamaño. Terminaría con más código y complejidad adicional.

Aquí es donde las consultas de contenedor podrían ser útiles. En lugar de verse obligado a usar su ventana gráfica como su tamaño, puede usar cualquier elemento en su página como contenedor. Luego, ese contenedor puede tener sus propios anchos en los que basaría sus consultas de medios.

Cómo crear una consulta de contenedor

Para crear una consulta de contenedor, comenzaría seleccionando el elemento que desea usar como contenedor (en este caso, la sección principal y la barra lateral). Dentro del bloque, debe configurar el tipo de contenedor a tamaño en línea:

principal, .barra lateral {
tipo de contenedor: tamaño en línea
}

Cuando guarde su archivo CSS, nada cambiará en la página. Pero ahora puede usar consultas de contenedor para cambiar el tamaño y el estilo de las tarjetas anidadas dentro de la sección principal y la sección de la barra lateral. En la siguiente consulta de contenedor, está cambiando las tarjetas a columnas verticales en pantallas que tienen 500 px de ancho o menos:

@envase(anchura máxima: 500px) {
.tarjeta {
dirección de flexión: columna;
 }
.card-header {
ancho: 100%;
 }
}

Esto va a funcionar como una consulta de medios normal. Pero en lugar de medir el tamaño de su pantalla, está midiendo el tamaño de sus contenedores (secciones principal y de la barra lateral). Entonces, ahora, cuando su contenedor tiene 500 px o más, usa la vista horizontal. De lo contrario, usa vertical (predeterminado para flexbox).

En la imagen de arriba, puedes ver que la barra lateral toma una forma vertical porque es más pequeña que 500px. Mientras que el contenido principal conserva su diseño horizontal porque es más grande que 500px. Si reduce su navegador, su barra lateral y el contenido principal usarán la alineación vertical cuando alcancen los 500px o menos.

La consulta del contenedor es increíblemente poderosa porque le permite cambiar el tamaño de las cosas en función del contenedor en lugar del ancho completo del navegador. Esto es especialmente útil cuando se trata de componentes (como en React o Vue).

Con las consultas de contenedor, puede cambiar fácilmente el tamaño de los componentes de la interfaz de usuario en función de su contenedor, lo que le permite crear componentes completamente autónomos.

Contenedores de nombres

Cuando creas un @envase consulta, primero busca el contenedor del elemento al que se dirige dentro de la consulta. En nuestro caso, este sería el contenedor principal y el contenedor de la barra lateral.

E incluso si las tarjetas estuvieran dentro de otro contenedor, simplemente ignoraría los otros contenedores y solo elegiría el contenedor más cercano a sí mismo. Esto es parte de una más amplia Concepto CSS conocido como selectores CSS.

En el siguiente ejemplo, hemos convertido el elemento del cuerpo en un contenedor:

cuerpo {
tipo de contenedor: tamaño en línea;
}

Ahora tenemos tres contenedores separados: cuerpo, principal y sección lateral. De forma predeterminada, las tarjetas a las que nos dirigimos en la consulta del contenedor están más cerca de la sección principal o la barra lateral que del cuerpo. Por lo tanto, utiliza las secciones principal y de la barra lateral como contenedores para la consulta del contenedor.

Para anular este comportamiento, debe hacer dos cosas. Primero, debe darle a su elemento de cuerpo un nombre de contenedor:

cuerpo {
tipo de contenedor: tamaño en línea;
nombre-contenedor: cuerpo;
}

Luego, cuando crea su consulta de contenedor, debe especificar el nombre del contenedor después de @envase.

@envase cuerpo (anchura máxima:1000px){
/* Reglas CSS que apuntan al contenedor del cuerpo */
}

Esto es útil si desea utilizar un elemento específico como contenedor en lugar del contenedor más cercano al elemento al que se dirige. En otras palabras, puede seleccionar cualquier contenedor específico y ajustar su diseño.

Unidades de contenedores

Otra gran característica de los contenedores es que puede usar unidades de contenedores. Estas unidades funcionan como unidades de ventana gráfica (todas son exactamente del mismo tipo de unidades). Sin embargo, las unidades de contenedores utilizan cqw (para configurar el ancho) y cqh (para ajustar la altura). Estas unidades determinan el ancho y la altura exactos de su contenedor.

Las consultas de contenedores CSS le permiten usar elementos específicos como puntos de referencia para sus consultas de medios. Esta técnica es bastante útil para crear elementos modulares autónomos que se pueden colocar de forma independiente, independientemente del contenedor en el que se encuentren. Pero las consultas de contenedores usan los mismos principios que las consultas de medios, y esto es algo que debe dominar si desea ser un desarrollador de CSS del uno por ciento superior.