CSS/Tutorials/Sichtbarkeit von Elementen

20min

leicht

• CSS/Tutorials/Ausrichtung/display

Bei der Darstellung von Webseiten kann es erforderlich werden, bestimmte Teile von der Sichtbarkeit für den Besucher auszuschließen. Dafür gibt es unterschiedliche Werkzeuge in HTML und CSS, und sie haben unterschiedliche Auswirkungen.

Die erste Frage, die sich hier stellt, ist: Sichtbar für wen? Wir müssen vier Fälle unterscheiden:

• Der Inhalt ist visuell sichtbar und wird von Assistenztechniken beachtet (Standardfall)
• Der Inhalt ist visuell sichtbar, wird aber von Assistenztechniken ignoriert (aria-hidden)
• Der Inhalt ist visuell verborgen, wird aber von Assistenztechniken beachtet (visually-hidden)
• Der Inhalt ist visuell und für Assistenztechniken verborgen. Hier gibt es noch einmal zwei Varianten:
  • Der Inhalt ist verborgen, beeinflusst aber das Layout
  • Der Inhalt ist verborgen und beeinflusst das Layout nicht.

Kompliziert? Ja, leider.

Vollständige Unsichtbarkeit, visuell und für Assistenztechnik

display:none und warum man es vermeiden sollte

Die klassische Technik, HTML-Inhalte komplett zu verbergen und auch aus dem Layout herauszuhalten, besteht darin, die CSS-Eigenschaft display eines Elements in seinem style-Attribut auf den Wert none zu setzen. Durch diese Eigenschaft bleibt das Element im DOM, es wird aber nicht anzeigt, es wird nicht layoutet und Assistenztechniken beachten es nicht.

Das Setzen dieser Eigenschaft hat aber auch Nachteile. Zum einen muss man, wenn man die Sichtbarkeit wiederherstellen will, genau wissen, welches Display-Modell das verborgene Element hat. Inline? Block? Flexbox? Grid? Table? List-Item? Oder man muss ein kompliziertes Stück Code bauen, das zum Verbergen display:none setzt und zum Sichtbarmachen die display-Eigenschaft aus dem style entfernt.

Sichtbarkeit mit display:none - nicht machen!

   if (istVerborgen)
      element.style.display = "none";
   else
      element.style.removeProperty("display");

Es wurde auch vorgeschlagen, für die Sichtbarkeit an display den Wert revert zuzuweisen. Das funktioniert solange, wie das Element den für die Sichtbarkeit erforderlichen display-Wert aus dem Browser-Stylesheet oder einem Benutzerstylesheet bekommt. Befindet sich der Wert aber in einem Autorenstylesheet, geht er verloren (siehe Kaskade).

hidden

Mit HTML 5 wurde das HTML-Attribut hidden eingeführt. Die Browser haben in ihrem eingebauten Stylesheet eine Regel, die so aussieht:

Beispiel

hidden im Browser-Stylesheet

Das hidden-Attribut hat also die gleiche Wirkung wie display:none, diese Eigenschaft wird aber nicht direkt gesetzt, sondern über die CSS Kaskade und Spezifität zugeordnet. Das kann für Sie bedeuten, dass Sie Ihr Stylesheet erweitern müssen, wenn Sie in CSS-Regeln die display-Eigenschaft für ein Element gesetzt haben und hidden verwenden wollen.

Beispiel

hidden-Support im eigenen Stylesheet

Ohne die eigene [hidden]-Regel würde hidden auf dem <nav>-Element nicht funktionieren.

Das hidden-Attribut können Sie in CSS sehr einfach setzen, weil es von den HTML-Elementen als Objekteigenschaft bereitgestellt wird:

Beispiel

hidden per JavaScript setzen und löschen

visibility

Diese visibility-Eigenschaft gab es bereits in CSS 2, und auch sie verbirgt ein Element vor den Augen des Benutzers und vor den Assistenztechniken. Der Unterschied zu hidden ist, dass ein Element, das man mit visibility:hidden verbirgt, immer noch am Layout teilnimmt und der Platz, den es einnehmen würde, frei bleibt. Das kann nützlich sein, weil diese Platzreservierung verhindert, dass die Seite beim Umschalten neu layoutet werden muss und der Inhalt möglicherweise springt.

