CSS visibility-Eigenschaft
Die CSS-Eigenschaft visibility legt fest, ob ein Element für den Benutzer sichtbar oder ausgeblendet ist. Entdecke Beispiele und probiere sie selbst aus.
Die CSS-Eigenschaft visibility steuert, ob ein Element angezeigt oder ausgeblendet wird, ohne das Layout zu verändern — ein ausgeblendetes Element behält genau den Platz, den es einnehmen würde, wenn es sichtbar wäre. Diese Seite behandelt die drei Kernwerte (visible, hidden, collapse), den Unterschied zwischen visibility und display bzw. opacity, die Auswirkungen auf die Barrierefreiheit beim Ausblenden von Inhalten sowie ausführbare Beispiele für jeden Wert.
Was visibility bewirkt
Der am häufigsten verwendete Wert ist hidden. Wenn du visibility: hidden setzt, wird das Element unsichtbar, nimmt jedoch weiterhin seinen Platz im Layout ein — umliegende Inhalte rücken nicht in die entstandene Lücke. Das Element wird außerdem aus der Tab-Reihenfolge entfernt und von Screenreadern nicht vorgelesen, ist also wirklich vor assistiven Technologien verborgen — nicht nur visuell.
Eine besondere Eigenschaft: visibility wird vererbt, aber ein untergeordnetes Element kann den Wert überschreiben. Wenn ein Elternelement visibility: hidden besitzt, wird ein Nachfahre mit visibility: visible wieder sichtbar, obwohl sein Vorfahre ausgeblendet ist.
Der Wert collapse ist speziell für tabellenbezogene Elemente gedacht (<tr>, <col>, Zeilengruppen, Spaltengruppen). Bei diesen Elementen entfernt er die Zeile oder Spalte vollständig — so wie es display: none täte —, sodass der Rest der Tabelle auffüllt und die Lücke schließt; die Spaltenbreiten werden jedoch weiterhin so berechnet, als wäre die Zeile noch vorhanden. Bei Nicht-Tabellenelementen verhält sich collapse einfach wie hidden.
Die Browser-Unterstützung für collapse bei Tabellenelementen ist inkonsistent: Einige Rendering-Engines verhalten sich dabei identisch zu hidden (die Zeile bleibt raumnehmend sichtbar). Wenn eine Zeile wirklich browserübergreifend verschwinden soll, verwende stattdessen display: none am <tr>.
visibility vs. display vs. opacity
Diese drei Eigenschaften „verstecken" ein Element, verhalten sich jedoch unterschiedlich — die falsche Wahl ist ein häufiger Fehler.
| Eigenschaft | Behält Layoutplatz? | Im Accessibility-Baum? | Empfängt Ereignisse? |
|---|---|---|---|
visibility: hidden | Ja | Nein | Nein |
display: none | Nein (kollabiert) | Nein | Nein |
opacity: 0 | Ja | Ja | Ja |
Verwende visibility: hidden, wenn du den Platz des Elements reservieren, seinen Inhalt aber ausblenden möchtest (zum Beispiel beim Umschalten eines Platzhalters ohne Seitensprung). Verwende display: none, wenn das Element verschwinden und das Layout die Lücke schließen soll. Verwende opacity: 0 nur, wenn das Element weiterhin interaktiv und von Screenreadern lesbar sein soll — beispielsweise bei einem Element, das ein- oder ausgeblendet wird.
Da visibility animierbar ist, kannst du es mit opacity kombinieren, um ein Ausblenden zu erzeugen, das in einem vollständig versteckten, nicht interaktiven Element endet:
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Anfangswert | visible |
|---|---|
| Gilt für | Alle Elemente (collapse gilt nur für tabellenbezogene Elemente). |
| Vererbt | Ja. |
| Animierbar | Ja. |
| Version | CSS2 |
| DOM-Syntax | Object.style.visibility = "collapse"; |
Syntax
Syntax der CSS visibility-Eigenschaft
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Beispiel der visibility-Eigenschaft mit dem Wert "hidden":
Beispiel der CSS visibility-Eigenschaft mit dem Wert hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Ergebnis
Beispiel der visibility-Eigenschaft mit den Werten "visible" und "hidden":
Beispiel der CSS visibility-Eigenschaft mit den Werten visible und hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Beispiel der visibility-Eigenschaft mit dem Wert "collapse":
Beispiel mit CSS visibility-Eigenschaft mit dem Wert collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| visible | In diesem Fall ist das Element sichtbar. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| hidden | Dieser Wert blendet die Elemente nur visuell aus. | Ausprobieren » |
| collapse | Wird bei bestimmten Tabellenelementen (Zeilen, Zeilengruppen, Spalten, Spaltengruppen) verwendet, um ganze Zeilen oder Spalten zu entfernen. Bei anderen Elementen hat dieser Wert dieselbe Bedeutung wie "hidden". | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. | |
| revert | Setzt die Eigenschaft auf den geerbten oder ursprünglichen Wert zurück, je nachdem, was zutrifft. | Ausprobieren » |
| revert-layer | Setzt die Eigenschaft auf den Wert der vorherigen Kaskadenschicht zurück. | Ausprobieren » |
Verwandte Eigenschaften
- CSS
display— ein Element ausblenden und seinen Platz aus dem Layout entfernen. - CSS
opacity— ein Element transparent machen und dabei interaktiv halten. - CSS
overflow— Inhalte steuern, die über ihren Container hinausragen. - CSS
position— Elemente aus dem normalen Fluss verschieben.