it-swarm.com.de

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

Wenn ja, wird die Eigenschaft visibility 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

119
Chris Noe

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

Jede dieser CSS-Eigenschaften ist in der Tat einzigartig. Zusätzlich zum Rendern eines Elements, das nicht sichtbar ist, haben sie die folgenden zusätzlichen Effekte:

  1. Reduziert der Raum, den das Element normalerweise einnehmen würde
  2. Reagiert auf Ereignisse (z. B. Klicken, Tastendruck)
  3. Beteiligt sich an der Tabulator
 Registerkarte Ereignisse reduzieren 
 Deckkraft: 0 Nein Ja Ja 
 Sichtbarkeit: versteckt Nein Nein Nein 
 Sichtbarkeit: Reduzieren * Nein Nein 
 Anzeige: keine Ja Nein Nein 
 
 * Ja in einem Tabellenelement, sonst Nein. 
244
Chris Noe

Nein.

Elemente mit Deckkraft erzeugen einen neuen Stapelkontext.

Auch die CSS-Spezifikation definiert dies nicht, aber Elemente mit opacity:0 sind anklickbar und Elemente mit visibility:hidden sind nicht.

12
Kornel

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 beträgt

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

Sichtbarkeit: versteckt: Sie können darauf klicken auf dahinterliegende Elemente.

11
Nishant

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 immer noch Form, sie sind nur nicht sichtbar. Elemente mit einer Deckkraft von null können weiterhin angeklickt werden und auf andere Ereignisse reagieren.

4
Andrew Bullock

Ich bin mir nicht ganz sicher, aber ich denke, dass Screenreader keine Dinge lesen, deren Sichtbarkeit verborgen ist, aber sie können Dinge lesen, unabhängig von ihrer Undurchsichtigkeit.

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

3
philnash

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

  1. die Deckkraft wird nicht übernommen, die Sichtbarkeit jedoch

  2. die Deckkraft kann animiert werden, die Sichtbarkeit jedoch nicht.
    (Nun, technisch ist es, aber es gibt einfach kein definiertes Verhalten für "37% zusammengebrochen und 63% versteckt" , so können Sie dies als nicht animierbar betrachten.)

  3. Mithilfe der Deckkraft können Sie ein untergeordnetes Element nicht undurchsichtiger als sein übergeordnetes Element machen. Z.B. Wenn Sie ein p mit Farbe: Schwarz und Deckkraft: 0,5 haben, können Sie keines der untergeordneten Elemente vollständig schwarz machen. Gültige Werte für die Deckkraft liegen zwischen 0 und 1, und für dieses Beispiel wäre 2 erforderlich!
    Entsprechend Martins Kommentar können Sie ein sichtbares Kind (mit Sichtbarkeit: sichtbar) in einem unsichtbaren Elternteil (mit Sichtbarkeit: versteckt) haben. Dies ist unmöglich mit Opazität; Wenn ein Elternteil Deckkraft hat: 0; ihre Kinder sind immer unsichtbar.

  4. Kornels Antwort erwähnt, dass Opazitätswerte unter 1 einen eigenen Stapelkontext erzeugen; 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. Gemäß der Antwort von philnash werden Elemente mit der Deckkraft: 0 weiterhin von Screenreadern gelesen, während verborgene Elemente sichtbar sind.

  6. Laut Chris Noes Antwort hat die Sichtbarkeit 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 das Ausleihen aus den vorhandenen Antworten sonst nicht fair wäre.)

2
Mr Lister

Bei der Erstellung eines Userstyles, der sich auf Elemente in einem contenteditable auswirkt, ist mir aufgefallen, dass das Eingabe-Caret nicht wirklich mit ihm interagieren möchte, wenn Sie etwas auf visibility: hidden Setzen. ZB wenn Sie haben

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

... dann scheint es, dass Sie, wenn Sie sich auf dieses Div/Span konzentrieren, es nicht wirklich eingeben können. Mit opacity: 0 Scheint es möglich zu sein. Ich habe dies nicht ausführlich getestet, aber es hat sich als erwähnenswert erwiesen, da niemand auf dieser Seite über die Auswirkungen auf die Texteingabe gesprochen hat. Dies scheint jedoch möglicherweise mit den Ereignissen zu tun zu haben, die oben erwähnt wurden.

2
MalcolmOcean

Die Eigenschaften haben unterschiedliche semantische Bedeutungen. Während semantisches CSS wie albern klingt, hat es, wie andere Benutzer bereits erwähnt haben, Auswirkungen auf Geräte wie Screenreader - wobei sich die Semantik auf den Zugriff auf eine Seite auswirkt.

0
Zack The Human

Was Phil sagt, ist wahr.

IE unterstützt Opazität obwohl:

filter:alpha(opacity=0);