Sei que ambos escondem o elemento, mas existe na prática alguma diferença entre:
#foo{
display:none;
}
e
#foo {
visibility:hidden;
}
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.
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.
display:none
e visibility:hidden
) só seria sentida caso existissem centenas de milhares de elementos na tela.
display: none
.
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)
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>
visibility:hidden
, já que ele previne também certos eventos que o opacity:0
não preveniria, como o de foco, por exemplo.
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.
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.
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.