As consultas de contêiner chegam em navegadores estáveis

Neste Dia dos Namorados, celebraremos as consultas de contêineres de tamanho e as unidades de consulta de contêineres que chegam em todos os navegadores estáveis.

Una Kravets

A paixão por consultas em contêineres está no ar! Neste Dia dos Namorados, as consultas de contêineres e unidades de consulta de contêineres estão estáveis em todos os navegadores modernos.

Com consultas de contêiner, é possível consultar as informações de estilo de um elemento pai, como o inline-size. Com as consultas de mídia, é possível consultar o tamanho da janela de visualização. As consultas de contêiner ativam componentes que podem mudar com base em onde eles estão na interface.

As consultas em contêineres são especialmente úteis para design responsivo e componentes reutilizáveis. Por exemplo, ativar um componente de card que pode ser disposto de uma maneira quando colocado em uma barra lateral e em uma configuração diferente em uma grade de produtos.

Usar consultas de contêiner

Para usar consultas de contêiner, primeiro defina a contenção em um elemento pai. Para fazer isso, defina um container-type no contêiner pai ou use a abreviação container para fornecer um tipo e um nome simultaneamente:

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

Definir a container-type como inline-size consulta o tamanho da direção in-line do pai. Em idiomas latinos, como o inglês, essa seria a largura do card, já que o texto flui da esquerda para a direita.

Agora, é possível usar esse contêiner para aplicar estilos a qualquer um dos filhos dele usando @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Além disso, é possível usar os valores de unidade de tamanho da consulta do contêiner da mesma forma que você usaria os valores de unidade com base na janela de visualização. A diferença é que as unidades do contêiner correspondem ao contêiner e não à janela de visualização. O exemplo a seguir demonstra a tipografia responsiva usando unidades de consulta de contêiner e a função clamp() para fornecer um valor de tamanho mínimo e máximo:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

O 15cqi acima se refere a 15% do tamanho inline do contêiner. A função clamp() oferece um valor mínimo de 2rem e um máximo de 4rem. Enquanto isso, se 15cqi estiver entre esses valores, o texto será reduzido e aumentado proporcionalmente.

Uma consulta de contêiner Dia dos Namorados

Para comemorar o amor das consultas de contêiner neste feriado, criamos um Dia de São Valentim para vocês aproveitarem, independentemente do navegador estável (versão mais recente) em que você esteja visualizando.