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.

Initialwertvisible
Anwendbar aufalle Elemente
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
AnimationstypSichtbarkeit
Kanonische Reihenfolgedie 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

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
visibilityChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Internet Explorer doesn't support visibility: initial.
Hinweise Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
collapseChrome Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Chrome treats visibility: collapse like hidden, leaving a white gap.
Hinweise Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 15
Hinweise
Vollständige Unterstützung 15
Hinweise
Hinweise Opera treats visibility: collapse like hidden, leaving a white gap.
Hinweise Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari Vollständige Unterstützung 1.3
Hinweise
Vollständige Unterstützung 1.3
Hinweise
Hinweise Safari treats visibility: collapse like hidden, leaving a white gap.
Hinweise Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android Vollständige Unterstützung ≤37
Hinweise
Vollständige Unterstützung ≤37
Hinweise
Hinweise WebView treats visibility: collapse like hidden, leaving a white gap.
Hinweise WebView supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Chrome Android Vollständige Unterstützung 18
Hinweise
Vollständige Unterstützung 18
Hinweise
Hinweise Chrome treats visibility: collapse like hidden, leaving a white gap.
Hinweise Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android Vollständige Unterstützung 14
Hinweise
Vollständige Unterstützung 14
Hinweise
Hinweise Opera treats visibility: collapse like hidden, leaving a white gap.
Hinweise Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari iOS Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Safari treats visibility: collapse like hidden, leaving a white gap.
Hinweise Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android Vollständige Unterstützung 1.0
Hinweise
Vollständige Unterstützung 1.0
Hinweise
Hinweise Samsung Internet treats visibility: collapse like hidden, leaving a white gap.
Hinweise Samsung Internet supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.