Casos de éxito de consultas de contenedores

Swetha Gopalakrishnan

Saurabh Rajpal

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

Al responder 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 se coloque, ya sea una barra lateral, una sección principal 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 y consultas de medios basadas en las preferencias del usuario para crear un potente sistema de diseño responsivo. Obtén más información sobre las consultas de contenedores y el nuevo diseño responsivo.

Este artículo forma 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. En esta ocasión, analizamos cómo algunas empresas usaron las consultas de contenedores y se beneficiaron de ellas.

redBus

redBus mantiene y publica código diferente para sus versiones para dispositivos móviles y computadoras de escritorio. Después de implementar consultas de contenedores en sus páginas de actividades y de carga, 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 el font-size y el 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, a veces, el nombre del producto de la izquierda se cortaba para tamaños de pantalla más pequeños (consulta el siguiente video "Antes").

Para resolver este problema de diseño, adoptaron consultas de contenedores de forma rápida y sencilla. Después de esta implementación, pudieron tener un diseño flexible en el que el nombre del producto siempre era completamente visible (consulta el siguiente video "Después").

Antes

Después

Código

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

Si se configura el 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 del contenedor superior, 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 debes tener en cuenta cuando usas consultas de contenedores

Tokopedia encontró 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 para el usuario.

Otro buen caso de uso para las consultas de contenedores en 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 está en la tarjeta del producto y el ícono con texto si es una CTA principal en la página). El botón podría ser un buen candidato para las consultas de contenedores.

Puedes optar por realizar mejoras incrementales en tu sitio. Por ejemplo, puedes comenzar con casos de uso más pequeños, como el ejemplo de elipse de Tokopedia, y allí implementar consultas de contenedores. Luego, busca progresivamente más casos 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 consultas 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 explica cómo las empresas de comercio electrónico se beneficiaron del uso de nuevas funciones de CSS y de IU, como las animaciones controladas por el desplazamiento, el elemento emergente, las consultas de contenedores y el selector has().

• ¿Por qué son importantes las capacidades de la IU web para tu sitio de comercio electrónico?
• Casos de éxito de animaciones controladas por el desplazamiento
• Casos de éxito de View Transitions
• Casos de éxito de elementos emergentes
• Casos de éxito del selector:has()