CSS/Tutorials/Sichtbarkeit von Elementen

Aus SELFHTML-Wiki
< CSS‎ | Tutorials(Weitergeleitet von CSS/Tutorials/opacity)
Wechseln zu: Navigation, Suche


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".[1][2]

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


Weblinks

  1. ↑ Invisible Content Just for Screen Reader Users (WEBAIM)
  2. ↑ SELF-Forum: OnePager mit skip-to-top-Linkvon Rolf B.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Sichtbarkeit_von_Elementen&oldid=95768“