visibility

Übersicht

Die visibility Eigenschaft legt fest, ob ein Element sichtbar ist.

Sie kann dazu verwendet werden, ein Element zu verstecken, aber den Raum, den es eingenommen hätte zu belassen. Sie kann auch Zeilen oder Spalten einer Tabelle verstecken.

Initialwert	`visible`
Anwendbar auf	alle Elemente
Vererbt	Ja
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	ja, als Sichtbarkeit
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Globale Werte */
visibility: inherit;
visibility: initial;
visibility: unset;

Werte

visible: Standardwert. Das Element ist sichtbar.
hidden: Das Element ist unsichtbar (komplett transparent), es beeinflusst jedoch immernoch das Layout. Kindelemente mit visibility:visible sind sichtbar (funktioniert nicht im IE bis Version 7).
collapse: Bei Tabellenzeilen, Spalten und Zeilengruppen wird/werden die Spalte(n) bzw. Zeile(n) entfernt und der Platz, den sie eingenommen hätten, wird entfernt (als ob display: none; für die Zeile/Spalte der Tabelle angegeben worden wäre). Jedoch wird die Größe der anderen Zeilen und Spalten immer noch so berechnet, als ob die zusammengefallene(n) Zeile(n)/Spalte(n) da wären. Die Funktion ist zum schnellen Entfernen von Tabellenspalten/-zeilen gedacht ohne die Breiten und Höhen jedes Teils der Tabelle neuberechnen zu müssen. Für XUL-Elemente ist die berechnete Größe des Elements immer 0, unabhängig von anderen Styles, die normalerweise die Größe beeinflussen würden. Jedoch werden Außenabstände immer noch berücksichtigt. Bei anderen Elementen ist collapse gleichbedeutend zu hidden.

Interpolation

Sichtbarkeitswerte sind interpolierbar zwischen sichtbar und nicht sichtbar. Einer der Start- oder Endwerte muss daher visible sein, damit eine Interpolation stattfinden kann. Falls einer der Werte visible ist, wird er in einem einzelnen Schritt interpoliert, wobei Werte der Timingfunktion zwischen 0 und 1 auf visible und andere Werte der Timingfunktion (welche nur am Start/Ende des Übergangs oder als das Ergebnis aus cubic-bezier() Funktionen mit y-Werten außerhalb von [0, 1]) abgebildet werden.

Formale Syntax

visible | hidden | collapse

Beispiele

p        { visibility: hidden; }    /* Absätze sind unsichtbar */
p.showme { visibility: visible; }   /* Absätze der Klasse "showme" sind sichtbar */
tr.col   { visibility: collapse; }  /* Tabellenzeilen mit der Klasse "col" fallen zusammen. */

Hinweise

Die Unterstützung von visibility:collapse fehlt oder ist teilweise fehlerhaft in manchen modernen Browsern. In einigen Fällen wird es bei Elementen mit Ausnahme von Tabellenzeilen und -spalten nicht korrekt interpretiert.

visibility:collapse kann die Darstellung einer Tabelle ändern, falls die Tabelle verschachtelte Tabellen in den zusammengefallenen Zellen beinhaltet, sofern visibility:visible explizit bei den Tabellen angegeben ist.

Spezifikationen

Spezifikation	Status	Kommentar
CSS Basic Box Model Die Definition von 'visibility' in dieser Spezifikation.	Arbeitsentwurf	Keine Änderungen
CSS Transitions Die Definition von 'visibility' in dieser Spezifikation.	Arbeitsentwurf	Definiert `visibility` als animierbar.
CSS Level 2 (Revision 1) Die Definition von 'visibility' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	1.0^[1]	1.0 (1.7 oder früher)^[2]	4.0	4.0^[3]	1.0^[1]

Merkmal	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	1.0	1.0^[1]	1.0 (1.0)^[2]	6.0	6.0^[3]	1.0^[1]

[1] Chrome und Safari behandeln visibility: collapse wie hidden, was eine Lücke hinterlässt; sie unterstützen den Wert nur für <tr>, <thead>, <tbody> und <tfoot>, aber nicht für <col> und <colgroup> Elemente.

[2] Firefox versteckt die Ränder nicht, wenn <col> und <colgroup> Elemente ausgeblendet werden, falls border-collapse: collapse gesetzt ist.

[3] In Opera funktioniert visibility: collapse bei Tabellenelementen, aber es scheint <tfoot> nicht zu verstecken, falls es ein Kindelement eines sichtbaren <tbody> ist.