CSS Academy · Aula

Visibility vs Display None

Aprenda quando usar visibility: hidden em vez de display: none e como cada opção afeta o layout.

Visibility vs Display None é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Três maneiras de ocultar elementos

O CSS fornece três métodos comuns para ocultar elementos, cada um com efeitos diferentes no layout, na acessibilidade e na interação:

display: none
visibility: hidden
opacity: 0

display: none

O elemento é completamente removido do layout. Ele não ocupa espaço, não é interativo e não é lido por leitores de tela na maioria das implementações. O elemento ainda existe no DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

O elemento fica invisível, mas ainda ocupa espaço no layout. Não é possível clicar nele, e ele não é lido por leitores de tela. É uma boa opção para ocultar algo sem causar deslocamentos no layout.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

O elemento fica invisível, mas totalmente interativo. Ele continua ocupando espaço e respondendo a eventos, como cliques e passagens do cursor. Os leitores de tela ainda podem lê-lo.

<button class="transparent">Invisible but clickable</button>

Substituição de visibility: visible

Um elemento filho pode substituir o visibility: hidden do elemento pai definindo visibility: visible. Isso não é possível com display: none: os elementos filhos o herdam de forma absoluta.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Tabela comparativa

Referência rápida:

display: none: sem espaço, sem cliques, não é lido
visibility: hidden: ocupa espaço, sem cliques, não é lido
opacity: 0: ocupa espaço, continua clicável, pode ser lido

Transicionando visibility

display não pode ser transicionado. Para fazer os elementos aparecerem ou desaparecerem gradualmente, combine visibility com opacity:

<div class="dropdown open">Dropdown menu content</div>

Ocultação acessível com SR-only

O padrão somente para leitores de tela oculta o conteúdo visualmente, mas mantém seu acesso pela tecnologia assistiva:

<button>Save <span class="sr-only">your document now</span></button>

Atributo hidden versus CSS

O atributo hidden do HTML aplica display: none por meio da folha de estilos do agente do usuário do navegador. Ele é acessível e semântico, mas pode ser substituído pela especificidade do CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden ignora a renderização de seções fora da tela, mas preserva a árvore de acessibilidade e o layout. É uma técnica moderna de desempenho para páginas longas.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Para manter um elemento visível, mas não interativo, use pointer-events: none. Os cliques e as passagens do cursor atravessam o elemento e chegam aos elementos abaixo dele.

<div class="overlay">Clicks pass through this overlay</div>

Verificação rápida

Qual técnica oculta um elemento preservando o espaço de layout que ele ocupa?

Recapitulação

display: none remove completamente um elemento do layout. visibility: hidden o oculta preservando o espaço. opacity: 0 o oculta, mas mantém sua interatividade. Para ocultação acessível, use o padrão .sr-only. Combine visibility e opacity para criar transições graduais.

Perguntas Frequentes

A aula “Visibility vs Display None” é grátis?

Sim — o texto completo de “Visibility vs Display None” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Visibility vs Display None”?

Aprenda quando usar visibility: hidden em vez de display: none e como cada opção afeta o layout. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Visibility vs Display None”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy