CSS 2.1: `visibility`

Erläuterungen

Diese Eigenschaft bestimmt, ob ein generiertes Element sichtbar dargestellt wird. Falls es nicht sichtbar ist, behält es dennoch seinen Platz im Elementfluss der Seite.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'visibility' visible | hidden | collapse | inherit

visible: Das generierte Element ist sichtbar. Auch Elemente, die visibility:hidden von ihrem Elternelement ererbt haben, werden mit diesem Wert sichtbar dargestellt.
hidden: Das generierte Element ist vorhanden, aber unsichtbar bzw. voll transparent.
collapse: Dieser Wert hat im normalen Elementfluss dieselbe Wirkung wie der Wert hidden.; Wird er in Tabellen verwendet, namentlich an den Elementen TR, TBODY, COL und COLGROUP bzw. an Elementen, deren Eigenschaft display mit dem Wert row, row-group, column oder column-group belegt ist, bewirkt er, dass das so deklarierte Element in sich zusammenfällt. Damit lassen sich Teile von Tabellen dynamisch aus der Anzeige entfernen, ohne dass sich am Elementfluß etwas ändert.
inherit (Ausgangswert): Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Es gibt zwei Unterschiede zwischen den Deklarationen visibility:hidden; und display:none;. Display:none; bewirkt, dass die so deklarierte Box überhaupt nicht generiert wird und der Browser die Seite so aufbaut, als wenn diese Box nicht vorhanden wäre. Durch visibility:hidden; dagegen wird die Box samt Inhalt nur 'durchsichtig', ihre Fläche bleibt freigestellt.
Der zweite Unterschied bezieht sich auf die Nachkommenelemente. Kindelemente eines mit display:none deklarierten Elementes können nicht ausgegeben werden, auch dann nicht, wenn sie anders als mit none deklariert werden. Nachkommenelemente von mit visibility:hidden deklarierten Elementen erben diese Deklarierung, können aber selbst durch den Wert visible wieder sichtbar sein.

Code-Beispiel:

P { visibility: visible; }

Browserunterstützung

Die Eigenschaft visibility wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

Firefox 1.5: In älteren Versionen vor 1.5 erkennt Firefox in Tabellen den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist für HTML-Elemente und für display-erzeugte Elemente gleich. Mit Version 1.5 ist das Problem beseitigt.
IE/Win 7: Erkennt die Werte inherit und collapse an normalen Elementen nicht, reagiert innerhalb von Tabellen gar nicht auf diese Eigenschaft.
Opera 9: In Tabellen erkennt Opera bis zur Version 9 den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist für HTML-Elemente und für display-erzeugte Elemente gleich.
Safari 1.3: Safari behandelt den Wert collapse genauso wie hidden, d. h. das Element wird zwar unsichtbar, aber nicht ganz entfernt.
Safari 3.x Win: Auch Safari 3 entfernt das Element bei deklariertem Wert collapse nicht. Zudem hat der Wert keine Auswirkung auf Tabellenspalten.
Konqueror 3.5: Ebenso wie Opera erkennt Konqueror in Tabellen den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist auch hier für HTML-Elemente und für display-erzeugte Elemente gleich.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.