Um ein Element sichtbar zu machen, setzen Sie die visibility-Eigenschaft auf den Wert visible.

Außer visible und hidden gibt es noch einen weiteren Wert, den diese Eigenschaft annehmen kann: visibility:collapse. Dieser Wert gilt ausschließlich für Zeilen, Zeilengruppen, Spalten und Spaltengruppen innerhalb von <table>-Elementen sowie für Flex-Items und bewirkt, dass die kollabierten Elemente keinen Platz mehr auf dem Bildschirm belegen. Für alle übrigen Elemente wirkt collapse wie hidden.

Es gibt eine Sache, die Sie mit visibility:collapse erreichen können, die mit anderen Mitteln kaum möglich ist: Sie können Spalten ausblenden.

Ausblenden einer Tabellenspalte

<table>
<colgroup>
  <col />
<tr><td> 1 - 1 </td><td> 1 - 2 </td><td> 1 - 3 </td><td> 1 - 4 </td><td> 1 - 5 </td></tr>
<tr><td> 2 - 1 </td><td> 2 - 2 </td><td> 2 - 3 </td><td> 2 - 4 </td><td> 2 - 5 </td></tr>
<tr><td> 3 - 1 </td><td> 3 - 2 </td><td> 3 - 3 </td><td colspan="2"> 3 - 4 + 5 </td></tr>

• 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.

ToDo (weitere ToDos)

Darin kann man auch auf display:none und bessere Alternativen eingehen, das Konzept visually-hidden beschreiben und musterimplementieren, und auch erklären, wie man Elemente vor Screenreadern "versteckt".

visibility

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

opacity

Mit der Eigenschaft opacity (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

Folgende Werte sind möglich:

• Zahlenwert zwischen 0 und 1
  Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
• inherit: gibt an, dass der Wert der Deckfähigkeit des Elternelements übernommen wird.

Beachten Sie: Obwohl der Wert für opacity eine relative Angabe ist, sind Prozentwerte nicht erlaubt.

Beispiel ansehen …

span {
  background: #dddd00;
  border: 5px solid;
  cursor: help;
  display: inline-block;
  margin: 1em 2em;
  outline: 5px solid red;
  padding: 1em 2em;
}
.o0  { opacity: 0; }
.o2  { opacity: 0.2; }
.o4  { opacity: 0.4; }
.o6  { opacity: 0.6; }
.o8  { opacity: 0.8; }
.o10 { opacity: 1; }

Das Beispiel besteht aus sechs span-Elementen, die über ihre Klassen unterschiedliche Werte für die Deckkraft haben.

Das erste Element mit der Deckkraft opacity: 0 ist nicht sichtbar; es nimmt jedoch seinen Raum im Elementfluss ein.

Eine derartig festgelegte Deckfähigkeit gilt dabei stets für das gesamte Element, einschließlich border und outline. Soll lediglich der Elementinhalt teiltransparent gestaltet werden, so muss auf entsprechende Hintergrundfarben zurückgegriffen werden.

Transparenter Hintergrund mit rgb + Alphakanal

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgb-Farbangaben mit einem vierten Parameter, der den Alphawert regelt, bei der Hintergrundfarbe.

Beispiel ansehen …

.o0  { background-color: rgb(255 255 255 0); }
.o2  { background-color: rgb(255 255 255 /0.2); }
.o4  { background-color: rgb(255 255 255 /0.4); }
.o6  { background-color: rgb(255 255 255 /0.6); }
.o8  { background-color: rgb(255 255 255 /0.8); }
.o10 { background-color: rgb(255 255 255 /1); }

Das Beispiel entspricht weitgehend dem oberen. Die Transparenz beschränkt sich aber auf den Hintergrund, der mit background-color und dem entsprechenden rgb-Wert eingefärbt wird.

Ursprünglich verwendete das Beispiel die rgba()-Funktion. Im Februar 2022 wurde es durch die einfachere rgb()-Funktion mit Leerzeichen-separierten Werten ersetzt. Der optionale vierte Wert für den Alphakanal wird mit einem Slash notiert.

Siehe auch

• CSS/Eigenschaften/display
• CSS/Eigenschaften/opacity
• CSS/Eigenschaften/visibility

• HTML/Attribute/hidden

Weblinks

• W3C: opacity