Casos de éxito de consultas de contenedores

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Navegadores compatibles

  • Chrome: 105
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origen

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.

Imagen que muestra cómo funcionan en conjunto los distintos tipos de diseño.
web.dev: La nueva experiencia responsiva

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

Antes (base de código múltiple) Después (base de código única)
Infraestructura Infraestructura independiente (alto costo). Misma infraestructura (costo reducido)
Diseño IU separada, pero coherencia deficiente Es difícil de resolver, pero es posible.
Rendimiento Son fáciles de manejar, ya que el sistema es independiente, pero duplica el esfuerzo de mejorar el rendimiento. Esta es una página y una función específica, pero la puntuación de redBus PageSpeedInsights es superior a 80.
Desarrollo Equipos de desarrolladores separados. Una reducción de entre un 30% y un 40% en el tiempo.

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

.
Antes de implementar consultas de contenedores, las palabras “ISKU 10 in 1 Obeng "satu". en la parte superior izquierda están cortados para tamaños de pantalla más pequeños.

Después

.
La implementación de consultas de contenedores ajusta el diseño manteniendo el texto dentro del viewport.

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:

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().