As consultas de contêineres começam a ser acessadas em navegadores estáveis enquanto o polyfill recebe uma grande atualização

Una Kravets

Gerald Monaco

As consultas em contêineres chegaram!

Ótimas notícias: um dos recursos mais solicitados pelos desenvolvedores está chegando aos navegadores da Web! A partir do Chromium 105 e no Safari 16, será possível criar consultas de contêiner com base em tamanho e usar valores de unidade de consulta de contêiner nesses navegadores. Para facilitar ainda mais o uso de consultas de contêiner baseadas em tamanho e unidades de cq, a equipe do Aurora no Chrome está trabalhando duro para atualizar o Polyfill de consulta de contêiner para que seja compatível com mais navegadores e casos de uso. Assim, você se sentirá confiante para usar esse recurso eficiente hoje.

O que são consultas de contêiner?

As consultas de contêiner são um recurso CSS que permite escrever uma lógica de estilo que direciona os elementos de um elemento pai para estilizar os filhos. Você pode criar um design responsivo verdadeiramente baseado em componentes consultando o tamanho de um pai. Essas informações são muito mais detalhadas e úteis do que as consultas de mídia, que só fornecem informações de tamanho sobre a janela de visualização.

Com consultas de contêiner, é possível criar componentes reutilizáveis que podem aparecer de maneiras diferentes com base no local em que se encontram na página. Isso os torna muito mais resilientes e responsivos em páginas e modelos.

Como usar consultas de contêiner

Digamos que você tenha um HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Para usar uma consulta de contêiner, primeiro você precisa definir a contenção no elemento pai que quer acompanhar. Para fazer isso, defina a propriedade container-type ou use a abreviação container para definir o tipo e o nome do contêiner ao mesmo tempo.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Agora, você pode usar a regra @container para definir estilos com base no pai mais próximo. Para um design como a imagem acima, em que um cartão pode ir de uma coluna para duas colunas, escreva algo como:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Para ficar mais claro e explícito, dê um nome ao contêiner do elemento pai:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Em seguida, reescreva o código anterior como:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Unidades de consulta do contêiner

Para tornar as consultas de contêiner ainda mais úteis, você também pode usar valores de unidade baseados em contêiner. A tabela a seguir mostra os possíveis valores de unidade de contêiner e como eles correspondem ao tamanho de um contêiner:

Um exemplo de como usar unidades baseadas em contêiner é a tipografia responsiva. As unidades baseadas na janela de visualização (como vh, vb, vw e vi) podem ser usadas para dimensionar qualquer elemento na tela.

.card h2 {
  font-size: 15cqi;
}

Esse código fará com que o tamanho da fonte tenha 15% do tamanho inline do contêiner, o que significa que ele aumentará à medida que o tamanho inline (largura) aumentar, ou menor à medida que ele diminuir. Para ir ainda mais longe, use a função clamp() para definir um limite de tamanho mínimo e máximo para a tipografia e dimensioná-la de forma responsiva com base no tamanho do contêiner:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Agora o cabeçalho nunca ficará maior que 3rem nem menor que .5rem, mas levará 15% do tamanho in-line do contêiner.

Essa demonstração vai um pouco além e atualiza os cards mais amplos para ter um intervalo de tamanho menor, já que eles são apresentados em uma visualização de duas colunas.

O polyfill da consulta do contêiner

Como as consultas de contêiner são um recurso muito poderoso, queremos que você se sinta à vontade para incorporá-la aos seus projetos, e saiba que o suporte ao navegador é grande parte disso. Por isso, estamos trabalhando para fazer melhorias no Polyfill de consulta de contêiner. Esse polyfill tem suporte geral em:

• Firefox 69 ou superior
• Chrome 79 ou superior
• Edge 79 ou mais recente
• Safari 13.4 ou mais recente

Ele tem menos de 9 KB quando compactado e usa o ResizeObserver com o MutationObserver para oferecer suporte à sintaxe completa de consulta @container que está disponível atualmente em navegadores estáveis:

• Consultas discretas (width: 300px e min-width: 300px).
• Consultas de intervalo (200px < width < 400px e width < 400px).
• Unidades de comprimento relativo do contêiner (cqw, cqh, cqi, cqb, cqmin e cqmax) em propriedades e frames-chave.

