Consultas em contêiner

Com as consultas de mídia, é possível ajustar layouts com base no tamanho da janela de visualização ou no tipo de dispositivo usado. Com as consultas de contêiner, é possível fazer ajustes mais específicos nos elementos com base no tamanho e no estado dos ancestrais ou contêineres deles.

Imagine que você tenha um formulário de inscrição na newsletter que pode ser usado em vários contextos no seu site. Talvez você queira que ele ocupe toda a largura da página em uma página de inscrição, mas entre em uma coluna dividida em uma página com outro conteúdo.

Como mostrado nesta demonstração, com as consultas de contêiner, é possível ajustar as propriedades, como tamanho da fonte, padding e layout do elemento com base nos atributos do contêiner mais próximo, independente do tamanho da janela de visualização.

Como configurar uma consulta de contêiner

Ao contrário das consultas de mídia, as consultas de contêiner são estabelecidas em duas partes:

1. Defina um contêiner.
2. Escreva estilos para um elemento filho que serão aplicados quando um contêiner pai corresponder às condições da consulta.

Como definir um contêiner

É possível definir um contêiner usando a propriedade container-type.

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

Um container-type de inline-size permite consultar o eixo inline do contêiner.

Para consultar os eixos inline e block, use container-type: size.

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

Os dois valores de container-type aplicam diferentes tipos de restrição de tamanho. O isolamento Inline-size em um elemento impede que os descendentes dele afetem o tamanho inline.

Um elemento com contenção size impede que os descendentes afetem o tamanho dele nos eixos de bloco e inline.

Neste exemplo, é possível ver como o isolamento de tamanho pode afetar o elemento em que é aplicado.

Como ele não será dimensionado com base no tamanho dos filhos (o elemento <p>), o contêiner será recolhido, a menos que receba um tamanho explícito definindo as dimensões (ou seja, inline-size, block-size, aspect-ratio) ou colocando-o em um layout de tamanho explícito.

Condições de consulta de contêiner

Depois que um contêiner é estabelecido, você pode adicionar uma condição, entre parênteses, que precisa ser verdadeira para que os estilos dentro da consulta de contêiner sejam aplicados. Para consultas de tamanho do contêiner, que são baseadas nas dimensões dos elementos ancestrais, a condição é composta do seguinte:

• um recurso de tamanho: width, height, inline-size, block-size, aspect-ratio ou orientation;
• um operador de comparação (ou seja, >, <, =, >=),
• e um valor de comprimento.

.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 */
  }
}

As condições de atributo de tamanho também podem ser escritas com dois pontos e um único valor para teste.

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

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

Também é possível combinar várias condições usando palavras-chave como and e or ou encadeando várias condições com operadores.

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

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

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

Como nomear contêineres

Para segmentar contêineres específicos, mesmo que eles não sejam o ancestral mais próximo, você pode nomeá-los com a propriedade container-name. Em seguida, você pode consultar o nome do contêiner antes de definir as condições.

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

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

O contêiner nomeado ainda precisa ser um ancestral dos elementos que estão sendo estilizados.

Usar a abreviação com a propriedade container

A propriedade container permite usar uma sintaxe abreviada para definir um contêiner e especificar o tipo dele.

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

O nome do contêiner vem antes da barra, e o tipo vem depois.

Unidades de consulta de contêiner

Nos contêineres, você também tem acesso a unidades de comprimento relativas. Isso oferece mais flexibilidade para componentes que podem existir em contêineres diferentes, já que os comprimentos relativos se ajustam de acordo com as dimensões do contêiner.

Aqui, a unidade de comprimento do contêiner cqi (1% do tamanho inline de um contêiner de consulta) está sendo usada para o padding do botão.

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

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Os dois botões têm as mesmas unidades relativas aplicadas, mas como as unidades são relativas ao tamanho do contêiner, o segundo botão tem mais padding devido ao contêiner maior.

Como aninhar consultas de contêiner

É possível aninhar consultas de contêineres dentro de seletores.

.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 */
  }
}

Ou aninhe-as dentro de outras consultas de contêiner ou at-rules.

@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 */
    }
  }
}

Teste seu conhecimento