Vergleich verschiedener Methoden zum Verstecken von Dingen in CSS

Man sollte denken, dass das Ausblenden von Inhalten mit CSS ein geradliniges und gelöstes Problem ist, aber es gibt mehrere Lösungen, die jeweils einzigartig sind.

Entwickler verwenden display: none am häufigsten, um Inhalte auf der Seite zu verbergen. Leider ist diese Methode des Verbergens von Inhalten nicht narrensicher, da diese Inhalte für Screenreader „unzugänglich“ sind. Es ist verlockend, es zu verwenden, aber besonders in Fällen, in denen etwas nur visuell verborgen werden soll, sollten Sie nicht darauf zurückgreifen.

Tatsächlich gibt es viele Möglichkeiten, Dinge in CSS zu „verstecken“, jede mit ihren eigenen Vor- und Nachteilen, die stark davon abhängen, wie sie verwendet wird. Wir werden jede Technik hier überprüfen und die Dinge mit einer Zusammenfassung abschließen, die uns hilft zu entscheiden, welche wir wann verwenden.

Unterschiede zwischen den Techniken erkennen

Um einen Unterschied zwischen verschiedenen Methoden des Verbergens von Inhalten zu sehen, müssen wir einige Metriken einführen. Metriken, die wir verwenden werden, um die Methoden zu vergleichen. Ich habe mich entschieden, dies zu unterteilen, indem ich Fragen zu vier bestimmten Bereichen stelle, die Layout, Leistung und Barrierefreiheit beeinflussen.

1. Barrierefreiheit: Werden die versteckten Inhalte von einem Screenreader gelesen?
2. Dokumentfluss: Beeinflusst das versteckte Element das Dokumentlayout?
3. Rendering: Wird das Boxmodell des versteckten Elements gerendert?
4. Ereignisauslöser: Erkennt das Element Klicks oder Fokus?

Nun, da wir unsere Kriterien geklärt haben, vergleichen wir die Methoden. Noch einmal, wir werden am Ende alles zusammenfassen, damit wir es als Referenz für Entscheidungen beim Verbergen von Dingen in CSS verwenden können.

Methode 1: Die Eigenschaft display

Wir haben diesen Beitrag mit einer Warnung bezüglich der Verwendung von display zum Verbergen von Inhalten begonnen. Und wie wir festgestellt haben, bedeutet die Verwendung zum Verbergen eines Elements, dass das Element überhaupt nicht generiert wird. Es ist im DOM, wird aber nie tatsächlich gerendert.

Das Element wird weiterhin im Markup angezeigt. Wenn Sie die Seite inspizieren, können Sie das Element sehen. Das Boxmodell wird nicht generiert oder auf der Seite angezeigt, was auch für alle seine Kindelemente gilt.

Und was noch wichtiger ist: Wenn das Element Ereignis-Listener hat – sagen wir Klick- oder Hover-Ereignisse – werden diese überhaupt nicht registriert. Und wie wir bereits besprochen haben, werden alle Inhalte von Screenreadern ignoriert. Hier haben wir zwei sichtbare Schaltflächen und eine mit display: none versteckte. Alle drei Schaltflächen haben Klick-Ereignisse, aber nur die beiden sichtbaren Schaltflächen werden gerendert und registrieren die Klicks.

Display ist die einzige Eigenschaft, die das Auslösen von Bildanfragen beeinflusst. Wenn ein Bild-Tag (oder ein übergeordnetes Element) die Eigenschaft display auf none gesetzt hat, entweder durch Inline-CSS oder durch einen Selektor, wird das Bild heruntergeladen. Auf der anderen Seite, wenn das Bild mit der Eigenschaft background angewendet wird, wird es nicht heruntergeladen.

Dies liegt daran, dass der Parser das CSS nicht angewendet hat, wenn ein HTML-Dokument analysiert wird und er auf ein <img>-Tag stößt. Auf der anderen Seite, wenn wir das Bild auf ein Element mit der Eigenschaft background anwenden, wird das Bild nicht heruntergeladen, da der Parser das CSS, in dem das Bild aufgerufen wird, nicht angewendet hat. Dieses Verhalten wird über alle neuesten Browser hinweg beibehalten. Die einzige Ausnahme ist IE 11, der Bilder in beiden Fällen herunterlädt.

Metrik	Ergebnis
Werden die versteckten Inhalte von einem Screenreader gelesen?	❌
Beeinflusst das versteckte Element das Dokumentlayout?	❌
Wird das Boxmodell des versteckten Elements gerendert?	❌
Erkennt das Element Klicks oder Fokus?	❌

Methode 2: Die Eigenschaft visibility

