Propriedades CSS: exibição vs. visibilidade

Qual é a diferença entre as propriedades de exibição e visibilidade?

A visibilitypropriedade apenas diz ao navegador se deve mostrar um elemento ou não. É visível ( visible- você pode ver) ou invisível ( hidden- você não pode ver).

A displaypropriedade diz ao navegador como desenhar e mostrar um elemento, se for o caso - se ele deve ser exibido como um inlineelemento (ou seja, flui com texto e outros elementos embutidos) ou um blockelemento de nível (ou seja, tem propriedades de altura e largura que você pode definir, é floatable, etc), ou um inline-block(ou seja, ele age como um bloco caixa, mas é colocado em linha em vez) e alguns outros ( list-item, table, table-row, table-cell, flex, etc).

Quando você define um elemento como display: blockmas também define visibility: hidden, o navegador ainda o trata como um elemento de bloco, exceto que você simplesmente não o vê. É como empilhar uma caixa vermelha em cima de uma caixa invisível: a caixa vermelha parece que está flutuando no ar, quando na realidade está em cima de uma caixa física que você não pode ver.

Em outras palavras, isso significa que os elementos displayque não noneestão ainda afetarão o fluxo de elementos em uma página, independentemente de estarem visíveis ou não. As caixas ao redor de um elemento com display: nonese comportarão como se esse elemento nunca tivesse existido (embora permaneça no DOM).

visibilidade: oculto;

• o elemento não será pintado E não receberá eventos de clique / toque, mas o espaço que ele ocupa ainda está ocupado
• porque ainda está lá para fins de layout, você pode medi-lo sem estar visível
• alterar o conteúdo ainda vai custar tempo de refluxo / layout da página
• a visibilidade é herdada, então isso significa que você pode tornar os subchildren visíveis dando-lhes visibilidade: visible;

Mostrar nenhum;

• fará com que o elemento não participe do fluxo / layout
• pode (dependendo do navegador usado) matar filmes em Flash e iframes (que serão reiniciados / recarregados ao serem exibidos novamente), embora você possa evitar que isso aconteça com iframes
• o elemento não ocupará nenhum espaço. para fins de layout, é como se não existisse
• fará com que alguns navegadores / dispositivos (como o iPad) retomem diretamente a memória usada por aquele elemento, causando pequenos contratempos se você alternar entre nenhum e outro valor durante as animações

notas extras:

• imagens em conteúdo oculto: em todos os navegadores populares as imagens ainda são carregadas, embora estejam dentro de qualquer elemento com visibilidade: oculto; ou exibir: nenhum;
• fontes em conteúdo oculto: navegadores webkit (Chrome / Safari) podem atrasar o carregamento de fontes personalizadas que são usadas apenas em elementos ocultos, incluindo por meio de visibilidade ou exibição. Isso pode fazer com que você meça os elementos que ainda estão usando uma fonte substituta até que a fonte personalizada seja carregada.

display: none remove o elemento do fluxo do html, enquanto visibility: hidden não.

Mostrar nenhum; irá remover o estilo visual / espaço físico dos elementos DOM do DOM, enquanto a visibilidade: oculto; não removerá o elemento, apenas o ocultará. Portanto, um div ocupando 300px de espaço vertical em seu DOM AINDA ocupará 300px de largura vertical quando definido como visibilidade: oculto; mas quando definido para exibir: nenhum; seus estilos visuais e o espaço que ocupa ficam ocultos e o espaço é então "liberado" por falta de palavra melhor.

[EDITAR] - Já faz um tempo que escrevi o texto acima, e se eu não tinha conhecimento suficiente ou estava tendo um dia ruim, não sei, mas a realidade é que o elemento NUNCA é removido da hierarquia DOM. Todos os 'estilos' de exibição de nível de bloco são completamente 'ocultos' ao usar display: none, enquanto com visibility: hidden; o próprio elemento está oculto, mas ainda ocupa um espaço visual no DOM. eu espero que isso esclareça as coisas