Mejora tus diseños de Squarespace utilizando consultas de contenedor CSS
Las consultas de medios CSS ya hacen que los sitios web de Squarespace sean adaptativos, pero a menudo habrá ocasiones en las que necesites que los elementos se adapten a sus contenedores, y no solo a la ventana de visualización. Afortunadamente, las consultas de contenedor CSS ya están ampliamente implementadas en los navegadores, y hay formas de utilizarlas en los sitios web de Squarespace.
Desde que Ethan Marcotte acuñó el término, nuestras principales herramientas para hacer que los productos y las páginas web sean «adaptativos» han sido las consultas de medios CSS como esta:
@media (min-width: 48rem) {
section {
display: grid; }
}
Las consultas de medios son propiedades globales que se aplican a determinados tipos de medios, como la impresión o la pantalla, la orientación, la altura y la anchura, y las preferencias de combinación de colores. A veces, es necesario aplicar estilos de forma condicional, por ejemplo, en función de la anchura del contenedor de un elemento.
Las consultas de contenedor son una característica que los desarrolladores llevaban mucho tiempo esperando, y ahora es posible aplicar CSS condicional en función del contenedor de un elemento. Lo mejor de todo es que la sintaxis ya te resultará familiar:
@container (min-width: 48rem) {
p {
font-size: 1rem; }
}
Creación de una ficha de producto
Para mostrar cómo funcionan las consultas de contenedor, he diseñado un conjunto de fichas de producto en las que se muestran la imagen de portada de un álbum, el título, la fecha de lanzamiento y la valoración.
Izquierda: Tarjetas sin detalles del producto.
A la derecha: Fichas de productos que utilizan consultas de contenedor CSS.
Con este tamaño, las tarjetas parecen estrechas, por lo que su contenido se apila verticalmente en una columna.
Tarjetas estrechas y contenido apilado.
Sin embargo, las consultas de contenedor permiten que el contenido de la tarjeta se adapte. Así pues, ahora, al organizar las tarjetas en una cuadrícula flexible, cada una ajustará la disposición de su contenido en función del espacio disponible, independientemente del tamaño de la ventana de visualización.
Tarjetas más anchas con un diseño de contenido adaptado mediante consultas de contenedor CSS.
El código HTML de estas tarjetas es sencillo y utiliza varios elementos de diseño, uno para cada tarjeta:
<div class="layout-item"> <article class="card">…</article> </div> <div class="layout-item">…</div> <div class="layout-item">…</div> <div class="layout-item">…</div> <div class="layout-item">…</div> <div class="layout-item">…</div> <div class="layout-item">…</div> Each article contains two direct descendants: a card-figure image and the card-content division: <article class="card"> <figure class="card-figure"><img></figure> <div class="card-content"> <h3>The Space War Chronicles</h3> <p>2025</p> <svg></svg> <button>…</button> </div> </article>
He definido cada elemento de diseño como un contenedor utilizando la notación abreviada de contenedor. De este modo, se asigna un nombre al contenedor, además del eje en el que se basarán los estilos de su contenido:
.layout-item {
container: card / inline-size; }
Las consultas de contenedor CSS funcionan definiendo un contenedor, cuyas características determinarán cuándo se aplican los estilos a sus descendientes. He establecido el valor de «container-type» en cada elemento del diseño en «inline-size», que normalmente se dispone de izquierda a derecha, aunque también podría elegir «block-size», que suele disponerse de arriba abajo, o simplemente «size».
También he añadido las propiedades `background-color` y `border-radius` a cada elemento del diseño, además de las propiedades de Flexible Box (Flexbox), que cambian la orientación de la tarjeta de una columna vertical a una fila horizontal cuando varía el espacio dentro de la tarjeta:
.layout-item {
container: card / inline-size;
display: flex;
flex-direction: column;
padding: 15px;
border-radius: 10px;
background-color: rgba(0,0,0,.25); }
Asigné propiedades de Flexible Box a cada tarjeta, estableciendo el valor inicial de «flex-direction» en «column» para que su contenido se apilara verticalmente. A continuación, apliqué un valor de «flex» igual a 1 para repartir el espacio disponible a partes iguales entre la imagen de la figura de la tarjeta y la división del contenido de la tarjeta:
.card {
display: flex;
flex-direction: column;
gap: 15px; }
.card-figure,
.card-content {
flex: 1; }
Por último, utilicé la consulta de contenedor para cambiar el valor de «flex-direction» de una tarjeta de «column» a «row» cuando su anchura mínima supera los 300 px:
@container card (min-width: 300px) {
.card {
flex-direction: row;
align-items: center; }
}
A medida que haya más espacio disponible, el navegador reorganizará la disposición de las tarjetas, pasando de una sola columna de contenido a dos columnas.
Fichas de productos que utilizan consultas de contenedor CSS.
Sugerencia: Puedes ver los efectos de esta consulta de contenedor en mi página de demostración paraeste artículo.
Uso de consultas de contenedor CSS en Squarespace
Las consultas de contenedor son una novedad relativamente reciente en CSS, pero actualmente todos los principales navegadores las admiten sin problemas. He descubierto que la mejor forma de integrar las consultas de contenedor en las páginas web de Squarespace para crear nuevos elementos es añadiendo código HTML personalizado en bloques de código.
Código HTML para consultas de contenedor dentro de un bloque de código de Squarespace.
Puedes añadir tu CSS al bloque de código o, si vas a utilizar una consulta de contenedor varias veces en tu sitio web de Squarespace, añadir sus estilos a tu CSS personalizado.
CSS para consultas de contenedor en «CSS personalizado».
¿Has probado a utilizar las consultas de contenedor CSS en tus sitios web de Squarespace? ¿Qué otros elementos de diseño crees que pueden mejorar? Cuéntamelo en los comentarios o en las redes sociales.
Andy Clarke
A menudo considerado uno de los pioneros del diseño web, Andy Clarke ha desempeñado un papel fundamental a la hora de ampliar los límites de esta disciplina y es conocido por sus diseños creativos y visualmente impresionantes. Su trabajo ha inspirado a innumerables diseñadores a explorar todo el potencial del diseño de productos y páginas web.
Andy ha escrito varios libros de referencia en el sector, entre los que se incluyen «Transcending CSS», «Hardboiled Web Design» y «Art Direction for the Web». Además, ha colaborado con empresas de todos los tamaños y sectores para ayudarles a alcanzar sus objetivos a través del diseño.
Visita el estudio de Andy, «Stuff & Nonsense», y echa un vistazo a sus plantillas Premium de edición limitada para Squarespace.
