Opacity: 0 ha esattamente lo stesso effetto della visibilità: nascosto

In tal caso, deprecare effettivamente la visibilityproprietà?

(Mi rendo conto che Internet Explorer non supporta ancora questa proprietà CSS2.)
Confronti dei motori di layout

Vedi anche: Qual è la differenza tra visibilità: nascosto e display: nessuno

Ecco una raccolta di informazioni verificate dalle varie risposte.

Ciascuna di queste proprietà CSS è unica. Oltre a rendere un elemento non visibile, hanno i seguenti effetti aggiuntivi:

1. Comprime lo spazio che normalmente occuperebbe l'elemento
2. Risponde agli eventi (ad es. Clic, pressione di un tasto)
3. Partecipa al taborder

                     comprimi il taborder degli eventi
opacità: 0 No Sì Sì
visibilità: nascosta No No No
visibilità: collassa Sì * No No
display: nessuno Sì No No

* Sì all'interno di un elemento tabella, altrimenti No.

No.

Gli elementi con opacità creano un nuovo contesto di sovrapposizione.

Inoltre, le specifiche CSS non lo definiscono, ma gli elementi con opacity:0sono cliccabili e gli elementi con visibility:hiddennon lo sono.

No non lo fa. C'è una grande differenza. Sono simili perché puoi vedere attraverso l'elemento se la visibilità è nascosta o l'opacità è 0, tuttavia

opacità: 0 : non è possibile fare clic sugli elementi sottostanti.

visibilità: nascosta : puoi fare clic sugli elementi dietro di essa.

Ci sono molte differenze tra visibilitye opacity. La maggior parte delle risposte menziona alcune differenze, ma ecco un elenco completo.

1. l'opacità non eredita, mentre la visibilità sì

2. l'opacità è animabile mentre la visibilità no.
   (Beh, tecnicamente lo è, ma semplicemente non esiste un comportamento definito per, ad esempio, "37% collassato e 63% nascosto", quindi puoi considerarlo come non animabile.)

3. Usando l'opacità, non puoi rendere un elemento figlio più opaco del suo genitore. Ad esempio, se hai un p con colore: nero e opacità: 0,5, non puoi rendere completamente nero nessuno dei suoi figli. I valori validi per l'opacità sono compresi tra 0 e 1 e questo esempio richiederebbe 2!
   Di conseguenza, secondo il commento di Martin , puoi avere un figlio visibile (con visibilità: visibile) in un genitore invisibile (con visibilità: nascosto). Questo è impossibile con l'opacità; se un genitore ha opacità: 0; i suoi figli sono sempre invisibili.

4. La risposta di Kornel menziona che i valori di opacità inferiori a 1 creano il proprio contesto di impilamento; nessun valore per la visibilità lo fa.
   (Vorrei poter pensare a un modo per dimostrarlo, ma non riesco a pensare a nessun mezzo per mostrare il contesto di impilamento di una visibilità: elemento nascosto.)

5. Secondo la risposta di philnash , gli elementi con opacità: 0 vengono ancora letti dagli screen reader, mentre sono visibili: gli elementi nascosti non lo sono.

6. Secondo la risposta di Chris Noe , la visibilità ha più opzioni (come la compressione) e gli elementi che non sono visibili non rispondono più ai clic e non possono essere tabulati.

(Rendendolo un wiki della comunità, dal momento che prendere in prestito dalle risposte esistenti non sarebbe giusto altrimenti.)

Non ne sono del tutto sicuro, ma penso che gli screen reader non leggano le cose impostate per la visibilità nascosta, ma potrebbero leggere le cose indipendentemente dalla loro opacità.

Questa è l'unica differenza a cui riesco a pensare.

Non sono del tutto sicuro, ma è così che attraverso la trasparenza del browser:

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

gli oggetti con visibilità: nascosti hanno ancora forma, non sono visibili. Gli elementi opacity zero possono ancora essere cliccati e reagire ad altri eventi.

Durante la creazione di uno stile utente che influisce sugli elementi in a contenteditable, ho notato che se imposti qualcosa su visibility: hidden, il cursore di input non vuole davvero interagire con esso. Ad esempio, se hai

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

... allora sembra che se focalizzi quel div / span, non puoi effettivamente digitarlo. Mentre con opacity: 0sembra che tu possa. Non l'ho testato a fondo, ma ho pensato che valesse la pena menzionarlo qui poiché nessun altro in questa pagina ha parlato degli effetti sull'input di testo. Tuttavia, questo sembra forse correlato agli eventi menzionati sopra.

Quello che dice Phil è vero.

IE supporta l'opacità però:

filter:alpha(opacity=0);

Le proprietà hanno significati semantici diversi. Sebbene il CSS semantico possa sembrare sciocco, come hanno detto altri utenti, ha un impatto su dispositivi come gli screen reader, dove la semantica influisce sull'accessibilità di una pagina.