CSS de próxima generación: @container

Chrome está experimentando con @container, una propiedad dentro de la especificación de nivel 3 de contención del grupo de trabajo CSS defendida por Miriam Suzanne de Oddbird y un grupo de ingenieros de toda la plataforma web. @containernos brinda la capacidad de diseñar elementos según el tamaño de su contenedor principal .

La @containerAPI no es estable y está sujeta a cambios de sintaxis. Si lo prueba por su cuenta, es posible que encuentre algunos errores. ¡Informe esos errores al motor de navegador correspondiente!

Errores: Chrome | Firefox | Safari

Puede considerarlos como una consulta de medios ( @media), pero en lugar de depender de la ventana gráfica para ajustar los estilos, el contenedor principal del elemento al que se dirige puede ajustar esos estilos.

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

La ventana gráfica y el agente de usuario ya no serán los únicos objetivos que tendremos para crear estilos de interfaz de usuario y diseños responsivos. Con las consultas de contenedor, los elementos podrán apuntar a sus propios padres y aplicar sus propios estilos en consecuencia. Esto significa que el mismo elemento que se encuentra en la barra lateral, el cuerpo o el héroe podría verse completamente diferente según su tamaño y dinámica disponibles.

`@container`en acción

En este ejemplo, estoy usando dos tarjetas dentro de una tarjeta principal con el siguiente marcado:

div  div    figure ... /figure    div      div        h2.../h2        span.../span      /div      div        p.../p        div.../div      /div      button.../button    /div  /div/div

Luego, estoy configurando la contención (la container-typepropiedad) en el padre en el que consultaré los estilos del contenedor ( .card-container). También estoy configurando un diseño de cuadrícula relativo en el elemento principal de .card-container, por lo que inline-sizecambiará según esa cuadrícula. Esto es lo que estoy consultando con @container:

.card-container {  container-type: inline-size;  width: 100%;}

¡Ahora puedo consultar estilos de contenedores para ajustar estilos! Esto es muy similar a cómo configuraría estilos usando consultas de medios basadas en ancho, usando max-widthpara configurar estilos cuando un elemento es más pequeño que un cierto tamaño y min-widthcuando es más grande .

/* when the parent container is smaller than 850px, remove the .links div and decrease the font size on the episode time marker */@container (max-width: 850px) {  .links {    display: none;  }  .time {    font-size: 1.25rem;  }  /* ... */}/* when the parent container is smaller than 650px, decrease the .card element's grid gap to 1rem */@container (max-width: 650px) {  .card {    gap: 1rem;  }  /* ... */}

Consultas de contenedor + consultas de medios

Una de las mejores características de las consultas de contenedores es la capacidad de separar los microdiseños de los macrodiseños . Puede diseñar elementos individuales con consultas de contenedor, crear microdiseños matizados y diseñar diseños de páginas completas con consultas de medios, el diseño macro. Esto crea un nuevo nivel de control que permite interfaces aún más receptivas.

Aquí hay otro ejemplo que muestra el poder de usar consultas de medios para el diseño macro (es decir, el calendario que pasa de un solo panel a varios paneles) y el diseño micro (es decir, el diseño/tamaño de la fecha y los márgenes/cambio de tamaño del evento), para crear un Hermosa orquesta de consultas.

Consultas de contenedor + cuadrícula CSS

Una de mis formas favoritas de ver el impacto de las consultas de contenedores es ver cómo funcionan dentro de una cuadrícula. Tomemos el siguiente ejemplo de una interfaz de usuario de comercio de plantas:

No se utilizan consultas de medios en este sitio web en absoluto. En cambio, solo usamos consultas de contenedor junto con la cuadrícula CSS para mostrar el componente de la tarjeta de compras en diferentes vistas.

En la cuadrícula de productos, el diseño se crea con grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. Esto crea un diseño que indica a las tarjetas que ocupen la fracción de espacio disponible hasta alcanzar 230pxel tamaño y luego fluyan a la siguiente fila. Vea más trucos de cuadrículas en 1linelayouts.com .

Luego, tenemos una consulta de contenedor que aplica estilo a las tarjetas para que adopten un diseño de bloque vertical cuando son menos 350pxanchas y cambia a un diseño en línea horizontal display: flex(que tiene un flujo en línea de forma predeterminada).

@container (min-width: 350px) {  .product-container {    padding: 0.5rem 0 0;    display: flex;  }  /* ... */}

Esto significa que cada tarjeta posee su propio estilo responsivo . Este es otro ejemplo más de dónde puede crear un diseño macro con la cuadrícula de productos y un diseño micro con las tarjetas de productos. ¡Muy genial!

Uso

Para poder usarlo @container, primero necesita crear un elemento principal que tenga contención . Para hacerlo, deberá configurar contain: layout inline-sizeel padre. Puede usarlo inline-sizeya que actualmente solo podemos aplicar consultas de contenedor al eje en línea. Esto evita que su diseño se rompa en la dirección del bloque.

La configuración contain: layout inline-sizecrea un nuevo bloque contenedor y un nuevo contexto de formato de bloque , lo que permite que el navegador lo separe del resto del diseño. ¡Ahora podemos consultar!

Limitaciones

Actualmente, no se pueden utilizar consultas de contenedor basadas en la altura, utilizando únicamente el eje del bloque. Para que los niños de la cuadrícula funcionen @container, deberá agregar un elemento contenedor. A pesar de esto, agregar un contenedor le permite obtener los efectos que desea.

Pruébalo

Puede experimentar con la @containerpropiedad en Chromium hoy, navegando a: chrome://flagsen Chrome Canary y activando la bandera #experimental-container-queries .

Componentes responsivos: una solución al problema de las consultas de contenedores

consultas-contenedores Chris Coyier

Saluda a las consultas de contenedores CSS

consultas-contenedores Robin Rendle

La historia del origen de las consultas de contenedores