Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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
Animierbarja, als Sichtbarkeit
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

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.

Schlagwörter des Dokuments und Mitwirkende

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