display: none vs visibility: hidden: der Unterschied beim Verstecken

Platz oder Lücke

Mit display: none erzeugt das Element keine Box; die Nachbarn rücken zusammen. Mit visibility: hidden bleibt die Box im Layout, nur unsichtbar – eine Lücke von der Größe des Elements. Beide Werte sind für Screenreader unsichtbar; das Element wird nicht vorgelesen.

Vererbung und Kinder

visibility wird vererbt, lässt sich aber an einem Kind mit visibility: visible zurückdrehen: Ein Kind eines versteckten Elternelements kann sichtbar bleiben. display: none entfernt den ganzen Teilbaum; kein Kind kann sich davon ausnehmen.

Animierbarkeit und die dritte Option

Keiner der beiden Werte hat Zwischenstufen; ein Übergang springt. Wer ein- und ausblenden will, kombiniert opacity (animierbar) mit visibility (schaltet Klickbarkeit und Vorlesen ab) oder nutzt seit 2024 transition-behavior: allow-discrete für display. opacity: 0 allein lässt das Element klickbar und für Screenreader lesbar – meist nicht gewollt.

Der dritte Wert: collapse in Tabellen

Neben visible und hidden kennt visibility den Wert collapse. Auf einer Tabellenzeile oder -spalte wirkt er wie ein Entfernen der Zeile, ohne die Spaltenbreiten neu zu berechnen – die Tabelle behält ihr Raster, was beim Ein- und Ausblenden von Zeilen ruhiger aussieht als display: none. Auf allen anderen Elementen verhält sich collapse laut Spezifikation wie hidden; verlassen sollte man sich außerhalb von Tabellen also nicht darauf.

Was die Sprachausgabe vorliest

Der Unterschied ist nicht nur ein optischer. Ein Element mit display: none ist aus dem Baum entfernt, der einer Sprachausgabe übergeben wird: Es wird nicht vorgelesen, es ist nicht mit der Tastatur erreichbar, und ein Formularfeld darin wird trotzdem noch mit abgeschickt. Mit visibility: hidden ist das Element ebenfalls nicht vorlesbar und nicht fokussierbar, hält aber seinen Platz frei – für die Sprachausgabe verhalten sich beide Werte also gleich, für das Layout nicht.

Daraus folgt eine praktische Regel: Wer etwas nur optisch verbergen, aber vorlesbar halten will – eine Beschriftung, die ein Symbol erklärt –, darf keinen der beiden Werte nehmen. Dafür gibt es die bekannte Technik, das Element auf ein Pixel zu verkleinern, den Überlauf abzuschneiden und es aus dem sichtbaren Bereich zu schieben. Und umgekehrt: Ein Inhalt, der wirklich niemanden erreichen soll, gehört nicht bloß versteckt, sondern gar nicht erst in die Seite.

Umschalten im Betrieb

Beide Eigenschaften werden meist nicht fest gesetzt, sondern umgeschaltet – über eine Klasse, über den Zustand eines Kontrollkästchens oder über das Attribut, das ein Aufklappelement offen hält. Dabei zeigt sich ein weiterer Unterschied: Das Einblenden über display zwingt den Browser, das Layout des ganzen Bereichs neu zu berechnen, weil eine Box hinzukommt. Das Einblenden über visibility ändert nur, was gezeichnet wird; die Boxen stehen schon da.

Für kurze Wechsel an derselben Stelle – ein Hinweis, der beim Überfahren erscheint – ist das der günstigere Weg, zumal die Sichtbarkeit im Gegensatz zur Anzeigeart einen Übergang zulässt. Für Bereiche, die im geschlossenen Zustand keinen Platz belegen dürfen, bleibt es bei display. Und bei Inhalten, die auf einer schmalen Ansicht wegfallen, ist display: none in der Mediengruppe die richtige Antwort, weil die Lücke sonst über die ganze Seite mitwandert.

Der dritte Weg: das Attribut im Dokument

Neben den beiden Eigenschaften gibt es eine Angabe im Dokument selbst, die ein Element verbirgt. Sie ist im Vorgabe-Stylesheet der Browser als display: none hinterlegt und hat gegenüber einer Klasse einen Vorteil: Der Zustand steht im Dokument und ist damit auch für ein Skript und für Prüfwerkzeuge sichtbar, ohne dass jemand die Bedeutung einer Klasse kennen müsste.

Sie hat aber auch eine Falle, die regelmäßig zuschlägt: Weil sie über das Vorgabe-Stylesheet wirkt, überschreibt jede eigene Regel mit einer Anzeigeart sie stillschweigend. Ein Baustein, dem irgendwo display: flex zugewiesen wurde, bleibt sichtbar, obwohl das Attribut gesetzt ist. Deshalb gehört in jedes Stylesheet eine Regel, die dem Attribut ausdrücklich Vorrang gibt. Das ist einer der wenigen Fälle, in denen ein Ausrufezeichen mit dem Vermerk für Vorrang wirklich am Platz ist.

Wann welches

• Element wirklich weg, Platz freigeben: display: none.
• Platz reservieren, etwa für Inhalt, der gleich erscheint: visibility: hidden.
• Einblenden mit Übergang: opacity + visibility.
• Nur visuell verstecken, für Screenreader behalten: die „visually hidden“-Technik mit clip-path, nicht diese beiden.

Kurz gesagt: display: none entscheidet über Existenz im Layout, visibility: hidden nur über Sichtbarkeit. Wer ein Element später wieder einblenden will, ohne dass die Seite springt, reserviert den Platz mit visibility; wer ihn freigeben will, nimmt display.

Häufige Fragen