CSS/Tutorials/Sichtbarkeit von Elementen
ToDo (weitere ToDos)
Inhaltsverzeichnis
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 wiehidden
-
inherit
: Der Wert dervisibility
-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.
#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>
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.
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>
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.collapse
, verarbeiten ihn aber auch bei Tabellenzeilen- und Spalten wie hidden
(Stand November 2016).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.
.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>>
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.
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.
opacity
eine relative Angabe ist, sind Prozentwerte nicht erlaubt.
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 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.
.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
- ↑ Invisible Content Just for Screen Reader Users (WEBAIM)
- ↑ SELF-Forum: OnePager mit skip-to-top-Linkvon Rolf B.
- W3C: opacity
visibility
-Eigenschaft unsichtbar gemacht werden. Trotz der Unsichtbarkeit bleibt der von den versteckten Elementen benötigte Platz erhalten.