Consultas de contenedores

Con las consultas de medios, puedes ajustar los diseños según el tamaño de la ventana gráfica o el tipo de dispositivo que se usa. Las consultas de contenedor te permiten realizar ajustes más específicos en los elementos según el tamaño y el estado de sus elementos superiores o contenedores.

Imagina que tienes un formulario de registro en el boletín informativo que se puede usar en varios contextos de tu sitio. Es posible que quieras que abarque todo el ancho de la página en una página de registro, pero que se divida en una columna en una página con otro contenido.

Como se muestra en esta demostración, con las consultas de contenedor, puedes ajustar las propiedades, como font-size, padding y el diseño del elemento según los atributos de su contenedor más cercano, independientemente del tamaño de la ventana gráfica.

Cómo configurar una consulta de contenedor

A diferencia de las consultas de medios, las consultas de contenedores se establecen en dos partes:

1. Define un contenedor.
2. Escribe estilos para un elemento secundario que se aplicarán cuando un contenedor principal coincida con las condiciones de la consulta.

Cómo definir un contenedor

Puedes definir un contenedor con la propiedad container-type.

.my-container-element {
  container-type: inline-size;
}

Un container-type de inline-size te permite consultar el eje intercalado del contenedor.

Para consultar los ejes inline y block, usa container-type: size.

main,
.my-component {
  container-type: size;
}

Ambos valores de container-type aplican diferentes tipos de contención de tamaño. La contención Inline-size en un elemento evita que sus descendientes afecten su inline-size.

Un elemento con contención size evita que sus descendientes afecten su tamaño en los ejes de bloque y en línea.

En este ejemplo, puedes ver que la contención de tamaño puede afectar el elemento en el que se aplica.

Como no se dimensionará en función del tamaño de sus elementos secundarios (el elemento <p>), el contenedor se contraerá, a menos que se le asigne un tamaño explícito configurando sus dimensiones (es decir, inline-size, block-size, aspect-ratio) o colocándolo en un diseño con un tamaño explícito.

Condiciones de las consultas de contenedores

Una vez que se establece un contenedor, puedes agregar una condición, entre paréntesis, que debe ser verdadera para que se apliquen los estilos dentro de la consulta de contenedor. En el caso de las consultas de tamaño del contenedor, que se basan en las dimensiones de los elementos principales, la condición se compone de lo siguiente:

• Una función de tamaño: width, height, inline-size, block-size, aspect-ratio o orientation
• un operador de comparación (es decir, >, <, =, >=)
• y un valor de longitud.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Las condiciones de atributos de tamaño también se pueden escribir con dos puntos y un solo valor para probar.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

También puedes combinar varias condiciones con palabras clave como and y or, o bien encadenar varias condiciones con operadores.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Cómo asignar nombres a los contenedores

Para segmentar contenedores específicos, incluso si no son el ancestro más cercano, puedes asignarles nombres con la propiedad container-name. Luego, puedes hacer referencia al nombre del contenedor que deseas consultar antes de definir tus condiciones.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

El contenedor con nombre debe seguir siendo un elemento superior de los elementos a los que se les aplica el diseño.

Usa la abreviatura con la propiedad container

La propiedad container te permite usar una sintaxis abreviada para definir un contenedor y especificar su tipo.

.sidebar {
  container: main-sidebar / inline-size;
}

El nombre del contenedor aparece antes de la barra, y el tipo de contenedor, después.

Unidades de consulta de contenedor

Dentro de los contenedores, también tienes acceso a las unidades de longitud relativas del contenedor. Esto proporciona más flexibilidad para los componentes que pueden existir en diferentes contenedores, ya que las longitudes relativas se ajustarán según las dimensiones del contenedor.

Aquí, la unidad de longitud del contenedor cqi (el 1% del tamaño intercalado de un contenedor de consultas) se usa para el padding del botón.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Ambos botones tienen aplicadas las mismas unidades relativas, pero, como las unidades son relativas al tamaño del contenedor, el segundo botón tiene más padding debido a su contenedor más grande.

Anidamiento de consultas de contenedor

Puedes anidar consultas de contenedores dentro de selectores.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

También puedes anidarlas dentro de otras consultas de contenedor o reglas @.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Verifica tus conocimientos