Wenn die Eigenschaft visibility eines Elements auf hidden gesetzt ist, wird das Element „visuell verborgen“. „Visuell verborgen“ klingt sehr ähnlich wie display: none, ist aber unglaublich anders, da das Element generiert und gerendert, aber unsichtbar ist. Das bedeutet, dass das Boxmodell des Elements vorhanden ist und ihm Dimensionen gibt, die weiterhin Platz auf dem Bildschirm einnehmen, obwohl es nicht erscheint.

Stellen Sie sich vor, Sie tragen einen unsichtbaren Umhang, der Sie für andere unsichtbar macht, aber Sie stoßen trotzdem gegen Dinge. Sie sind physisch da, auch wenn Sie für das menschliche Auge unsichtbar sind.

Aber hier enden die Unterschiede zwischen „visuell verborgen“ und „nicht angezeigt“. Tatsächlich verhalten sich Elemente, die mit visibility und display versteckt sind, in Bezug auf Barrierefreiheit und Ereignisauslöser gleich. Unsichtbare Elemente sind für Screenreader unzugänglich und registrieren keine Ereignisse, wie wir in der folgenden Demo sehen, die exakt dem letzten Beispiel entspricht, aber lediglich display: none durch visibility: hidden ersetzt.

Metrik	Ergebnis
Werden die versteckten Inhalte von einem Screenreader gelesen?	❌
Beeinflusst das versteckte Element das Dokumentlayout?	✅
Wird das Boxmodell des versteckten Elements gerendert?	✅
Erkennt das Element Klicks oder Fokus?	❌

Methode 3: Die Eigenschaft opacity

Die Eigenschaft opacity beeinflusst nur den visuellen Aspekt des Elements. Wenn wir die opacity eines Elements auf Null setzen, wird das Element vollständig transparent. Wieder ist es sehr ähnlich wie bei visibility: hidden, wo wir einen unsichtbaren Umhang über das Element legen, so dass es unsichtbar, aber immer noch physisch vorhanden ist.

Mit anderen Worten, wir haben ein hohles, transparentes Element, das sich wie jedes andere Element verhält, nur dass es unsichtbar ist. Klingt sehr ähnlich wie die Methode visibility, richtig? Der Unterschied ist, dass ein vollständig transparentes Element für einen Screenreader zugänglich bleibt und Ereignisse wie Klicks registrieren kann, wie wir im folgenden Beispiel sehen.

Metrik	Ergebnis
Werden die versteckten Inhalte von einem Screenreader gelesen?	✅
Beeinflusst das versteckte Element das Dokumentlayout?	✅
Wird das Boxmodell des versteckten Elements gerendert?	✅
Erkennt das Element Klicks oder Fokus?	✅

Methode 4: Die Eigenschaft position

Das Verschieben eines Elements außerhalb des Bildschirms mit absoluter Positionierung ist eine weitere Möglichkeit, wie Entwickler oft Dinge verstecken. Mit top und left können wir das Element so weit vom Bildschirm wegschieben, dass es auf keinen Fall gesehen wird. Es ist, als würde man die Keksdose außerhalb des Hauses verstecken, damit die Kinder (oder vielleicht Sie selbst!) sie nicht finden können.

„Absolute“ ist hier das Schlüsselwort. Wenn wir position auf absolute setzen, wird ein Element aus dem Dokumentfluss genommen, was bedeutet, dass es seine natürliche Position im DOM nicht mehr einhält. Mit anderen Worten, die Seite reserviert keinen Platz dafür, was das Element optisch aus der Reihenfolge bringt und es zu seinem nächsten positionierten Element verschiebt, wenn eines vorhanden ist, oder zum Dokumentstamm, wenn nichts anderes vorhanden ist.

Wir nutzen die absolute Positionierung, indem wir das „versteckte“ Element aus dem Dokumentfluss nehmen und es mit Werten von -9999px nach oben links verschieben.

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Metrik	Effekt
Werden die versteckten Inhalte von einem Screenreader gelesen?	✅
Beeinflusst das versteckte Element das Dokumentlayout?	❌
Wird das Boxmodell des versteckten Elements gerendert?	✅
Erkennt das Element Klicks oder Fokus?	✅

Wenn das versteckte Element fokussierbare Inhalte enthält, scrollt die Seite zu dem Element, wenn es fokussiert ist, was einen plötzlichen Sprung verursacht.

Methode 5: Die Klasse „visuell versteckt“

Bisher ist die Methode position der Methode am nächsten gekommen, mit der man Dinge in CSS zugänglich verstecken kann. Aber das Problem, dass fokussierbare Inhalte plötzliche Sprünge auf der Seite verursachen, ist nicht ideal. Ein weiterer Ansatz für zugängliches Verbergen kombiniert absolute Positionierung, die Eigenschaft clip und versteckten Overflow. Scott O’Hara hat 2017 darüber gebloggt.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Lassen Sie uns das aufschlüsseln.

