¿Opacidad: 0 tiene exactamente el mismo efecto que visibilidad: oculta?

Si es así, ¿deprecia efectivamente la visibilitypropiedad?

(Me doy cuenta de que Internet Explorer aún no admite esta propiedad CSS2).
Comparaciones de motores de diseño

Ver también: ¿Cuál es la diferencia entre visibilidad: oculta y pantalla: ninguna?

Aquí hay una recopilación de información verificada de las diversas respuestas.

Cada una de estas propiedades CSS es única. Además de hacer que un elemento no sea visible, tienen los siguientes efectos adicionales:

1. Contrae el espacio que normalmente ocuparía el elemento
2. Responde a eventos (p. Ej., Clic, pulsación de tecla)
3. Participa en el taborder

                     colapso eventos taborder
opacidad: 0 No Si Si
visibilidad: oculta No No No
visibilidad: colapso Sí * No No
pantalla: ninguna Sí No No

* Sí dentro de un elemento de tabla, de lo contrario No.

No.

Los elementos con opacidad crean un nuevo contexto de apilamiento.

Además, la especificación CSS no define esto, pero opacity:0se puede hacer clic en los elementos con y no en los elementos con visibility:hidden.

No, no lo hace. Existe una gran diferencia. Son similares porque puede ver a través del elemento si la visibilidad está oculta o la opacidad es 0, sin embargo

opacidad: 0 : no puede hacer clic en los elementos detrás de él.

visibilidad: oculta : puede hacer clic en los elementos detrás de él.

Hay muchas diferencias entre visibilityy opacity. La mayoría de las respuestas mencionan algunas diferencias, pero aquí hay una lista completa.

1. la opacidad no hereda, mientras que la visibilidad sí

2. la opacidad es animable mientras que la visibilidad no lo es.
   (Bueno, técnicamente lo es, pero simplemente no hay un comportamiento definido para, digamos, "37% colapsado y 63% oculto", por lo que puede considerar esto como no animable).

3. Con la opacidad, no puede hacer que un elemento secundario sea más opaco que su principal. Por ejemplo, si tiene una p con color: negro y opacidad: 0.5, no puede hacer que ninguno de sus elementos secundarios sea completamente negro. Los valores válidos de opacidad están entre 0 y 1, ¡y este ejemplo requeriría 2!
   En consecuencia, según el comentario de Martin , puede tener un hijo visible (con visibilidad: visible) en un padre invisible (con visibilidad: oculta). Esto es imposible con opacidad; si un padre tiene opacidad: 0; sus hijos son siempre invisibles.

4. La respuesta de Kornel menciona que los valores de opacidad menores que 1 crean su propio contexto de apilamiento; ningún valor para la visibilidad lo hace.
   (Me gustaría poder pensar en una forma de demostrar esto, pero no puedo pensar en ningún medio para mostrar el contexto de apilamiento de una visibilidad: elemento oculto).

5. Según la respuesta de philnash , los elementos con opacidad: 0 aún son leídos por lectores de pantalla, mientras que los elementos ocultos no son visibles.

6. Según la respuesta de Chris Noe , la visibilidad tiene más opciones (como contraer) y los elementos que no son visibles ya no responden a los clics y no se pueden marcar con pestañas.

(Hacer de esto un wiki de la comunidad, ya que de lo contrario tomar prestado de las respuestas existentes no sería justo).

No estoy del todo seguro de esto, pero creo que los lectores de pantalla no leen cosas que están configuradas para visibilidad oculta, pero pueden leer cosas independientemente de su opacidad.

Esa es la única diferencia en la que puedo pensar.

No estoy seguro del todo, pero así es como hago la transparencia entre navegadores:

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

Los objetos con Visibilidad: ocultos todavía tienen forma, simplemente no son visibles. Todavía se puede hacer clic en los elementos de opacidad cero y reaccionar a otros eventos.

Al hacer un estilo de usuario que afecta a los elementos en a contenteditable, noté que si configuras algo visibility: hidden, entonces el signo de intercalación de entrada no quiere interactuar con él. Por ejemplo, si tienes

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

... entonces parece que si enfoca ese div / span, en realidad no puede escribirlo. Mientras que con opacity: 0él parece que puedes. No lo he probado extensamente, pero pensé que valía la pena mencionarlo aquí, ya que nadie más en esta página ha hablado sobre los efectos en la entrada de texto. Sin embargo, esto parece posiblemente relacionado con los eventos mencionados anteriormente.

Lo que dice Phil es cierto.

IE admite la opacidad sin embargo:

filter:alpha(opacity=0);

Las propiedades tienen diferentes significados semánticos . Si bien CSS semántico suena como una tontería, como han mencionado otros usuarios, tiene un impacto en dispositivos como lectores de pantalla, donde la semántica afecta la accesibilidad de una página.