Casos de éxito de consultas de contenedores

Swetha Gopalakrishnan

Saurabh Rajpal

Consultas de contenedores ofrecen un enfoque muy dinámico y flexible para la infraestructura el diseño de tu producto. Las consultas de contenedores usan la regla at @container. Esto funciona de manera similar manera a una consulta de medios con @media; en cambio, @container consulta a un elemento superior para definir el estilo de la información, en lugar del viewport y el usuario-agente.

Las consultas de contenedores son parte de Baseline Newly Disponible.

Dado que responden al tamaño del contenedor, las consultas de contenedores permiten que los componentes se adapten a su ubicación en una interfaz. Por ejemplo, un componente de tarjeta puede adaptar su tamaño y estilos según el contenedor en el que estén ubicados, ya sea una barra lateral, o en una cuadrícula en el cuerpo principal de la página.

Como se muestra en la siguiente ilustración, puedes combinar consultas de medios para macros diseños, consultas de contenedores para microdiseños, con contenido multimedia basado en preferencias del usuario para crear un sistema de diseño responsivo potente. Leído Más información sobre las consultas de contenedores nuevo diseño responsivo.

Este artículo es parte de una serie en la que se analiza cómo las empresas de comercio electrónico mejoraron sus sitios web con nuevas funciones de CSS y de IU. Esta vez, profundizaremos en sobre cómo algunas empresas utilizaron las consultas en contenedores y se beneficiaron de ellas.

redBus

redBus mantiene y entrega distintos códigos en sus versiones para dispositivos móviles y computadoras de escritorio. Después de implementar las consultas de contenedores en sus Actividades y cargar páginas, pudieron unificar este código en una sola base de código para estos sitios. Esto hizo que sean responsivos y se guardaron el tiempo de desarrollo. En el siguiente ejemplo, se demuestra esto con la página de carga:

Código

En el siguiente ejemplo, .bpdpCardWrapper es el contenedor superior, llamado bpdpSection.

Si el contenedor bpdpSection tiene un ancho mínimo de 744 px, la font-size y line-height para los componentes seleccionados por .bpdpCardContainer y Se actualizó .subTxt, .bpdpAddress.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Impacto

Tokopedia

Las páginas de detalles del producto (PDP) de Tokopedia contienen varias pestañas de la tienda y de la información del producto. Anteriormente, el diseño de esta página se dividía en tres y, a veces, el nombre del producto de la izquierda se cortó de pantalla (consulta el siguiente video "Antes").

Para resolver este problema de diseño, adoptaron con facilidad y rapidez las consultas de contenedores. Después de esta implementación, pudieron tener un diseño flexible en el que los el nombre del producto siempre estuvo completamente visible (mira el siguiente video “Después”).

Antes

Después

Código

El siguiente código consulta el tamaño del contenedor superior llamado infowrapper. Si el ancho máximo de infowrapper es de 360 px, las etiquetas de los componentes secundarios Se ajustaron width, margin, y padding.

Si configuras container-type como inline-size, se consulta el tamaño de la dirección intercalada. del elemento superior. En idiomas latinos como el inglés, este sería el ancho de la principal, ya que el texto fluye en línea de izquierda a derecha.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Aspectos para tener en cuenta cuando usas consultas de contenedores

Tokopedia descubrió su caso de uso buscando puntos suspensivos de texto en su sitio. Esto indicaba contenedores que podrían ser demasiado pequeños, lo que provocaba que el contenido se cortara desactivada para el usuario.

Otro buen caso de uso de las consultas de contenedores para sitios de comercio electrónico para componentes reutilizados. Por ejemplo, es posible que se muestre el botón Agregar al carrito. de manera diferente según el contenedor superior (por ejemplo, solo el ícono, si está en la tarjeta del producto y el ícono con texto si es un CTA principal en la página). El podría ser un buen candidato para las consultas en contenedores.

Puedes optar por realizar mejoras incrementales en tu sitio. Por ejemplo, podría comenzar con casos de uso más pequeños, como el ejemplo de la elipse de Tokopedia y implementar las consultas de contenedores allí. Luego, busca de forma progresiva más casos mejorar el CSS.

Recursos:

• Las consultas de contenedores llegan a navegadores estables
• Cómo diseñar consultas de contenedores en el navegador
• Demostraciones de consulta de contenedores
• Demostración: Tarjetas de consulta de contenedores
• Video: Novedades de la IU web: I/O 2023
• ¿Quieres informar un error o solicitar una función nueva? Queremos conocer tu opinión.

Explora los otros artículos de esta serie sobre cómo el comercio electrónico empresas se beneficiaron con el uso de nuevas funciones de CSS y de IU, como las basadas en desplazamientos animaciones, ventanas emergentes, consultas de contenedores y el selector has().

• ¿Por qué son importantes las capacidades de IU web para tu sitio de comercio electrónico?
• Casos de éxito de animaciones basadas en desplazamientos
• Ver casos de éxito de transiciones
• Casos de éxito de elementos emergentes
• Casos de éxito del selector :has()