Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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 18Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 6Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
collapseChrome Vollständige Unterstützung 62
Hinweise
Vollständige Unterstützung 62
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 Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Vollständige Unterstützung JaOpera Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
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 Keine Unterstützung NeinChrome Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
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 Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
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 Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.
Safari iOS Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
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 Ja

Legende

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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, fscholz, Sebastianz, Michael2402
Zuletzt aktualisiert von: SJW,