Propriedade visibility: Escondendo mas mantendo o espaço

Você já aprendeu sobre display: none;, que remove completamente um elemento do fluxo do documento, fazendo com que ele não ocupe espaço e não seja renderizado. A propriedade visibility oferece uma alternativa para ocultar elementos, mas com um comportamento fundamentalmente diferente: ela esconde o elemento visualmente, mas ele continua ocupando seu espaço no layout da página.

Pense na propriedade visibility como um "interruptor de luz" para o elemento. Quando você desliga a luz (visibility: hidden;), o objeto ainda está lá, ocupando seu lugar na sala, mas você não consegue vê-lo. Se você ligar a luz (visibility: visible;), ele reaparece no mesmo lugar.

Como funciona visibility

A propriedade visibility controla a visibilidade de um elemento.

Valores possíveis:

• visible (padrão): O elemento é visível.
• hidden: O elemento é ocultado, mas continua ocupando o espaço que ocuparia se estivesse visível. Outros elementos não se movem para preencher seu espaço.
• collapse: Este valor é usado principalmente para linhas ou colunas de tabelas. Para outros elementos, ele se comporta como hidden.

visibility: hidden; vs display: none;

Esta é uma comparação crucial para entender quando usar cada um:

Quando usar visibility: hidden;

• Animações e Transições: É ideal para animar a aparição/desaparição de elementos, pois o elemento já está no layout e não causa um "salto" na página. Você pode combinar com opacity para um efeito suave.
• Elementos que Mantêm o Layout: Quando você precisa que um elemento seja oculto, mas que seu espaço seja reservado para manter o layout estável. Por exemplo, em um layout de grade onde você quer que um item desapareça, mas os outros não se movam para preencher seu lugar.
• Acessibilidade (com cautela): Em alguns cenários específicos, se você precisa que um elemento seja visualmente oculto, mas ainda acessível por leitores de tela, visibility: hidden; pode ser uma opção. No entanto, é preciso ter cuidado, pois a experiência pode ser confusa para o usuário de leitor de tela se ele interagir com algo que não está visível. Outras técnicas de acessibilidade (como mover para fora da tela) são geralmente preferíveis.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Visibility</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .box {
      width: 150px;
      height: 80px;
      background-color: lightblue;
      border: 1px solid blue;
      margin: 10px;
      text-align: center;
      line-height: 80px;
      color: #333;
      font-weight: bold;
      display: inline-block;
    }

    .hidden-visibility-box {
      visibility: hidden; /* Este elemento será oculto, mas ocupará espaço */
      background-color: lightcoral; /* A cor não será vista */
    }

    .hidden-display-box {
      display: none; /* Este elemento será completamente oculto */
      background-color: lightgreen; /* A cor não será vista */
    }

    .message {
      background-color: lightgoldenrodyellow;
      border: 1px solid orange;
      padding: 15px;
      margin: 20px 0;
      text-align: center;
      font-weight: bold;
      visibility: hidden; /* Oculto por padrão */
      opacity: 0; /* Para transição suave */
      transition: visibility 0s 0.5s, opacity 0.5s linear; /* Transição */
    }

    .message.show {
      visibility: visible;
      opacity: 1;
      transition: visibility 0s, opacity 0.5s linear;
    }

    .show-message-button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h2>Comparação: `visibility: hidden;` vs `display: none;`</h2>

  <div class="box">Caixa Visível 1</div>
  <div class="box hidden-visibility-box">Caixa Oculta (Visibility)</div>
  <div class="box">Caixa Visível 2</div>

  <p>Observe que a "Caixa Oculta (Visibility)" não é visível, mas **ocupa espaço**, fazendo com que a "Caixa Visível 2" se posicione após o espaço reservado.</p>

  <div class="box">Caixa Visível 3</div>
  <div class="box hidden-display-box">Caixa Oculta (Display)</div>
  <div class="box">Caixa Visível 4</div>

  <p>Observe que a "Caixa Oculta (Display)" não é visível e **não ocupa espaço**, fazendo com que a "Caixa Visível 4" se posicione logo após a "Caixa Visível 3".</p>

  <hr>

  <h2>Exemplo com Animação (`visibility` + `opacity`)</h2>
  <button class="show-message-button" onclick="document.getElementById('animatedMessage').classList.toggle('show');">Alternar Mensagem</button>

  <div id="animatedMessage" class="message">
    Esta mensagem aparece e desaparece suavemente!
  </div>

  <p>Este parágrafo está abaixo da mensagem. Note que o layout não "salta" quando a mensagem aparece/desaparece, pois o espaço dela é sempre reservado.</p>
</body>
</html>

Resultado:

• No primeiro conjunto de caixas, você verá um espaço vazio onde a "Caixa Oculta (Visibility)" estaria.
• No segundo conjunto, não haverá espaço vazio para a "Caixa Oculta (Display)".
• Ao clicar no botão "Alternar Mensagem", a mensagem aparecerá e desaparecerá suavemente, sem causar um "salto" no layout, pois o espaço para ela é sempre reservado.

Boas Práticas:

• Escolha Consciente: Entenda a diferença fundamental entre display: none; e visibility: hidden; e escolha a propriedade certa para cada cenário.
• Animações: Para transições e animações de visibilidade, visibility: hidden; combinado com opacity: 0; é a abordagem preferida.
• Acessibilidade: Se um elemento precisa ser visualmente oculto, mas ainda acessível por leitores de tela, visibility: hidden; pode ser uma opção, mas outras técnicas (como mover para fora da tela com position: absolute; left: -9999px;) são geralmente mais robustas para garantir a acessibilidade.
• Performance: display: none; é mais performático para ocultar grandes seções da página, pois o navegador não precisa renderizá-las. visibility: hidden; ainda exige que o navegador calcule o layout do elemento, mesmo que não o pinte.

Dominar a propriedade visibility permite um controle mais refinado sobre a apresentação dos seus elementos, especialmente quando você precisa ocultá-los sem perturbar o layout geral da página ou quando deseja animar sua aparição/desaparição.