mozilla

Version 487067 von visibility

  • Adressname der Version: CSS/visibility
  • Titel der Version: visibility
  • ID der Version: 487067
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar
Schlagwörter: 

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", "zh-cn": "cn/CSS/visibility" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht</h2>
<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>
<h2>Syntax</h2>
<pre class="eval">
visibility: visible | hidden | collapse | inherit
</pre>
<h3 id="Werte">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>
<h2>Beispiele</h2>
<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>
<h2>Browser <span>Kompatibilität</span></h2>
<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>
<h2>Spezifikation</h2>
<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>
<h2>Siehe auch</h2>
<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", "zh-cn": "cn/CSS/visibility" } ) }}</p>
Zu dieser Version zurücksetzen