Documentação: Propriedade CSS content-visibility

O que é content-visibility?

A propriedade content-visibility é uma funcionalidade CSS que permite controlar a renderização de elementos na página, melhorando o desempenho ao adiar a renderização de conteúdos que não estão visíveis no viewport (área visível da tela). Isso é especialmente útil em páginas com muito conteúdo, como longas listas ou artigos extensos.

Sintaxe

.elemento {
  content-visibility: auto | visible | hidden;
}

Valores Possíveis

1. auto:

   • O navegador otimiza a renderização do elemento.
   • Se o elemento estiver fora do viewport, o navegador não renderiza seu conteúdo, mas mantém o layout (tamanho e posição).
   • Quando o elemento entra no viewport, o conteúdo é renderizado.

2. visible:

   • Comportamento padrão. O conteúdo do elemento é renderizado normalmente, sem otimizações.

3. hidden:

   • O conteúdo do elemento é ocultado e não é renderizado.
   • O layout do elemento é mantido, mas o conteúdo não é exibido.

Como Funciona?

• Quando content-visibility: auto é aplicado a um elemento, o navegador faz o seguinte:

  1. Verifica se o elemento está dentro do viewport.
  2. Se estiver fora do viewport, o navegador pula a renderização do conteúdo, mas mantém o layout (tamanho e posição) para evitar mudanças bruscas ao rolar a página.
  3. Quando o elemento entra no viewport (por exemplo, ao rolar a página), o conteúdo é renderizado dinamicamente.

• Isso reduz o trabalho inicial de renderização, melhorando o desempenho e o tempo de carregamento da página.

Benefícios

• Melhoria de desempenho: Reduz o tempo de renderização inicial, especialmente em páginas com muito conteúdo.
• Otimização de recursos: O navegador não gasta recursos renderizando elementos que não estão visíveis.
• Experiência do usuário: Mantém a suavidade ao rolar a página, evitando travamentos.

Exemplo de Uso

Aqui está um exemplo prático de como usar content-visibility:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- Muitos outros itens -->
</div>

.item {
  content-visibility: auto;
  contain-intrinsic-size: 100px 50px; /* Define um tamanho intrínseco para o layout */
}

Explicação do Exemplo

• Cada .item terá sua renderização adiada se estiver fora do viewport.
• A propriedade contain-intrinsic-size é usada para definir um tamanho aproximado do elemento, evitando mudanças bruscas no layout ao rolar a página.

Propriedade Relacionada: contain-intrinsic-size

• A propriedade contain-intrinsic-size é usada em conjunto com content-visibility para definir um tamanho intrínseco para o elemento.
• Isso ajuda o navegador a manter o layout correto, mesmo quando o conteúdo ainda não foi renderizado.

Sintaxe

.elemento {
  contain-intrinsic-size: largura altura;
}

Exemplo

.item {
  content-visibility: auto;
  contain-intrinsic-size: 200px 100px; /* Define um tamanho intrínseco de 200x100 pixels */
}

Casos de Uso

1. Listas longas:

   • Use content-visibility: auto em itens de listas longas para melhorar o desempenho ao rolar.

2. Páginas com muito conteúdo:

   • Aplique content-visibility em seções que não estão visíveis inicialmente.

3. Conteúdo dinâmico:

   • Use content-visibility: hidden para ocultar temporariamente elementos que serão exibidos posteriormente.

Compatibilidade

• A propriedade content-visibility é suportada na maioria dos navegadores modernos, como Chrome, Edge e Firefox.
• Verifique a compatibilidade no Can I Use antes de usar em produção.

Considerações Finais

• Teste sempre: Embora content-visibility melhore o desempenho, é importante testar em diferentes dispositivos e navegadores.
• Combine com outras técnicas: Use junto com lazy loading de imagens e outras otimizações para obter o máximo de desempenho.