Las consultas de contenedores ofrecen un enfoque muy dinámico y flexible para el diseño responsivo. Las consultas de contenedores usan la regla at @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 disponible.
Mediante la respuesta al tamaño del contenedor, las consultas de contenedor 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 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 macrodiseños, consultas de contenedores para microdiseños con 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 IU y CSS. En esta ocasión, veremos en detalle cómo algunas empresas usaron y se beneficiaron de las consultas de contenedores.
redBus
redBus mantiene y publica códigos diferentes en sus versiones para dispositivos móviles y computadoras de escritorio. Después de implementar las búsquedas de contenedores en las páginas Actividades y Carga, pudieron unificar el 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 demuestra el uso de 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, 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
| Antes (base de código múltiple) | Después (base de código única) | |
|---|---|---|
| Infraestructura | Infraestructura separada (costo alto) | Misma infraestructura (costo reducido) |
| Diseño | IU separada, pero mala coherencia | 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 función específica, pero la puntuación de PageSpeedInsights de redBus es superior a 80. |
| Desarrollo | Equipos de desarrolladores separados. | Entre un 30% y un 40% de reducción del tiempo |
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 a 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 con facilidad y rapidez las consultas de contenedores. Después de esta implementación, pudieron tener un diseño flexible en el que el nombre del producto siempre fuera completamente visible (consulta el siguiente video "Después").
Antes
Después
Código
Con el siguiente código, se consulta el tamaño del contenedor superior llamado infowrapper.
Si el ancho máximo de infowrapper es de 360 px, se ajustan los objetos width, margin, y padding de los componentes secundarios.
Cuando se configura 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 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 debes tener en cuenta cuando usas consultas de contenedores
Tokopedia encontró su caso de uso tras buscar puntos suspensivos de texto en su sitio. Esto indica que hay contenedores que podrían ser demasiado pequeños, lo que provoca que el contenido se corte para el usuario.
Otro buen caso de uso para las consultas de contenedores en sitios de comercio electrónico es tener cuidado con los 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 un CTA principal en la página). El botón podría ser un buen candidato para las consultas de contenedores.
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, e implementar consultas de contenedores allí. Luego, busca más casos y mejora el CSS de manera progresiva.
Recursos:
- Las consultas de contenedores llegan a navegadores estables
- Diseño de consultas de contenedores 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 explica cómo las empresas de comercio electrónico se beneficiaron con el uso de nuevas funciones de IU y CSS, como las animaciones basadas en desplazamientos, las ventanas emergentes, las consultas de contenedores y el selector has().