Como Usar @container de CSS

Hasta la fecha de este Post, después de casi 15 años como una función muy solicitada en CSS, y 15 años después de que se les dijera que era imposible, las unidades y consultas de contenedores (tamaño) se han enviado tanto en Chrome/Edge 105 como en Safari 16 y Firefox no se queda atrás. En este Post te enseñaré rápidamente a Como Usar @container de CSS, que es básicamente una consulta al contenedor en los navegadores, vamos con ello.

Antes de continuar te invito a leer los siguiente artículos:

• Crear una web con CSS 3 Flexbox
• Implementando “Facebook Reactions” con CSS 3
• Mostrar un Esqueleto antes de Cargar el contenido de una Web
• Como Trabajar con Variables en CSS
• Como funcionan los Combinadores CSS
• Implementando Media Queries con CSS 3
• Como funcionan las Nuevas Propiedades Lógicas CSS
• El Estado actual de CSS para el 2020 – Parte 1
• Los 5 mejores Frameworks CSS para Desarrolladores en 2020
• Como Depurar CSS con Chrome DevTools
• Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)
• Trabajando con Selectores de Atributos en CSS 3
• Puedes leer más Posts en la categoría CSS

Asimismo te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidacta” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast): 

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: 10 Errores Que Debes Evitar En Tus Procesos De Autenticación y Como Solucionarlos – Parte 2 (Final). 

Si deseas comenzar a usar estas funciones (¡lo recomiendo!) ¡ Asegúrate de estar usando la sintaxis correcta ! Algunas cosas han cambiado entre el primer prototipo y la versión final que se agrego a los navegadores. Pero no te preocupes, ahora es estable y no volverás a cambiar la sintaxis.

Tanto Chrome 105 como Safari 16 vienen con una impresionante lista de nuevas características además de consultas de contenedores. Los aspectos más destacados son el selector :has() (en ambos) y la subgrid (en Safari). Pero recomiendo buscar en las notas de la versión vinculadas anteriormente.

Como Usar @container (Consultas de Contenedores o Container Queries)

Mientras tanto, Chrome Canary y Edge Canary lanzaron un prototipo de consultas de estilo. En lugar de medir las dimensiones de un elemento, las consultas de estilo miden el valor calculado de una propiedad dada en ese elemento. Recuerda que para usar @container de CSS actualiza tu navegador a las últimas versiones, las cuales traen soporte para @container, al menos hasta la fecha de este Post @container de CSS es nueva, pero poco a poco se ira estableciendo en los navegadores.

Las consultas de estilo se limitan a la igualdad estricta (no podemos consultar rangos de números o valores parciales), y se limita a propiedades personalizadas. Incluso con esas limitaciones, es una característica bastante poderosa.

Primero defino mi botón en la vista HTML (Tu puedes definir otro elemento HTML, yo usaré un botón para este ejemplo):

A continuación te comparto un código de como usar @container, estableciendo dos temas de botones estiloa y estilob alternados por una sola propiedad personalizada. Lo que hago con @container primeramente es consultar si el estilo es estiloa o estilob y debajo otra consulta si el estilo es estilob y en base a ello aplico propiedades a mi botón:

Las consultas de contenedores serán el cambio más grande en el estilo web desde CSS3, alterando nuestra perspectiva de lo que significa “diseño receptivo”.

¿ Qué Problema Resuelven Las Consultas de Contenedores ?

Al crear un diseño receptivo, a menudo usas una consulta de medios (@media) para cambiar el diseño del documento según el tamaño de la ventana gráfica. Sin embargo, muchos diseños tienen componentes comunes que cambian de diseño según el ancho disponible de un contenedor. Es posible que esto no siempre se relacione con el tamaño de la ventana gráfica, sino con la ubicación del componente en el diseño.

Por ejemplo, en la siguiente imagen, puedes ver el siguiente componente que podría mostrarse en una columna estrecha o ancha en el diseño del sitio. Si hay espacio, se muestra como dos columnas, si no, queremos mostrarlo apilado:

La ventana gráfica y el agente de usuario ya no serán los únicos objetivos que tenemos para crear diseños receptivos y estilos de interfaz de usuario. Con las consultas de contenedor, los elementos podrán dirigirse a sus propios padres y aplicar sus propios estilos en consecuencia. Esto significa que el mismo elemento que vive en el sidebar, el body, header, footer, etc., podría verse completamente diferente según su tamaño y dinámica disponibles.

En lugar de mirar el tamaño de la ventana gráfica, podemos mirar el tamaño del contenedor y hacer los ajustes de diseño de acuerdo con el espacio del contenedor. Esta característica web es una de las más solicitadas por la comunidad de desarrolladores FrontEnd.

Conclusión

@container cambiará muchas cosas en el diseño con CSS y en el futuro veremos diseños de sitios web que antes eran imposibles realizar y con la creatividad del diseñador Front veremos cosas increibles.

Nota(s)

• No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.