Como usar o polyfill da consulta de contêiner

Para usar o polyfill, adicione esta tag de script ao cabeçalho do seu documento:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Você também pode usar um serviço para entregar condicionalmente o polyfill com base em User-Agent ou auto-hospedá-lo na sua própria origem.

Para ter a melhor experiência do usuário, recomendamos que, inicialmente, você use o polyfill apenas para conteúdo abaixo da dobra e use consultas @supports para substituí-lo temporariamente por um indicador de carregamento até que o polyfill esteja pronto para exibição:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Em redes e dispositivos suficientemente rápidos ou em dispositivos que suportam nativamente consultas de contêiner, esse indicador de carregamento nunca será exibido.

Novos recursos do polyfill

O polyfill atualizado é compatível com:

• Regras de @container aninhadas.
• É possível aninhar regras @container nas consultas @supports e @media e vice-versa.
• O CSS condicional, como @supports (container-type: inline-size), será transmitido após o carregamento do polyfill.
• Suporte completo à sintaxe CSS (não há mais problemas em colocar comentários em qualquer lugar em que eles sejam sintaticamente válidos).
• Modos de escrita vertical (usando o modo de escrita).
• As unidades relativas ao contêiner (cqw, cqh etc.) são compatíveis com condições de consulta, declarações de propriedade e frames-chave de animação. rem e em são compatíveis com as condições de consulta.
• Sintaxe de consulta do contêiner expandido:
  • Sintaxe de intervalo (por exemplo, (200px < width < 400px)).
  • Consultas de igualdade (por exemplo, (width = 200px)).
• Pseudoelementos, como ::before e ::after.
• Navegadores sem :is(...)/:where(...) são compatíveis com uma solução alternativa opcional
• As consultas de recurso orientation e aspect-ratio.
• Filtrar corretamente as consultas com base nos recursos. Por exemplo, não é permitido consultar height em container: inline-size com o modo de escrita horizontal.
• Mutação do DOM (por exemplo, os elementos <style> e <link> são removidos no momento da execução).

Limitações e avisos do polyfill

Se você estiver usando o polyfill de consulta de contêiner, alguns recursos precisam ser observados:

• O Shadow DOM ainda não é compatível.
• As unidades relativas ao contêiner (por exemplo, cqw e cqh) não são compatíveis com as condições de consulta @media.
  • Safari: as unidades relativas ao contêiner não são compatíveis com frames-chave de animação anteriores à versão 15.4.
• calc(), min(), max() ou outras funções matemáticas ainda não são compatíveis com as condições de consulta.
• Esse polyfill só funciona com CSS inline e de mesma origem. Não há suporte para folhas de estilo de origem cruzada e folhas de estilo em iframes (a menos que um polyfill seja carregado manualmente).
• A contenção de layout e style exige suporte subjacente a um navegador:
  • Safari 15.4 ou mais recente
  • O Firefox não oferece suporte à contenção de estilos no momento, mas está trabalhando nisso.

Avisos

• Para evitar o impacto de FID e CLS, o polyfill não garante quando o primeiro layout vai ocorrer, mesmo que seja carregado de forma síncrona. No entanto, ele tenta evitar atrasos desnecessários na LCP. Em outras palavras, nunca confie nela para a first paint.
• Gera ResizeObserver Loop Errors. O polyfill original também faz isso, mas vale a pena ressaltar. Isso ocorre porque o tamanho do bloco de uma container-type: inline-size provavelmente vai mudar após a avaliação de uma consulta, mas ResizeObserver não tem como dizer que não nos importamos com as mudanças no tamanho do bloco.
• Esse polyfill é testado em testes de plataformas da Web e alcançou 70% de aprovação, já que alguns recursos, como APIs JavaScript, não têm polyfill, e a taxa de aprovação é intencionalmente mais próxima de 70%.
• A solução alternativa :where() é necessária para os 2,23% dos usuários de navegadores anteriores a:
  • Safari 14
  • Chromium 88
  • Borda 88
  • Samsung Internet 15
  • Firefox 78