O opacity: 0 tem exatamente o mesmo efeito que a visibilidade: hidden

Em caso afirmativo, depreciar efetivamente a visibilitypropriedade?

(Percebo que o Internet Explorer ainda não suporta essa propriedade CSS2.)
Comparações de mecanismos de layout

Consulte também: Qual é a diferença entre visibilidade: oculto e exibição: nenhum

Aqui está uma compilação de informações verificadas das várias respostas.

Cada uma dessas propriedades CSS é exclusiva. Além de tornar um elemento não visível, eles têm os seguintes efeitos adicionais:

1. Recolhe o espaço que o elemento normalmente ocuparia
2. Responde a eventos (por exemplo, clique, pressionamento de tecla)
3. Participa do taborder

                     recolher tabela de eventos
opacidade: 0 Não Sim Sim
visibilidade: oculto Não Não Não
visibilidade: recolhimento Sim * Não Não
display: nenhum Sim Não Não

* Sim dentro de um elemento da tabela, caso contrário não.

Não.

Elementos com opacidade criam um novo contexto de empilhamento.

Além disso, a especificação CSS não define isso, mas os elementos com opacity:0são clicáveis ​​e os elementos com visibility:hiddennão.

Não, não tem. Há uma grande diferença. Eles são semelhantes porque você pode ver através do elemento se a visibilidade está oculta ou a opacidade é 0, no entanto

opacidade: 0 : você não pode clicar nos elementos por trás dele.

visibilidade: oculto : você pode clicar nos elementos por trás dele.

Existem muitas diferenças entre visibilitye opacity. A maioria das respostas menciona algumas diferenças, mas aqui está uma lista completa.

1. opacidade não herda, enquanto visibilidade não

2. a opacidade é animadora, enquanto a visibilidade não.
   (Bem, tecnicamente é, mas simplesmente não há comportamento definido para, por exemplo, "37% colapsado e 63% oculto", portanto, você pode considerar isso como não-animador.)

3. Usando a opacidade, você não pode tornar um elemento filho mais opaco que seu pai. Por exemplo, se você tem um ap com cor: preto e opacidade: 0,5, você não pode deixar nenhum de seus filhos totalmente preto. Os valores válidos para a opacidade estão entre 0 e 1, e este exemplo exigiria 2!
   Consequentemente, de acordo com o comentário de Martin , você pode ter um filho visível (com visibilidade: visível) em um pai invisível (com visibilidade: oculto). Isso é impossível com opacidade; se um pai tiver opacidade: 0; seus filhos são sempre invisíveis.

4. A resposta de Kornel menciona que valores de opacidade inferiores a 1 criam seu próprio contexto de empilhamento; nenhum valor para a visibilidade faz.
   (Gostaria de poder pensar em uma maneira de demonstrar isso, mas não consigo pensar em nenhum meio de mostrar o contexto de empilhamento de uma visibilidade: elemento oculto.)

5. De acordo com a resposta de philnash , elementos com opacidade: 0 ainda são lidos pelos leitores de tela, enquanto visíveis: elementos ocultos não são.

6. De acordo com a resposta de Chris Noe , a visibilidade tem mais opções (como recolhimento) e os elementos que não são visíveis não respondem mais a cliques e não podem ser tabulados.

(Tornando este um wiki da comunidade, pois não seria justo pedir emprestado as respostas existentes.)

Não tenho muita certeza disso, mas acho que os leitores de tela não leem coisas que estão definidas com visibilidade oculta, mas podem ler as coisas independentemente de sua opacidade.

Essa é a única diferença que consigo pensar.

Não tenho muita certeza, mas é assim que eu cruzo a transparência do navegador:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

objetos com Visibilidade: ocultos ainda têm forma, apenas não são visíveis. os elementos de opacidade zero ainda podem ser clicados e reagir a outros eventos.

Ao criar um estilo de usuário que afeta elementos em a contenteditable, notei que, se você definir algo para visibility: hidden, o cursor de entrada realmente não deseja interagir com ele. Por exemplo, se você tiver

<div contenteditable><span style='visibility: hidden;'></span></div>

... então parece que se você focar esse div / span, não poderá digitar. Considerando que com opacity: 0isso parece que você pode. Eu não testei isso extensivamente, mas achei que valeria a pena mencionar isso aqui, já que ninguém mais nesta página falou sobre os efeitos na entrada de texto. Isso parece possivelmente relacionado ao material dos eventos mencionados acima.

O que Phil diz é verdade.

O IE suporta a opacidade:

filter:alpha(opacity=0);

As propriedades têm significados semânticos diferentes . Embora o CSS semântico pareça tolo, como outros usuários mencionaram, isso afeta dispositivos como leitores de tela - onde a semântica afeta a acessibilidade de uma página.