The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. visibility

CSS 2.1 · Eigenschaft

CSS-Eigenschaft visibility

Vollreferenz zu visibility: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.

Erstveröffentlichung Lesezeit 4 min
stylesheet.css · visibility
.probe {
  visibility: hidden;
}
NachbarNachbarNachbar
berechneter Wertvisibility: hidden
Box-Breite–
Box-Höhe–

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.

Wechselwirkungen

display

Unsichtbar oder nicht vorhanden

Der Unterschied zu display: none liegt im Platz. Ein unsichtbares Element behält seine Box, seine Größe und seinen Platz im Fluss; alles um es herum steht so, als wäre es da. Ein entferntes Element hinterlässt nichts.

Der zweite Unterschied fällt seltener auf und ist ebenso wichtig: Die Eigenschaft wird vererbt, und ein Nachfahre kann sie zurücknehmen. In einem unsichtbaren Bereich lässt sich ein einzelnes Element wieder sichtbar machen, indem man ihm ausdrücklich den anderen Wert gibt. Bei einem entfernten Teilbaum ist das nicht möglich, weil dessen Nachfahren keine Boxen erzeugen.

Für die Sprachausgabe verhalten sich beide gleich: Was unsichtbar oder entfernt ist, wird nicht vorgelesen. Wer etwas nur für die Sprachausgabe bereitstellen will, kann deshalb keinen dieser beiden Wege verwenden.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert
visible
Berechneter Wert
Spezifizierter Wert
Vererbung
Nein
Anwendbarkeit
Auf alle Elemente
%-Bezugswert
Nicht zutreffend
Mediengruppe(n)
Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.