Hat Deckkraft: 0 genau den gleichen Effekt wie Sichtbarkeit: versteckt

Wenn ja, wird die visibilityImmobilie effektiv verworfen ?

(Mir ist klar, dass Internet Explorer diese CSS2-Eigenschaft noch nicht unterstützt.)
Vergleiche von Layout-Engines

Siehe auch: Was ist der Unterschied zwischen Sichtbarkeit: versteckt und Anzeige: keine

Hier finden Sie eine Zusammenstellung verifizierter Informationen aus den verschiedenen Antworten.

Jede dieser CSS-Eigenschaften ist einzigartig. Sie machen ein Element nicht nur nicht sichtbar, sondern haben auch die folgenden zusätzlichen Effekte:

1. Reduziert den Platz, den das Element normalerweise einnehmen würde
2. Reagiert auf Ereignisse (z. B. Klicken, Tastendruck)
3. Nimmt am Taborder teil

                     Kollaps Ereignisse Taborder
Deckkraft: 0 Nein Ja Ja
Sichtbarkeit: versteckt Nein Nein Nein
Sichtbarkeit: Zusammenbruch Ja * Nein Nein
Anzeige: keine Ja Nein Nein

* Ja innerhalb eines Tabellenelements, sonst Nein.

Nein.

Elemente mit Deckkraft erstellen einen neuen Stapelkontext.

Auch die CSS-Spezifikation definiert dies nicht, aber Elemente mit können opacity:0angeklickt werden und Elemente mit visibility:hiddennicht.

Nein, tut es nicht. Es gibt einen großen Unterschied. Sie sind ähnlich, da Sie durch das Element sehen können, ob die Sichtbarkeit ausgeblendet ist oder die Deckkraft 0 ist

Deckkraft: 0 : Sie können nicht auf Elemente dahinter klicken .

Sichtbarkeit: versteckt : Sie können auf Elemente dahinter klicken .

Es gibt viele Unterschiede zwischen visibilityund opacity. Die meisten Antworten erwähnen einige Unterschiede, aber hier ist eine vollständige Liste.

1. Die Deckkraft erbt nicht, die Sichtbarkeit jedoch nicht

2. Die Deckkraft ist animierbar, die Sichtbarkeit jedoch nicht.
   (Nun, technisch gesehen ist es das, aber es ist einfach kein Verhalten definiert, das beispielsweise für "37% kollabiert und 63% versteckt" definiert ist. Sie können dies also als nicht animierbar betrachten.)

3. Mit der Deckkraft können Sie ein untergeordnetes Element nicht undurchsichtiger als sein übergeordnetes Element machen. ZB wenn Sie ap mit Farbe: schwarz und Deckkraft: 0,5 haben, können Sie keines seiner Kinder vollständig schwarz machen. Gültige Werte für die Deckkraft liegen zwischen 0 und 1, und dieses Beispiel würde 2 erfordern!
   Folglich können Sie laut Martins Kommentar ein sichtbares Kind (mit Sichtbarkeit: sichtbar) in einem unsichtbaren Elternteil (mit Sichtbarkeit: versteckt) haben. Dies ist mit Deckkraft unmöglich; wenn ein Elternteil Deckkraft hat: 0; seine Kinder sind immer unsichtbar.

4. In Kornels Antwort wird erwähnt, dass Opazitätswerte unter 1 einen eigenen Stapelkontext erstellen. Kein Wert für die Sichtbarkeit.
   (Ich wünschte, ich könnte mir eine Möglichkeit vorstellen, dies zu demonstrieren, aber ich kann mir keine Möglichkeit vorstellen, den Stapelkontext einer Sichtbarkeit zu zeigen: verstecktes Element.)

5. Laut Philnashs Antwort werden Elemente mit einer Deckkraft von 0 immer noch von Bildschirmleseprogrammen gelesen, während sie sichtbar sind: versteckte Elemente nicht.

6. Laut der Antwort von Chris Noe verfügt die Sichtbarkeit über mehr Optionen (z. B. Reduzieren) und Elemente, die nicht sichtbar sind, reagieren nicht mehr auf Klicks und können nicht mit Registerkarten versehen werden.

(Dies zu einem Community-Wiki zu machen, da es sonst nicht fair wäre, sich die vorhandenen Antworten zu leihen.)

Ich bin mir nicht ganz sicher, aber ich denke, Bildschirmleser lesen keine Dinge, die auf versteckte Sichtbarkeit eingestellt sind, aber sie können Dinge unabhängig von ihrer Deckkraft lesen.

Das ist der einzige Unterschied, den ich mir vorstellen kann.

Ich bin mir nicht ganz sicher, aber so mache ich Cross-Browser-Transparenz:

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

Objekte mit Sichtbarkeit: Versteckt haben noch Form, sie sind nur nicht sichtbar. Elemente mit einer Deckkraft von Null können weiterhin angeklickt werden und auf andere Ereignisse reagieren.

Bei der Erstellung eines Benutzerstils, der Elemente in a beeinflusst contenteditable, ist mir aufgefallen, dass visibility: hiddendas Eingabe-Caret nicht wirklich mit ihm interagieren möchte , wenn Sie etwas festlegen . ZB wenn du hast

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

... dann scheint es, wenn Sie dieses div / span fokussieren, können Sie es nicht wirklich eingeben. Während mit opacity: 0es scheint, können Sie. Ich habe dies nicht ausführlich getestet, aber ich dachte, es wäre erwähnenswert, dies hier zu erwähnen, da niemand auf dieser Seite über die Auswirkungen auf die Texteingabe gesprochen hat. Dies scheint jedoch möglicherweise mit den oben erwähnten Ereignissen zu tun zu haben.

Was Phil sagt, ist wahr.

IE unterstützt jedoch die Deckkraft:

filter:alpha(opacity=0);

Die Eigenschaften haben unterschiedliche semantische Bedeutungen. Während semantisches CSS so klingt, als ob es albern wäre, hat es, wie andere Benutzer erwähnt haben, Auswirkungen auf Geräte wie Bildschirmleseprogramme - wobei Semantik die Zugänglichkeit einer Seite beeinflusst.