Display: none, opacity: 0 e visibility: hidden

Continuando a saga das dúvidas e temores em CSS, hoje trago um assunto que foi sugerido por um colega um tempo atrás. Bora direto falar sobre como display: none, visibility: hidden e opacity: 0 atuam no CSS pra dar aquela escondida nos elementos do seu layout!

Sumário
Display: none
Visibility: hidden
Opacity: 0
Casos de uso

Display: none

Em um outro artigo que escrevi por aqui, a gente entendeu que o display identifica como vai ser a renderização dos elementos na tela, sendo que o browser por si só já tem block e inline como displays padrões. O fato é que todo elemento renderizado em tela vai ter um display específico, e se você não atribuir um, ele vai assumir um dos padrões do browser.

A partir daqui, fica fácil a gente identificar o que acontece se você definir que um certo elemento não vai ter nenhum display: o elemento vai sumir da tela. E é exatamente isso que o display: none faz!

Mais do que fazer o elemento sumir da tela, o display: none vai fazer com que esse elemento sequer seja renderizado no DOM. Ou seja, esse elemento simplesmente não vai existir na árvore de elementos do seu HTML e só vai ser renderizado quando você mudar a propriedade display pra algum outro valor.

Logo:

• display: none remove o elemento (e seus filhos) do DOM; e
• como esse elemento deixa de existir no HTML, ele também deixa de ocupar espaço no layout.

Visibility: hidden

A propriedade e seu valor aqui já dizem de cara o que ela faz: ela altera a visibilidade do elemento, deixando-o escondido (hidden, em inglês).

Porém, ao contrário do display: none, o elemento com visibility: hidden permanece na sua árvore de elementos do HTML, então mesmo que ele não apareça na página, ele continua ocupando o espaço reservado pra ele no seu layout.

Uma outra característica do visibility: hidden é que, por ele estar invisível na tela, esse elemento perde sua interatividade (o que faz total sentido), ou seja, se ele tiver um evento de clique, por exemplo, você não conseguirá usar esse clique até que você mude a visibilidade dele para visible.

Logo:

• visibility: hidden esconde o elemento na tela, mas não o remove do DOM;
• por ainda estar no DOM, apesar de invisível, o elemento ainda ocupa espaço na tela; e
• por estarem invisíveis, os elementos não são interativos, ou seja, o usuário não pode manipulá-los em tela.

Opacity: 0

O opacity: 0 talvez seja o que gere mais confusão na cabeça da galera porque, visualmente, ele não possui diferença alguma do visibility: hidden: o elemento continua não sendo visto no seu layout, mas o espaço que ele ocupa permanece no seu layout e o elemento em si continua presente no seu HTML. Então, o que muda?

A grande diferença aqui é que, enquanto o visibility: hidden de fato esconde o seu elemento da tela, o opacity: 0 apenas aplica uma transparência total no elemento. Ou seja, ele ainda está na sua página, só que transparente.

E como esse elemento ainda está ali no seu layout (apesar de você não conseguir vê-lo), ele ainda mantém sua interatividade! Então, se esse elemento tiver um evento de clique, mesmo com ele transparente na página, ainda é possível ativar tal evento.

Logo:

• opacity: 0 não possui diferença visual em relação à visibility: hidden;
• no entanto, o elemento é interativo, ou seja, o usuário pode interagir com ele (afinal, ele não está invisível, está apenas transparente).

Casos de uso

Os casos de uso de cada propriedade aqui variam muito entre os desenvolvedores, mas alguns usos mais gerais e comuns são:

• Use display: none quando quiser que algo fique totalmente inacessível no seu HTML até que você diga o contrário. Ex: fechar uma modal ou popup, remover da tela um item de todo list que foi concluído. O uso de visibility: hidden ou opacity: 0 nesses elementos pode causar espaçamentos e comportamentos estranhos na sua página;
• Use visibility: hidden em combinação com opacity: 0 quando quiser fazer animações em menus e links, por exemplo, pois a propriedade display não permite adicionar transições suaves nos elementos que aparecem e desaparecem, o efeito é totalmente brusco.

Para entender um pouco melhor esses comportamentos, experimente o Codepen abaixo à vontade:

Vale ressaltar a importância em relação à Acessibilidade: os elementos com display: none e visibility: hidden são totalmente ignorados pelos aplicativos leitores de tela, enquanto que elementos com opacity: 0 são reconhecidos por eles. Fique atento ao correto uso dessas propriedades também quando se deparar com esse quesito! 😉

E a dica de milhões: caso você queira deixar algo totalmente escondido da tela, mas ainda permitir que os leitores de tela reconheçam esses elementos, sugiro criar no seu CSS a classe abaixo, cujo código foi extraído do Tailwind.

.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Essa classe vai usar todos os artifícios possíveis pra garantir que o elemento não esteja visível na tela, mas continue sendo acessado pelos leitores, como o NVDA. É um código muito útil quando você quer fazer um formulário sem labels visíveis, por exemplo: as labels estão no código, elas serão lidas para cada input, mas elas não estarão visíveis.

Espero que esse artigo te traga alguma luz sobre o assunto, jovem Padawan! Um xero!

Fontes:

• W3Schools
• FreeCodeCamp
• Tailwind