Content visibility e seções longas

content-visibility é uma propriedade CSS que permite ao navegador adiar style, layout e pintura de conteúdo que está fora da viewport. Ela é útil para uma página com muitas seções, cards ou notificações que continuam presentes no DOM, mas não precisam ser desenhadas imediatamente.

Ela não é o mesmo que:

• Virtual DOM: estratégia de atualização de frameworks e bibliotecas.
• Virtualização: mantém somente uma janela de itens no DOM.
• Paginação: divide os dados em páginas menores.
• Lazy loading: adia carregamento de código, dados ou recursos.

content-visibility não impede a criação dos filhos de um slot e não limita a quantidade de linhas de uma tabela. Para coleções grandes, combine paginação ou virtualização controlada pelo consumidor com esta técnica no container visual.

Uso recomendado

Aplique a propriedade em uma seção relativamente grande, criada pela aplicação, e forneça uma estimativa de tamanho para evitar mudanças bruscas de layout:

.secao-extensa {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
}

O valor de contain-intrinsic-size deve representar a altura típica da seção. Calibre-o com conteúdo real: uma estimativa muito pequena provoca deslocamento quando a seção é revelada; uma estimativa muito grande deixa espaços vazios.

Exemplo com conteúdo projetado em componentes:

<section class="secao-extensa" aria-labelledby="avisos-titulo">
  <h2 id="avisos-titulo">Avisos recentes</h2>
  <div class="cards">
    <br-card>...</br-card>
    <br-card>...</br-card>
  </div>
</section>

O mesmo CSS pode ser usado em React, Angular, Vue ou JavaScript. Não é necessário adicionar bindings ou propriedades aos wrappers.

Quando não usar

Evite aplicar a propriedade diretamente a componentes individuais pequenos, focáveis ou usados como referência de layout. Não use como substituto para:

• br-table com milhares de linhas: use paginação ou janela virtual no consumidor;
• br-list, br-notification ou br-carousel com dados extensos: controle a janela de conteúdo na aplicação;
• br-select com muitas opções: use a janela virtual interna e busca remota;
• overlays, dropdowns, tooltips, modais e scrims posicionados;
• regiões aria-live que precisam anunciar mudanças imediatamente;
• elementos sticky ou conteúdos cuja geometria é medida durante a interação;
• conteúdo que precisa estar pronto para impressão ou medição síncrona sem uma verificação específica.

Oculte somente uma região que possa ser revelada naturalmente pela rolagem. Não remova o conteúdo, não use display: none para simular a técnica e não coloque aria-hidden="true" em elementos que continuam focáveis.

Checklist de validação

Depois de aplicar a propriedade, valide a página no navegador real:

• navegue até a seção usando teclado, âncora e busca na página;
• confirme que o foco continua visível e que a ordem de tabulação não muda;
• teste leitor de tela, aria-live, zoom de 200% e viewport de 320px;
• confira impressão, screenshots e navegação direta para IDs internos;
• observe deslocamento de layout quando a seção entra na viewport;
• meça quantidade de nós e layout/pintura antes e depois, sem usar apenas tempo de relógio;
• remova a propriedade para confirmar que existe um fallback funcional.

Para br-table, consulte a orientação de paginação e virtualização no consumidor. Para dados carregados de forma incremental, consulte o guia de dados remotos.