Las consultas de contenedores y :has() son una combinación de elementos como el paraíso responsivo. Por suerte, ambas funciones se integrarán en Chromium 105. Se trata de un gran lanzamiento con dos funciones muy solicitadas para las interfaces responsivas.
Consultas sobre contenedores: un resumen rápido
Las consultas de contenedores permiten a los desarrolladores consultar un selector superior para obtener información sobre su tamaño y estilo, lo que posibilita que un elemento secundario posea la lógica de diseño responsivo, sin importar dónde se encuentre en la página web.
En lugar de depender del viewport para aplicar diseño a las entradas como el espacio disponible, los desarrolladores ahora también pueden consultar el tamaño de los elementos in-page. Esta capacidad implica que un componente posee su lógica de estilo responsivo. De esta manera, el componente es mucho más resistente, ya que se le adjunta la lógica de diseño, sin importar en qué parte de la página aparezca.
Usa consultas de contenedores
Para compilar con consultas de contenedor, primero debes establecer la contención en un elemento superior. Para ello, configura un container-type en el contenedor superior. Es posible que tengas una tarjeta con una imagen y contenido de texto como el siguiente:
Para crear una consulta de contenedor, configura container-type en el contenedor de la tarjeta:
.card-container {
container-type: inline-size;
}
Si estableces container-type como inline-size, se consultará 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 tarjeta, ya que el texto fluye en línea de izquierda a derecha.
Ahora, podemos usar ese contenedor para aplicar estilos a cualquiera de sus elementos secundarios con @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
El selector superior :has()
La seudoclase :has() de CSS permite que los desarrolladores verifiquen si un elemento principal contiene elementos secundarios con parámetros específicos.
Por ejemplo, p:has(span) indica un selector de párrafo (p), que tiene un span en su interior. Puedes usar esta opción para definir el estilo del párrafo superior o modificar el estilo de cualquier elemento que contenga. Un ejemplo útil es figure:has(figcaption) para aplicar diseño a un elemento figure que contenga una leyenda. Puedes ver mucho más sobre :has() en este artículo de Jhey Tompkins.
Consultas de contenedores y :has()
Puedes combinar los poderes de selección superiores de :has() con los poderes de consulta superiores de las consultas de contenedor para crear algunos estilos intrínsecos muy dinámicos.
Vamos a ampliar el primer ejemplo con la tarjeta de cohete. ¿Qué sucedería si tuvieras una tarjeta sin imagen? Quizás quieras aumentar el tamaño del título y ajustar el diseño de cuadrícula a una sola columna para que se vea más intencional sin la imagen.
En este ejemplo, la tarjeta con una imagen tiene una plantilla de cuadrícula de dos columnas, mientras que la tarjeta sin la imagen tiene un diseño de una sola columna. Además, la tarjeta sin la imagen tiene un encabezado más grande. Para escribir esto con :has(), usa el siguiente CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Buscas un elemento con una clase de visual para aplicar el estilo de dos columnas anterior. Otra función de CSS es :not(). Esto forma parte de la misma especificación que :has(), pero existe desde hace mucho tiempo y tiene una mejor compatibilidad con navegadores. Incluso puedes combinar :has() y :not() de la siguiente manera:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
En el código anterior, escribes un selector que diseña una h1 dentro de una tarjeta que no contiene una clase visual. Así es como puedes ajustar muy claramente el tamaño de la fuente.
Revisión general
En la demostración anterior, se muestra una combinación de :has(), :not() y @container, pero las consultas de contenedores realmente se destacan cuando puedes ver que el mismo elemento se usa en varios lugares. Agreguemos un toque de estilo y mostremos estas tarjetas en una cuadrícula, una al lado de la otra.
Ahora realmente puedes ver el poder del CSS moderno. Podemos escribir estilos claros con estilos orientados que desarrollan lógica sobre la lógica y crean componentes realmente sólidos. Con estas dos potentes funciones que llegan a Chromium 105 y que están ganando impulso en la compatibilidad con varios navegadores, es un momento muy emocionante para ser desarrollador de IU.