Wir müssen das Element aus dem Dokumentfluss entfernen. Der beste Weg, dies zu tun, ist die Verwendung von position: absolute. Dadurch wird das Element entfernt, aber wir schieben es nicht vom Bildschirm weg.

.visually-hidden {
  position: absolute;
}

Wir können das Element verstecken, indem wir die Eigenschaften Breite und Höhe auf Null setzen. Leider funktioniert das nicht, da einige Screenreader Elemente mit null Breite und Höhe ignorieren. Was wir tun können, ist, es auf den zweitniedrigsten Wert, 1px, zu setzen. Das bedeutet, dass der Inhalt den Bereich leicht überschreitet, daher benötigen wir auch overflow: hidden, um sicherzustellen, dass er visuell nicht überläuft.

.visually-hidden {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

Um dieses Ein-Pixel-Quadrat zu verstecken, können wir die CSS-Clipping-Eigenschaft verwenden. Sie ist perfekt für diese Situation, da sie Screenreader nicht beeinflusst. Der Inhalt ist vorhanden, aber wieder visuell verborgen. Zu beachten ist, dass clip zugunsten von clip-path veraltet ist, aber immer noch benötigt wird, wenn wir ältere Versionen von Internet Explorer unterstützen müssen.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

Ein weiterer Teil des Puzzles für die Klasse „visuell versteckt“ ist die Behandlung von verquetschtem, außerbildschirmlicher Text, einer Eigenart, die Leerzeichen zwischen Wörtern entfernt, wodurch sie wie ein einziger langer Wortstring vorgelesen werden. Zum Beispiel wird „Willkommen zurück nach Hause“ als „WillkommenzurücknachHause“ gelesen.

Eine einfache Lösung für dieses Problem ist die Einstellung von white-space: nowrap

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Und schließlich! Das Letzte, was zu beachten ist, ist, bestimmten Elementen mit nativem Fokus und aktiven Websites zu erlauben, sich anzuzeigen, wenn sie im Fokus sind, während andere Elemente, wie Absätze, weiterhin daran gehindert werden, angezeigt zu werden. Dafür können wir den :not-Pseudoselektor verwenden.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Metrik	Ergebnis
Werden die versteckten Inhalte von einem Screenreader gelesen?	✅
Beeinflusst das versteckte Element das Dokumentlayout?	❌
Wird das Boxmodell des versteckten Elements gerendert?	❌
Erkennt das Element Klicks oder Fokus?	✅

Ehrenvolle Erwähnungen

Es gibt noch mehr Methoden als die fünf, die wir behandelt haben. Zum Beispiel kann die Eigenschaft text-indent Text vom Bildschirm wegschieben, ähnlich wie die Methode position.

.hidden {
  text-indent: -9999em;
}

Leider passt dieser Ansatz nicht zu RTL-Schreibmodi. Das macht ihn weniger anpassungsfähig als andere von uns behandelte Lösungen.

Eine weitere Methode ist die Verwendung von transform, um das Element zu skalieren oder aus dem Weg zu bewegen. Es funktioniert visuell nur ähnlich wie opacity.

.hidden {
  transform: scale(0);
}

Fassen wir alles zusammen!

Wir haben eine Lösung gefunden, die Inhalte visuell verbirgt, aber dennoch zugänglich ist. Sollten Sie display: none also nicht mehr verwenden? Nein, das ist immer noch der beste Weg, ein Element vollständig zu verstecken (visuell und zugänglich).

Das gesagt, es ist erwähnenswert, dass, wenn Sie das Gegenteil erreichen möchten – etwas vor dem Screenreader verstecken –, das Attribut aria-hidden="true" den Inhalt vor Screenreadern verbirgt, aber nicht visuell.

Damit ist hier eine vollständige Tabelle, die alle Ansätze vergleicht. Nutzen Sie sie als Leitfaden für Ihre Entscheidungen, wie Sie Inhalte verstecken, wenn Sie sich das nächste Mal in dieser Situation befinden.

Metrik	Display	Visibility	Opacity	Position	Zugängliche Methode
Werden die versteckten Inhalte von einem Screenreader gelesen?	❌	❌	✅	✅	✅
Beeinflusst das versteckte Element das Dokumentlayout?	❌	✅	✅	❌	❌
Wird das Boxmodell des versteckten Elements gerendert?	❌	✅	✅	✅	❌
Erkennt das Element Klicks oder Fokus?	❌	❌	✅	✅	✅