CSS de próxima generación: @container | Programar Plus

Chrome está experimentando con @container, una propiedad dentro de la especificación de nivel 3 de contención del grupo de trabajo de CSS defendida por Miriam Suzanne de Oddbird y un grupo de ingenieros en la plataforma web. @container nos trae la habilidad de elementos de estilo basados ​​en el tamaño de su contenedor principal.

El @container La API 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 del navegador correspondiente!

Insectos: Chrome | Firefox | Safari

Puede pensar en estos 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 contenedor serán el cambio más grande en el estilo web desde CSS3, alterando nuestra perspectiva de lo que significa “diseño receptivo”.

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 la barra lateral, el cuerpo o el héroe podría verse completamente diferente en función de su tamaño y dinámica disponibles.

@container en acción

En este ejemplo, estoy usando dos tarjetas dentro de un padre con el siguiente marcado:

<div class="card-container">
  <div class="card">
    <figure> ... </figure>
    <div>
      <div class="meta">
        <h2>...</h2>
        <span class="time">...</span>
      </div>
      <div class="notes">
        <p class="desc">...</p>
        <div class="links">...</div>
      </div>
      <button>...</button>
    </div>
  </div>
</div>

Entonces, estoy configurando la contención (el contain propiedad) en el padre en el que consultaré los estilos de contenedor (.card-container). También estoy configurando un diseño de cuadrícula relativo en el padre de .card-container, entonces es inline-size cambiará según esa cuadrícula. Esto es lo que estoy preguntando con @container:

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

¡Ahora puedo consultar estilos de contenedor para ajustar estilos! Esto es muy similar a cómo establecería estilos usando consultas de medios basadas en ancho, usando max-width para establecer estilos cuando un elemento es más pequeño que un cierto tamaño, y min-width cuando 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 diseños micro de los diseños macro. Puede diseñar elementos individuales con consultas de contenedor, crear micro diseños matizados y diseñar diseños de página completos con consultas de medios, el diseño de macros. 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 de macros (es decir, el calendario que va de un solo panel a varios paneles) y el diseño de 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. Tome el siguiente ejemplo de una interfaz de usuario de comercio de plantas:

No se utilizan consultas de medios en este sitio web. 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 le dice a las tarjetas que ocupen el espacio fraccional disponible hasta que lleguen 230px de tamaño, y luego pasar a la siguiente fila. Vea más trucos de cuadrícula en 1linelayouts.com.

Luego, tenemos una consulta de contenedor que diseña las tarjetas para que adopten un diseño de bloque vertical cuando son menores que 350px de ancho y cambia a un diseño en línea horizontal aplicando display: flex (que tiene un flujo en línea por defecto).

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

  /* ... */
}

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

Uso

Para usar @container, primero debe crear un elemento padre que tenga contención. Para hacerlo, deberá configurar contain: layout inline-size en el padre. Puedes usar inline-size ya 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.

Ajuste contain: layout inline-size crea un nuevo bloque contenedor y un nuevo contexto de formato de bloque, permitiendo que el navegador lo separe del resto del diseño. ¡Ahora podemos consultar!

Limitaciones

Actualmente, no puede usar consultas de contenedor basadas en altura, usando solo el eje de bloque. Para hacer que los niños trabajen en cuadrícula @container, deberá agregar un elemento contenedor. A pesar de esto, agregar una envoltura le permite obtener los efectos que desea.

Pruébalo

Puedes experimentar con el @container propiedad en Chromium hoy, navegando a: chrome://flags en Chrome Canary y activando el # experimental-container-queries bandera.

Artículo

el 28 de febrero de 2018

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

Artículo

el 20 de abril de 2021

Saluda a las consultas de contenedor CSS

Artículo

el 16 de diciembre de 2019

La historia de origen de las consultas de contenedores

Artículo

el 12 de noviembre de 2020

La técnica del cuervo: un paso más cerca de las consultas de contenedores

(Visited 15 times, 1 visits today)