Caderno sobre a mesa com esboço de layout de um site
Pexels/picjumbo

Atualizado em

Um dos grandes segredos no desenvolvimento de sites é saber como e quando exibir o conteúdo para promover uma boa experiência para o usuário. E, às vezes, em que situação é ideal escondê-lo. As razões podem ser diversas, como um projeto que exija ocultar a publicidade para assinantes e exibir apenas para visitantes não cadastrados. Ou que usuários de um navegador específico (Errr… estou falando de você que usar o Microsoft Edge no Linux!) vejam uma mensagem.

As formas de esconder elementos em um site também são variadas, mas cada uma tem seus prós e contras. No tutorial abaixo, vou listar três truques com CSS para ocultar qualquer coisa em uma página HTML e explicar em que ocasião é melhor usá-los.

1. Propriedade display

Essa é a alternativa mais popular quando se está tentando esconder um elemento HTML — e também a mais drástica de todas. A propriedade display, quando configurada para none, no CSS, além de ocultar o elemento principal e seus elementos secundários, previne que os mesmos sejam renderizados pelo navegador. O código-fonte ainda exibe o trecho referente ao elemento, mas, visualmente, é como se ele não existisse.

O layout da página não é afetado pela ocultação do elemento e leitores de tela, usados por pessoas com deficiência visual, não detectarão o seu conteúdo e o texto do atributo alt nas imagens.

No código abaixo, veja um exemplo de como esconder um elemento com a propriedade display.

@-moz-document url-prefix() {
  .esconder {
    display: none;
  }
}

Depois de adicionar o código acima no seu CSS, basta adicionar a classe esconder ao elemento que deseja ocultar.

2. Propriedade visibility

A propriedade visibility pode parecer bastante com o display: none, de início, mas são bastante diferentes. Ao configurar a visibilidade para hidden, o elemento é ocultado da página, mas os atributos de dimensões e espaçamento (width, height, margin, border, padding e content) ainda são respeitados pelo navegador — consequentemente, deixando um “buraco” vazio no layout. Apesar do elemento estar apenas invisível, as pseudo-classes, como hover e focus, e o conteúdo do atributo alt de imagens são afetados pela propriedade visibility da mesma forma que com a propriedade display.

Em tabelas, é possível também configurar elementos para visibility: collapse e ele se comportará da mesma forma que display: none. As outras colunas, linhas e células da tabela são redimensionadas automaticamente para ocupar o espaço do elemento ocultado.

3. Propriedade opacity

Outra forma de esconder um elemento em uma página é mudar a sua opacidade. Configurando a propriedade opacity para 0, o elemento some por completamente — usando os valores de 0.1 a 1, é possível mudar a opacidade para 10% a 100%, respectivamente. Assim como acontece com a propriedade visibility, um espaço vazio será deixado no seu lugar.

A diferença de opacity: 0 para display: none e visibility: hidden é que, mesmo com o elemento ocultado, ainda é possível interagir com o mesmo, como clicar ou exibir o conteúdo do atributo title ao repousar o cursor do mouse sobre o espaço vazio.

Leitores de tela também podem detectar o conteúdo do atributo alt de imagens dentro de um elemento configurando com opacity: 0.