Resumo

  • O primeiro rascunho público de CSS Containment Level 3, publicado pelo W3C em 21 de dezembro de 2021, separou consultas ao ambiente de exibição das consultas aos elementos internos do documento. container-type estabelece a caixa consultável; @container condiciona os estilos dos descendentes.
  • O rascunho de 18 de agosto de 2022 refinou os tipos de contêiner, os nomes e as unidades relativas. Seu exemplo usa a área principal e a barra lateral para mostrar uma peça que muda de disposição conforme a largura local.

O cartão chegou pronto para a coluna principal. A foto ficava à esquerda e o título à direita, como numa pequena capa de revista. Bastou movê-lo para a lateral para que tudo se espremesse. Uma consulta de mídia olhava a janela inteira do navegador: grande, espaçosa, excelente notícia. Para o cartão, que acabara de entrar num corredor estreito, a notícia vinha do endereço errado. A largura da tela não era a largura do lugar onde ele morava.

O primeiro rascunho público do W3C, de 21 de dezembro de 2021, explicou a diferença entre essas perguntas. Consultas de mídia tratam do ambiente do dispositivo ou do navegador, como a largura da área de visualização. Consultas de contêiner examinam aspectos dos elementos da própria página. Um componente reaproveitado pode aparecer duas vezes na mesma tela, com espaço abundante numa posição e apertado na outra. Cada cópia precisa ouvir a medida da sua caixa.

O autor define um ancestral adequado com container-type. As regras dentro de @container se aplicam aos descendentes quando a condição desse contêiner é satisfeita. Assim a imagem e o texto podem ocupar a mesma linha no espaço largo e formar uma coluna no estreito. A janela do navegador continua igual; as instâncias do componente respondem a lugares diferentes. A editora escolhe onde pôr a peça. O navegador mede cada encaixe.

A medida precisa de um limite confiável. Imagine que o tamanho da caixa dependa do arranjo dos filhos e que os filhos escolham o arranjo perguntando pelo tamanho da caixa. É uma fita métrica tentando medir a si mesma. Uma demonstração do W3C em 2021 apresentou a necessidade de definir contêineres e controlar a influência do conteúdo no seu dimensionamento. Com a fronteira estabelecida, a largura local vira dado utilizável para as regras dos descendentes.

O rascunho de trabalho de 18 de agosto de 2022 trouxe um exemplo quase feito para essa página: um objeto de mídia passa do arranjo vertical ao horizontal quando ocupa a área principal ou a barra lateral, conforme o tamanho do contêiner. container-type: inline-size habilita a consulta no eixo em linha; um nome de contêiner pode indicar qual ancestral consultar. O @container condiciona os estilos dos descendentes àquela caixa elegível. O cartão deixa de receber palpites sobre a largura total da tela.

Unidades como cqw e cqi dão aos detalhes proporções ligadas à largura ou ao tamanho em linha do contêiner. O cartão leva suas medidas consigo ao mudar de coluna. O blog do grupo CSS do W3C apresentou a atualização reunindo confinamento no eixo em linha, a regra e as unidades necessárias às consultas.

O vocabulário também passou pelo provador. O texto de 2021 explorava opções como block-size e state; a revisão de 2022 retirou a opção block-size de um eixo só e ajustou valores iniciais e abreviações. O histórico de publicações marca dezembro de 2021 e agosto de 2022 como etapas desse trabalho. A ideia permaneceu: um componente pergunta pela dimensão do lugar que o contém, e a especificação foi aparando a maneira de formular essa pergunta.

O cartão não precisou escolher entre ser bonito na capa ou útil na lateral. O CSS passou a medir o espaço oferecido em cada lugar. A coluna estreita continuou estreita, mas deixou de receber uma peça vestida para um salão.