50

Sei que ambos escondem o elemento, mas existe na prática alguma diferença entre:

#foo{
  display:none;
}

e

#foo {
  visibility:hidden;
}

5 Respostas 5

50

display:none retira o elemento do layout da página. Mas você ainda pode continuar manipulando ele no DOM.

visibility:hidden deixa de mostrar o elemento, ou seja, ele deixa de ser visível na página mas seu espaço continua ocupado, ou seja, o layout da página não é alterado por causa disto. É como você apagasse uma luz ali mas a lâmpada continua lá.

1. <span style="display: none;">texto escondido</span> teste.
2. <span style="visibility: hidden;">texto escondido</span> teste.
3. <span style="opacity: 0;">texto escondido</span> teste.

Coloquei no GitHub para referência futura.

O hidden se assemelha ao opacity:0. A diferença é que o última responde a handler events.

Performance

Atendendo ao comentário do Zuul eu diria que a diferença de performance é irrisória e não deveria ser levado em consideração. Se for medir o uso de display: none teria um ganho de performance já que ele evita que o elemento seja renderizado e é óbvio que isto poupa tempo na hora de montar a render tree. display: none provavelmente causará uma nova renderização em boa parte da árvore enquanto que visibility: hidden renderizará apenas o local deste elemento sem interferir em toda a árvore.

Assim como sempre dizemos em programação que deve fazer o que precisa ser feito e de forma legível, não se preocupe com a performance. Então escolha qual dá o resultado esperado.

Como estamos falando de elementos visuais muita performance pode se tornar um problema para os olhos em algumas situações onde há muitas mudanças no layout.

Mas se tem uma animação muito complexa onde a performance pode realmente afetar, provavelmente está usando a ferramenta errada. Não se esqueça que HTML é um documento. Até dá para fazer alguma coisa mais sofisticado com ele mas usar o canvas ou um SVG pode ser uma ideia melhor à partir de um ponto.

4
  • @Zuul no CSS, o desempenho é muito mais ligado aos seletores do que às propriedades em si (tirando algumas novas do CSS3), sendo que a diferença de desempenho entre as duas (display:none e visibility:hidden) só seria sentida caso existissem centenas de milhares de elementos na tela.
    – Kazzkiq
    21/12/2014 às 0:20
  • @Zuul o que eu acho é que não importa muito porque eles produzem resultados diferentes. Se você quer reservar o espaço no layout, não pode usar o display: none.
    – Maniero
    21/12/2014 às 2:19
  • @Kazzkiq eu percebi que o site deviantart.com display: none em elementos fora do view-port, na tentativa de melhorar a performance, já que o sistema de páginação deles é semelhante ao do twitter, facebook, etc carregamento por scroll (AKA LazyLoad)
    – Syzoth
    23/12/2014 às 20:55
  • o exemplo da lâmpada foi ótimo
    – DiChrist
    25/11/2015 às 15:22
23

A diferença principal é que visibility mantém o espaço que o elemento ocupa na página e display: none; não, ou seja outros elementos podem ocupar o seu lugar.

O visibility: hidden; é mais parecido com o opacity: 0; (sendo que este ultimo permite diferentes degraus de visibilidade/opacidade).

Ambos o visibility: hidden; e o display: none; não respondem a event handlers, enquanto que o opacity permite event handlers de serem chamados.

Exemplo:

$('div').eq(0).css('opacity', 0);
$('div').eq(1).css('visibility', 'hidden');
$('div').eq(2).css('display', 'none');

$('div:not(:eq(3))').click(function(){
    $('div').eq(3).find('span').html(this.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Teste 1</div>
<div>Teste 2</div>
<div>Teste 3</div>
<div>Clicou no elemento: <span></span></div>

1
  • Vale lembrar também que para tirar a visibilidade do elemento da tela, a forma semanticamente correta seria visibility:hidden, já que ele previne também certos eventos que o opacity:0 não preveniria, como o de foco, por exemplo.
    – Kazzkiq
    21/12/2014 às 0:27
7

Se não me falta a memória o display:none retira o elemento da camada DOM, o visibility:hidden é a mesma coisa que opacity:0, apenas deixa o elemento invisível.

0
6

Além do que já foi respondido (sobre o espaço ocupado na página, e os eventos), vale lembrar que o display:none;, por retirar o elemento do contexto DOM, impede que os recursos utilizados no elemento sejam carregados na memória. (ex: Imagens, fontes, etc...) Embora o conteúdo externo seja baixado para a máquina cliente, o navegador não renderiza o conteúdo, e ele não é carregado na memória...

Já com o visibility: hidden; a ocultação é apenas visual, e todo o conteúdo ainda está sendo renderizado pelo navegador.

-2

Na verdade o "visibility: none;" além de esconder, deixar invisível ele vai retirar o elemento, que na prática, de forma visual é a mesma coisa do "visibility: hidden;", mas o "none" retira o elemento e o "hidden" apena o esconde mas ele continua lá, existe uma diferença semântica na utilização dos dois elementos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .