Neste Dia dos Namorados, vamos comemorar o tamanho das consultas de contêiner e as unidades de consulta de contêiner disponíveis em todos os navegadores estáveis.
O amor por consultas de contêineres está no ar. Neste Dia dos Namorados, as consultas de contêiner e as unidades de consulta de contêiner 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 ser alterados com base em onde estão na interface.
As consultas de contêiner são especialmente úteis para design responsivo e componentes reutilizáveis. Por exemplo, ativar um componente card que pode ser disposto de uma forma quando colocado em uma barra lateral e em uma configuração diferente em uma grade de produtos.
Como usar consultas de contêiner
Para usar consultas de contêiner, primeiro defina a contenção em um elemento pai. Para isso, defina um container-type no contêiner pai ou use a abreviação container para atribuir um tipo e um nome simultaneamente:
.card-container {
container: card / inline-size;
}
Definir o 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 em linha da esquerda para a direita.
Agora, você pode usar esse contêiner para aplicar estilos a qualquer um dos filhos 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 refere-se a 15% do tamanho inline do contêiner. A função clamp() atribui um valor mínimo de 2 rem e máximo de 4 rem. Enquanto isso, se 15cqi estiver entre esses valores, o texto vai diminuir e aumentar de forma correspondente.
Uma consulta de contêiner "Namorados"
Para celebrar o amor de consulta de contêiner neste fim de ano, criamos um Dia dos Namorados para você aproveitar, seja qual for o navegador estável (versão mais recente) usado.
Parte da série Newly interoperável (em inglês)