Uso de Container Queries en CSS

¿Qué son las container queries y por qué son revolucionarias en CSS?

Las container queries son una adición emocionante introducida en CSS en 2022 y revolucionaron el mundo del diseño web. De manera similar a los media queries, las container queries permiten cambiar el estilo de los componentes, pero en lugar de basarse en el viewport del navegador, se centran en el contenedor de un componente. Esto ofrece una flexibilidad sin precedentes para el diseño responsivo, permitiendo que los componentes se adapten a diferentes tamaños de contenedores, no solo al tamaño global de la ventana.

¿Cómo funcionan?

1. Definir un contenedor: Todo comienza con un contenedor al que designamos como tal usando la propiedad container-type. Esto le indica al navegador que observe las dimensiones de este contenedor.

2. Especificar las propiedades del contenedor:

   • inline-size: indica que el contenedor adaptará su tamaño en línea.
   • container-name: asigna un nombre específico al contenedor, lo que es útil si hay varios contenedores y queremos que cada uno actúe de manera diferente.

3. Escribir las queries: De forma similar a los media queries, aquí utilizamos container en lugar de media para definir cuándo y cómo cambiará el estilo de un componente en relación con el tamaño del contenedor.

.wrapper {
  container-type: inline-size;
  container-name: cart;
}

@container cart (min-width: 500px) {
  .card {
    /* Estilos específicos cuando el contenedor alcanza el ancho mínimo */
  }
}

¿Cuáles son las ventajas de las container queries?

• Diseño más específico: Permiten que cada componente reaccione individualmente a su contenedor, no solo al tamaño del viewport.
• Flexibilidad: Los componentes pueden comportarse de manera diferente incluso si están en la misma página, adaptándose a su entorno específico.
• Compatibilidad con design systems: Facilitan la creación de componentes modulares que son esenciales en sistemas de diseño modernos.

Recursos para experimentar con container queries

El desarrollador mencionado en la clase creó un laboratorio (LAF) inspirado en James Simmons, donde puedes experimentar con varios ejemplos de container queries. Aquí puedes probar cómo las mismas cartas pueden verse y comportarse de manera distinta dependiendo del contenedor. Un ejemplo práctico es una carta que cambia su diseño en un menú lateral respecto a un contenedor más grande.

¿Cómo está la compatibilidad de las container queries?

Aunque en 2022, se introdujeron, no todos los navegadores tienen soporte total. Actualmente, Chrome, Firefox y Safari han implementado soporte para container queries en sus versiones más recientes. Es crucial estar al tanto de la compatibilidad usando herramientas como Can I use para garantizar que nuestros desarrollos funcionen en los navegadores utilizados por nuestros usuarios.

¡Qué emocionante resulta explorar estas nuevas capacidades de diseño en CSS! Las container queries son sencillamente un avance que promete simplificar y enriquecer el diseño de páginas web modernas. Con ellas, no solo asumimos más control sobre cómo vemos y ajustamos los componentes en nuestra página, sino que también mejoramos la experiencia del usuario al hacer las páginas más adaptables y fluidas.

Te invito a que pruebes las container queries y revises la compatibilidad en los navegadores que usas para optimizar tus diseños y seguir construyendo con CSS de manera innovadora.