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.
![Imagen que muestra cómo funcionan en conjunto los distintos tipos de diseño.](https://developer.chrome.google.cn/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=7&hl=es-419)
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
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()
.