CSS/Tutorials/visibility

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Mit der Eigenschaft visibility wird festgelegt, ob ein Element sichtbar oder unsichtbar dargestellt wird. Ein unsichtbares Element hat dabei dieselben Auswirkungen auf nachfolgende Elemente wie ein sichtbares Element.

Die visibility-Eigenschaft

Die Eigenschaft visibility kann folgende Werte besitzen:

  • visible: Standardwert; Das Element wird sichtbar dargestellt.
  • hidden: Das Element wird unsichtbar dargestellt.
  • collapse: Eine Tabellenzeile oder -spalte wird ausgeblendet; wirkt bei anderen Elementen wie hidden
  • inherit: Der Wert der visibility-Eigenschaft des Elternelements wird geerbt.

Der Wert der visibility-Eigenschaft wird automatisch vererbt. Da der Standardwert visible ist, sind zunächst alle Elemente sichtbar.

Erhält die visibility-Eigenschaft eines Elements den Wert hidden, so wird das Element unsichtbar. Genauer: Die von einem Element erzeugten Boxen werden unsichtbar.

Beispiel ansehen …
#lückentext em { visibility: hidden; }
<h2>Rätsel</h2>
<p id="lückentext">Das Beispiel <em>Lückentext</em> zeigt die Wirkung der 
<code>visibility</code>-<em>Eigenschaft</em> anhand von Inline-Elementen. 
Die Eigenschaft wirkt aber auch bei <em>Blockelementen</em>.</p>

<h2>Lösung</h2>
<p>Das Beispiel <em>Lückentext</em> zeigt die Wirkung der 
<code>visibility</code>-<em>Eigenschaft</em> anhand von Inline-Elementen. 
Die Eigenschaft wirkt aber auch bei <em>Blockelementen</em>.</p>
Dieses Beispiel zeigt einen Lückentext, in dem die Textlücken mit Hilfe der visibility-Eigenschaft unsichtbar gemacht werden. Trotz der Unsichtbarkeit bleibt der von den versteckten Elementen benötigte Platz erhalten.

Die Werte hidden und collapse besitzen identische Auswirkungen. Traditionell wird jedoch nur der Wert hidden verwendet, um Elemente unsichtbar darzustellen, da der Wert collapse bei Tabellenzeilen und -spalten eine andere Wirkung besitzt als der Wert hidden.

Tabellenzeilen und -spalten ausblenden

Der Wert collapse wird verwendet, um Zeilen, Zeilengruppen, Spalten oder Spaltengruppen einer Tabelle auszublenden.

In diesem Fall werden die betroffenen Zeilen oder Spalten nicht einfach unsichtbar gemacht, sondern vollständig ausgeblendet. Das bedeutet, dass der zuvor beanspruchte Platz frei wird, die Tabelle sich aber nicht an die neuen Platzverhältnisse anpasst.

Dieser Vorgang hat noch weitere Auswirkungen: Verläuft z. B. eine Zelle von einer sichtbaren in eine ausgeblendete Spalte, so bleibt der Inhalt der Zelle zwar sichtbar, wird aber an den Grenzen der Spalte abgeschnitten.

Beispiel ansehen …
td { border: 1px inset gray; }
#information { visibility: hidden; }
#summe { visibility: collapse; }
<h2>Tabelle mit unsichtbarer Zeile</h2>
<table>
  <tbody>
    <tr><td>Spalte 1</td><td rowspan="2">Spalte 2</td><td>Spalte 3</td></tr>
    <tr id="information"><td>Spalte 1</td><td>Spalte 2</td><td rowspan="2">Spalte 3</td></tr>
    <tr><td>Spalte 1</td><td>Spalte 2</td></tr>
  </tbody>
</table>

<h2>Tabelle mit ausgeblendeter Zeile</h2>
<table>
  <tbody>
    <tr><td>Spalte 1</td><td rowspan="2">Spalte 2</td><td>Spalte 3</td></tr>
    <tr id="summe"><td>Spalte 1</td><td>Spalte 2</td><td rowspan="2">Spalte 3</td></tr>
    <tr><td>Spalte 1</td><td>Spalte 2</td></tr>
  </tbody>
