Casos de éxito de consultas de contenedores

Swetha Gopalakrishnan

Saurabh Rajpal

Las consultas de contenedores ofrecen un enfoque altamente dinámico y flexible para el diseño responsivo. Las consultas de contenedores usan la regla de anidación @container. Esto funciona de manera similar a una consulta de medios con @media, pero, en su lugar, @container consulta un contenedor superior para obtener información de diseño en lugar del viewport y el usuario-agente.

Las consultas de contenedores forman parte de Baseline Newly Available.

Cuando 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 sus estilos según el contenedor en el que se coloca, ya sea una barra lateral, una sección hero o una cuadrícula dentro del cuerpo principal de una página.

Como se muestra en la siguiente ilustración, puedes combinar consultas de medios para diseños macro, consultas de contenedores para diseños micro con consultas de medios basadas en las preferencias del usuario para crear un sistema de diseño responsivo potente. Obtén más información sobre las consultas de contenedores y el 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 IU y CSS. Esta vez, analizamos cómo algunas empresas usaron y se beneficiaron de las consultas de contenedores.

redBus

redBus mantiene y publica código diferente para sus versiones para dispositivos móviles y computadoras. Después de implementar las consultas de contenedores en sus páginas de Actividades y de cargo, pudieron unificar este código en una sola base de código para estos sitios. Esto los hizo responsivos y ahorró tiempo de desarrollo. En el siguiente ejemplo, se muestra esto con la página de carga:

Código

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

Si el contenedor bpdpSection tiene un ancho mínimo de 744 px, se actualizan font-size y line-height de los componentes seleccionados por .bpdpCardContainer y .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 para la tienda y la información del producto. Anteriormente, el diseño de esta página se dividía en tres columnas y, en ocasiones, el nombre del producto de la izquierda se cortaba para tamaños de pantalla más pequeños (consulta el siguiente video de "Antes").

Para resolver este problema de diseño, adoptaron las consultas de contenedores de forma fácil y rápida. Después de esta implementación, pudieron tener un diseño flexible en el que el nombre del producto siempre estaba completamente visible (consulta el siguiente video de "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, se ajustan los width, margin, y padding de los componentes secundarios.

Si estableces container-type en inline-size, se consulta el tamaño de la dirección intercalada del elemento superior. En idiomas latinos como inglés, este sería el ancho del contenedor 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 que se deben tener en cuenta cuando se usan consultas de contenedores

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

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

Puedes realizar mejoras incrementales en tu sitio. Por ejemplo, podrías comenzar con casos de uso más pequeños, como el ejemplo de elipse de Tokopedia, y, luego, implementar consultas de contenedores allí. Luego, encuentra más casos de forma progresiva y mejora el CSS.

Recursos:

• Las consultas de contenedores llegan a navegadores estables
• Consultas de contenedores: Diseño en el navegador
• Demostraciones de consultas 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 en los que se habla de cómo las empresas de comercio electrónico se beneficiaron de usar nuevas funciones de CSS y la IU, como animaciones impulsadas por el desplazamiento, popovers, 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 impulsadas por el desplazamiento
• Ver casos de éxito de Transitions
• Casos de éxito de elementos emergentes
• Casos de éxito del selector:has()