CSS Academy · Lektion

Visibility vs. Display None

Lernen Sie, wann Sie visibility: hidden oder display: none verwenden und wie sich beide auf das Layout auswirken.

Visibility vs. Display None ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Drei Möglichkeiten, Elemente auszublenden

CSS bietet drei gängige Methoden zum Ausblenden von Elementen. Jede hat unterschiedliche Auswirkungen auf Layout, Barrierefreiheit und Interaktion:

display: none
visibility: hidden
opacity: 0

display: none

Das Element wird vollständig aus dem Layout entfernt. Es nimmt keinen Platz ein, ist nicht interaktiv und wird von Screenreadern nicht vorgelesen (bei den meisten Implementierungen). Das Element bleibt im DOM vorhanden.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Das Element ist unsichtbar, nimmt aber weiterhin Platz ein. Es kann nicht angeklickt werden und wird von Screenreadern nicht vorgelesen. Das eignet sich, wenn etwas ausgeblendet werden soll, ohne Verschiebungen im Layout zu verursachen.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

Das Element ist unsichtbar, bleibt aber vollständig interaktiv. Es nimmt weiterhin Platz ein und reagiert auf Ereignisse (Klicks, Hovers). Screenreader lesen es möglicherweise weiterhin vor.

<button class="transparent">Invisible but clickable</button>

visibility: visible überschreiben

Ein untergeordnetes Element kann die visibility: hidden des übergeordneten Elements mit visibility: visible überschreiben. Bei display: none ist dies nicht möglich — untergeordnete Elemente erben diesen Wert uneingeschränkt.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Vergleichstabelle

Schnellübersicht:

display: none: kein Platz, keine Klicks, wird nicht vorgelesen
visibility: hidden: nimmt Platz ein, keine Klicks, wird nicht vorgelesen
opacity: 0: nimmt Platz ein, bleibt anklickbar, wird möglicherweise vorgelesen

visibility animieren

display kann nicht per Transition animiert werden. Um Elemente ein- und auszublenden, kombinieren Sie visibility mit opacity:

<div class="dropdown open">Dropdown menu content</div>

Barrierefreies Ausblenden mit SR-only

Das Muster screen-reader only blendet Inhalte visuell aus, hält sie aber für assistive Technologien zugänglich:

<button>Save <span class="sr-only">your document now</span></button>

hidden-Attribut vs. CSS

Das HTML-Attribut hidden wendet über das User-Agent-Stylesheet des Browsers display: none an. Es ist barrierefrei und semantisch, kann aber durch eine höhere CSS-Spezifität überschrieben werden.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden überspringt das Rendern von Bereichen außerhalb des sichtbaren Bildschirmausschnitts, erhält aber deren Zugänglichkeitsbaum und Layout. Das ist eine moderne Performance-Technik für lange Seiten.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Damit ein Element sichtbar, aber nicht interaktiv bleibt, verwenden Sie pointer-events: none. Klicks und Hovers werden durch das Element hindurch an darunterliegende Elemente weitergeleitet.

<div class="overlay">Clicks pass through this overlay</div>

Schnelltest

Welche Technik blendet ein Element aus, während der von ihm belegte Platz im Layout erhalten bleibt?

Zusammenfassung

display: none entfernt ein Element vollständig aus dem Layout. visibility: hidden blendet es aus und erhält dabei den Platz. opacity: 0 blendet es aus, lässt es aber interaktiv. Verwenden Sie zum barrierefreien Ausblenden das Muster .sr-only. Kombinieren Sie visibility und opacity für Fade-Transitions.

Häufig gestellte Fragen

Ist die Lektion „Visibility vs. Display None“ kostenlos?

Ja — der vollständige Text von „Visibility vs. Display None“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Visibility vs. Display None“?

Lernen Sie, wann Sie visibility: hidden oder display: none verwenden und wie sich beide auf das Layout auswirken. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Visibility vs. Display None“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy