visibility

  • Adressname der Version: CSS/visibility
  • Titel der Version: visibility
  • ID der Version: 118176
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 19 words added, 9 words removed

Inhalt der Version

{{ CSSRef() }}

Übersicht:

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

  • Standardwert: visible
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Ja
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

visibility: visible | hidden | collapse | inherit

Werte

visible
Standardwert. Das Element ist sichtbar.
hidden
Das Element ist unsichtbar (komplett transparent). Es wird allerdings Platz gelassen. Kindelemente mit visibility:visible sind sichtbar (funktioniert nicht im IE bis Version 7).
collapse
Bei Tabellenzeilen oder Spalten wird die Spalte/Zeile entfernt, ohne die Breiten/Höhen aller Tabellenzellen neu zu berechnen. Die Funktion ist zum schnellen entfernen von Tabellenspalten/-zeilen gedacht. Bei anderen Elementen ist collapse gleichbedeutend zu hidden.
inherit
Der Wert des Elternelements wird geerbt.

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. */

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 4.0
Safari (WebKit) 1.0 (85)

Die Unterstützung von visibility:collapse fehlt in einigen Browsern oder ist teilweise nicht korrekt.
In vielen Fällen wird nicht wie visibility:hidden bei anderen Elementen als Tabellenzeilen und -spalten gerendert.
In geschachtelten Tabellen kann es ebenfalls zu Unterschieden beim Rendering kommen.

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/visibility", "fr": "fr/CSS/visibility", "cn": "cn/CSS/visibility" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3>Übersicht:</h3>
<p>Die <code>visibility</code> Eigenschaft legt fest, ob ein Element sichtbar ist.</p>
<ul> <li>Standardwert: visible</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Ja</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">visibility: visible | hidden | collapse | inherit
</pre>
<h3>Werte</h3>
<dl> <dt>visible</dt> <dd>Standardwert. Das Element ist sichtbar.</dd> <dt>hidden</dt> <dd>Das Element ist unsichtbar (komplett transparent). Es wird allerdings Platz gelassen. Kindelemente mit <code>visibility:visible</code> sind sichtbar (funktioniert nicht im IE bis Version 7).</dd> <dt>collapse</dt> <dd>Bei Tabellenzeilen oder Spalten wird die Spalte/Zeile entfernt, ohne die Breiten/Höhen aller Tabellenzellen neu zu berechnen. Die Funktion ist zum schnellen entfernen von Tabellenspalten/-zeilen gedacht. Bei anderen Elementen ist <code>collapse</code> gleichbedeutend zu <code>hidden</code>.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h3>Beispiele</h3>
<pre>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. */
</pre>
<h3>Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>4.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<p>Die Unterstützung von <code>visibility:collapse</code> fehlt in einigen Browsern oder ist teilweise nicht korrekt.<br>
In vielen Fällen wird nicht wie <code>visibility:hidden</code> bei anderen Elementen als Tabellenzeilen und -spalten gerendert.<br>
In geschachtelten Tabellen kann es ebenfalls zu Unterschieden beim Rendering kommen.</p>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1 Visual effects #visibility</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-box/#visibility">CSS 3 Box #visibility</a> (Working Draft)</li>
</ul>
<h3>Siehe auch</h3>
<ul> <li><a href="/de/CSS/display" title="de/CSS/display">display</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/visibility", "fr": "fr/CSS/visibility", "cn": "cn/CSS/visibility" } ) }}</p>
Zu dieser Version zurücksetzen