html - motores - nivel de opacidad diesel

¿La opacidad: 0 tiene exactamente el mismo efecto que la visibilidad: oculta

Question

Si es así, ¿efectivamente desaprueba la propiedad de visibility ?

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

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

Answer 1

Al hacer un estilo de usuario que afecta a los elementos de una manera contenteditable , noté que si estableces algo para la visibility: hidden , entonces la entrada caret realmente no quiere interactuar con ella. Ej. Si tienes

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

... entonces parece que si enfocas ese div / span, no puedes escribirlo. Mientras que con opacity: 0 parece que puedes. No he probado esto exhaustivamente, pero pensé que valía la pena mencionar esto aquí ya que nadie más en esta página ha hablado sobre los efectos en el ingreso de texto. Esto parece relacionado posiblemente con los eventos mencionados anteriormente.

Answer 2

Aquí hay una compilación de información verificada de varias respuestas.

Cada una de estas propiedades de CSS es, de hecho, ú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., Hacer clic, presionar tecla)
3. Participa en el taborder

collapse events taborder opacity: 0 No Yes Yes visibility: hidden No No No visibility: collapse * No No display: none Yes No No * Yes inside a table element, otherwise No.

Answer 3

Hay muchas diferencias entre visibility y 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

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

3. Al usar la opacidad, no puede hacer que un elemento hijo sea más opaco que su elemento primario. Por ejemplo, si tiene una p. Con color: negro y opacidad: 0.5, no puede hacer que ninguno de sus hijos sea completamente negro. Los valores válidos para la opacidad están entre 0 y 1, ¡y este ejemplo requeriría 2!
   En consecuencia, según el comentario de Martin , puede tener un elemento secundario visible (con visibilidad: visible) en un elemento primario invisible (con visibilidad: oculto). 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; no tiene valor para la visibilidad.
   (Ojalá pudiera 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 todavía son leídos por lectores de pantalla, mientras que los elementos ocultos son visibles: no lo son.

6. Según la respuesta de Chris Noe , la visibilidad tiene más opciones (como el colapso) y los elementos que no son visibles ya no responden a los clics y no se pueden tabular.

(Haciendo esto una wiki de la comunidad, ya que tomar prestado de las respuestas existentes no sería justo en caso contrario).

Answer 4

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

Answer 5

Lo que Phil dice es verdad.

IE admite opacidad:

filter:alpha(opacity=0);

Answer 6

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

Esa es la única diferencia que puedo pensar.

Answer 7

No estoy del todo seguro, pero así es como lo hago con la transparencia del navegador cruzado:

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

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

Answer 8

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: oculto : puede hacer clic en los elementos detrás de él.

Answer 9

No.

Los elementos con opacidad crean un nuevo contexto de apilamiento.

Además, las especificaciones CSS no definen esto, pero los elementos con opacity:0 son seleccionables, y los elementos con visibility:hidden no lo son.