</table>
Dieses Beispiel zeigt die unterschiedlichen Auswirkungen der visibility-Eigenschaft auf eine Tabellenzeile: Der von den Zellen benötigte Platz bleibt bei unsichtbaren Zeilen erhalten. Zellen, die in eine unsichtbare Zeile hineinragen, bleiben vollständig sichtbar.
Eine ausgeblendete Zeile dagegen wird „wie sie ist“ aus der Tabelle herausgelöst. Zellen, die in eine ausgeblendete Zeile hineinragen, werden teilweise ausgeblendet, ihr Inhalt bleibt aber identisch vorhanden (vergleichen Sie die Position des Inhalts bei beiden Tabellen). Die Höhe der Zellen wird nicht neu berechnet. Gegebenenfalls kann auf diese Zellen die overflow-Eigenschaft angewendet werden, um sich überlappende Inhalte zu vermeiden.
Beachten Sie: Tabellenspalten (und -spaltengruppen) können ausgeblendet aber nicht versteckt werden, da sie selbst keine Boxen erzeugen, sondern nur abstrakt mit den ihnen zugeordneten Zellen verbunden sind.
Beachten Sie: Safari und Chrome verstehen zwar den Wert collapse, verarbeiten ihn aber auch bei Tabellenzeilen- und Spalten wie hidden (Stand November 2016).
Beachten Sie: Spalten von Tabellen mit zusammenfallenden Rahmen (border-collapse: collapse;) werden im Mozilla Firefox zwar korrekt ausgeblendet, die von der Tabelle gezeichneten Rahmen bleiben jedoch unverändert bestehen. (Stand November 2016).

Wiederherstellen der Sichtbarkeit

Nachfahren eines unsichtbaren Elements erben automatisch die Unsichtbarkeit von ihrem Elternelement. Die Sichtbarkeit der Nachfahrenelemente kann aber mit Hilfe der visibility-Eigenschaft wiederhergestellt werden.

Beispiel ansehen …
.verpackung    { padding: 1em; background-color: brown; }
.schutzschicht { padding: 1em; background-color: lightblue; }
.inhalt        { padding: 1em; background-color: orange; }

.hidden         { visibility: hidden; }
.hidden .inhalt { visibility: visible; }
<h2>Beispiel ohne unsichtbare Elemente</h2>
<div class="verpackung">
  <div class="schutzschicht">
    <div class="inhalt"></div>
  </div>
</div>
 
<h2>Beispiel mit unsichtbarem Element</h2>
<div class="verpackung">
 <div class="schutzschicht hidden">
   <div class="inhalt"></div>
  </div>
</div>>
Dieses Beispiel zeigt, dass die Sichtbarkeit des Elements mit der Klasse „inhalt“ auch dann bestehen bleiben kann, wenn das Elternelement (hier mit der Klasse „hidden“) unsichtbar ist.

Abgrenzung zur display-Eigenschaft

Die Eigenschaft display wird verwendet um festzulegen, welche Art von Box(en) ein Element erzeugt (z. B. eine Block- oder Inline-Box). Die visibility-Eigenschaft legt dagegen fest, ob die erzeugte Box sichtbar oder unsichtbar dargestellt wird.

Ein Element behält seine Auswirkung auf den Elementfluss bei, wenn es mit visibility: hidden unsichtbar gemacht wurde. Zudem besteht die Möglichkeit, Nachfahren eines unsichtbaren Elements mit visibility: visible sichtbar zu machen. Beides ist bei Elementen mit display: none nicht der Fall.

Gegenüberstellung von visibility: hidden und display: none; ansehen …
Im Beispiel wird ein Textabsatz wahlweise ausgeblendet (visibility: hidden;) oder nicht dargestellt. (display: none;)

Abgrenzung zur opacity-Eigenschaft

Die opacity-Eigenschaft legt die Durchsichtigkeit eines Elements fest. Der Grad der Durchsichtigkeit kann dabei einen Wert zwischen 0% und 100% annehmen.

Theoretisch entspricht visibility: hidden einer Durchsichtigkeit von 100% und visibility: visible; einer Durchsichtigkeit von 0%. Tatsächlich können beide Eigenschaften aber beliebig kombiniert werden. Ein (teilweise) durchsichtiges Element kann visible sein und ein undurchsichtiges Element kann hidden sein.

Im Gegensatz zur visibility-Eigenschaft, kann die mit Hilfe der opacity-Eigenschaft festgelegte Durchsichtigkeit bei Nachfahrenelementen nicht wiederhergestellt werden.

Elemente, die die opacity-Eigenschaft besitzen, erzeugen einen neuen „stacking context“, welcher Einfluss auf die Überlappung verschiedener Elemente besitzt. Bei Elementen mit der visibility-Eigenschaft ist dies nicht der Fall.

Siehe auch