Respostas:
display:nonesignifica que a tag em questão não aparecerá na página (embora você ainda possa interagir com ela por meio do dom). Não haverá espaço alocado para ele entre as outras tags.
visibility:hiddensignifica que display:none, diferentemente , a tag não está visível, mas o espaço é alocado na página. A tag é renderizada, apenas não é vista na página.
Por exemplo:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | testSubstituindo [style-tag-value]pordisplay:noneresultados em:
test | | testSubstituindo [style-tag-value]pelos visibility:hiddenresultados em:
test | | testvisibility: hiddene display: noneterá um desempenho igualmente excelente, pois ambos recuperam o layout, pintam e compõem. No entanto, opacity: 0é funcionalmente equivalente visibility: hiddene não reativa a etapa de layout, por isso aconselho usar isso se você não se importar com o espaço vazio ainda sendo alocado (caso contrário, use display: none).
opacity: 0deve ser usado com cuidado ao lidar com entradas ou botões, pois eles ainda existiriam e possivelmente causariam interações estranhas do usuário.
Eles não são sinônimos.
display:none remove o elemento do fluxo normal da página, permitindo que outros elementos sejam preenchidos.
visibility:hidden deixa o elemento no fluxo normal da página, que ainda ocupa espaço.
Imagine que você está na fila para dar uma volta em um parque de diversões e alguém na fila fica tão turbulento que a segurança os tira da fila. Todos na fila avançarão uma posição para preencher o slot agora vazio. Isto é como display:none.
Compare isso com a situação semelhante, mas alguém na sua frente coloca uma capa de invisibilidade. Ao visualizar a linha, parecerá que há um espaço vazio, mas as pessoas não podem realmente preencher esse espaço vazio porque alguém ainda está lá. Isto é como visibility:hidden.
Uma coisa que vale a pena acrescentar, embora não tenha sido perguntada, é que existe uma terceira opção de tornar o objeto completamente transparente. Considerar:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.(Clique no botão "Executar trecho de código" acima para ver o resultado).
A diferença entre 1 e 2 já foi apontada (ou seja, 2 ainda ocupa espaço). No entanto, há uma diferença entre 2 e 3: no caso 3, o mouse ainda mudará para a mão ao passar o mouse sobre o link, e o usuário ainda poderá clicar no link e os eventos Javascript ainda serão acionados no link. Normalmente, esse não é o comportamento que você deseja (mas às vezes é?).
Outra diferença é que, se você selecionar o texto e copiar / colar como texto sem formatação, obterá o seguinte:
1st link.
2nd link.
3rd unseen link.No caso 3, o texto é copiado. Talvez isso seja útil para algum tipo de marca d'água ou se você deseja ocultar um aviso de direitos autorais que apareceria se um usuário descuidado copiar / colar seu conteúdo?
Há uma grande diferença quando se trata de nós filhos. Por exemplo: Se você possui uma div pai e uma div filho aninhada. Então, se você escrever assim:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>Nesse caso, nenhuma das divs estará visível. Mas se você escrever assim:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>A div filho ficará visível, enquanto a div pai não será mostrada.
display: none remove o elemento completamente da página e a página é criada como se o elemento não estivesse lá.
Visibility: hidden deixa o espaço no fluxo do documento, mesmo que você não possa mais vê-lo.
Isso pode ou não fazer uma grande diferença, dependendo do que você está fazendo.
Com visibility:hiddeno objeto ainda ocupa a altura vertical na página. Com display:noneele é completamente removido. Se você tiver um texto abaixo de uma imagem e o fizer display:none, esse texto será alterado para preencher o espaço em que a imagem estava. Se você tiver visibilidade: oculto, o texto permanecerá no mesmo local.
Além de todas as outras respostas, há uma diferença importante para o IE8: se você usar display:nonee tentar obter a largura ou a altura do elemento, o IE8 retornará 0 (enquanto outros navegadores retornarão os tamanhos reais). O IE8 retorna a largura ou altura correta apenas para visibility:hidden.
display: none; Não estará disponível na página e não ocupa espaço.
visibility: hidden; oculta um elemento, mas ainda ocupa o mesmo espaço de antes. O elemento ficará oculto, mas ainda assim, afetará o layout.
visibility: hidden preservar o espaço, enquanto display: none não preserva o espaço.
Exibir nenhum exemplo: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Exemplo oculto de visibilidade: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Se a propriedade de visibilidade estiver definida como "hidden", o navegador ainda ocupará espaço na página para o conteúdo, mesmo que seja invisível.
Mas quando definimos um objeto "display:none", o navegador não aloca espaço na página para o seu conteúdo.
Exemplo:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>Uma outra diferença é que visibility:hiddenfunciona em navegadores muito, muito antigos e display:nonenão:
A diferença vai além do estilo e reflete-se na forma como os elementos se comportam quando manipulados com JavaScript.
Efeitos e efeitos colaterais de display: none:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), todo o retorno 0s.Efeitos e efeitos colaterais de visibility: hidden:
innerText(mas não innerHTML) do elemento de destino e descendentes retorna uma string vazia.display:none;não exibirá o elemento nem alocará espaço para o elemento na página, enquanto visibility:hidden;não exibirá o elemento na página, mas alocará espaço na página. Podemos acessar o elemento no DOM nos dois casos. Para entendê-lo de uma maneira melhor, observe o seguinte código:
display: none vs visible: hidden
Há muitas respostas detalhadas aqui, mas pensei em adicionar isso para abordar a acessibilidade, pois há implicações.
display: none; e visibility: hidden; pode não ser lido por todos os softwares de leitura de tela. Lembre-se do que os usuários com deficiência visual terão.
A pergunta também pergunta sobre sinônimos. text-indent: -9999px;é um outro que é aproximadamente equivalente. A diferença importante comtext-indent é que muitas vezes será lido pelos leitores de tela. Pode ser uma experiência um pouco ruim, pois os usuários ainda podem tabular para o link.
Para acessibilidade, o que eu vejo usado hoje é uma combinação de estilos para ocultar um elemento enquanto é visível para os leitores de tela.
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}Uma boa prática é criar um link "Pular para o conteúdo" para a âncora do corpo principal do conteúdo. Usuários com deficiência visual provavelmente não querem ouvir toda a sua árvore de navegação em todas as páginas. Faça o link visualmente oculto. Os usuários podem simplesmente clicar na guia para acessar o link.
Para mais informações sobre acessibilidade e conteúdo oculto, consulte: