visibility

Die CSS-Eigenschaft visibility hat zwei verschiedene Funktionen. Sie blendet Zeilen und Spalten einer Tabelle aus und blendet außerdem ein Element aus, *ohne das Layout zu verändern*.

p {
  visibility: hidden;
}
tr {
  visibility: collapse;
}

visibility hat vier gültige Werte: visible, hidden, collapse und inherit. Wir werden jeden einzelnen durchgehen, um mehr zu erfahren.

sichtbar

Wie der Name schon sagt, macht visible Dinge sichtbar. Standardmäßig ist nichts verborgen, daher bewirkt dieser Wert nichts, es sei denn, Sie haben hidden für dieses oder ein übergeordnetes Element festgelegt.

versteckt

Der Wert hidden verbirgt Dinge. Dies unterscheidet sich von der Verwendung von display: none, da hidden Elemente nur *visuell* verbirgt. Das Element ist immer noch vorhanden und nimmt immer noch Platz auf der Seite ein, aber man kann es nicht mehr sehen (ähnlich wie das Setzen der Opazität auf 0). Interessanterweise vererbt sich diese Eigenschaft standardmäßig nicht. Das bedeutet, dass Sie im Gegensatz zu den Eigenschaften display oder opacity ein Element auf hidden setzen können und trotzdem eines seiner Kindelemente als visible haben können, wie hier:

Beachten Sie, dass das übergeordnete Element während des Ausblendens nicht den :hover-Zustand auslöst.

kollabieren

Dies betrifft nur Tabellenzeilen (<tr>), Zeilengruppen (wie <thead>), Spalten (<col>), Spaltengruppen (<colgroup>) oder Elemente, die durch display dazu gemacht wurden.

Im Gegensatz zu hidden blendet dieser Wert das Tabellen-Unterelement aus, ohne den dafür vorgesehenen Platz zu hinterlassen. Wenn er außerhalb eines Tabellen-Unterelements verwendet wird, verhält er sich wie visibility: hidden.

Es gibt so viele Eigenheiten, dass es schwer ist zu wissen, wo man anfangen soll. Nur als kleiner Vorgeschmack:

• Chrome/Safari kollabieren eine Zeile, aber der von ihr belegte Platz bleibt bestehen. Und wenn die Tabellenzellen darin einen Rahmen hatten, wird dieser zu einem einzigen Rahmen entlang der Oberkante kollabieren.
• Chrome/Safari kollabieren keine Spalte oder Spaltengruppe.
• Safari kollabiert eine Tabellenzelle (falsch), aber Chrome tut dies nicht (richtig).
• In jedem Browser wird der Text in einer Zelle nicht angezeigt, wenn sich diese Zelle in einer kollabierten Spalte befindet (unabhängig davon, ob sie tatsächlich kollabiert).
• Opera (vor WebKit) kollabiert alles, außer einer Tabellenzelle (was korrekt ist).

Es gibt mehr, aber im Grunde genommen: **Verwenden Sie dies nie.**

vererben

Der Standardwert. Dies bewirkt einfach, dass das Element den Wert seines Elternelements erbt.

Flexbox

visibility: collapse; wird auch in Flexbox verwendet und ist besser definiert.

Verwandte Eigenschaften

• Die Eigenschaft display
• Die Eigenschaft opacity

Weitere Ressourcen

• CSS2-Spezifikation
• CSS3-Spezifikation
• MDN-Dokumentation
• IE-Dokumente

Browser-Unterstützung

Die Grundlagen, unter Berücksichtigung aller Eigenheiten von collapse.

Alle

Alle

Alle

4+

4+

Alle

Alle

IE 7- unterstützt collapse oder inherit nicht.