Übung 11: Ein Element verstecken, ohne eine Lücke zu lassen

Hinweise

Lösung

.extra { display: none; }

Warum visibility hier nicht reicht

Beide Eigenschaften machen ein Element unsichtbar, aber nur eine nimmt ihm den Platz. visibility: hidden erzeugt die Box wie gewohnt und zeichnet sie nur nicht – die Lücke bleibt, und die Nachbarn rücken nicht zusammen. display: none erzeugt gar keine Box; das Element ist für das Layout nicht vorhanden.

Ein zweiter Unterschied betrifft die Kinder. Die Sichtbarkeit wird vererbt, lässt sich an einem Kind aber ausdrücklich wieder einschalten – ein sichtbares Element in einem unsichtbaren Container ist also möglich. Bei der Anzeigeart gibt es das nicht: Wo keine Box entsteht, entsteht auch für die Kinder keine.

Für die Sprachausgabe verhalten sich beide gleich: Weder der eine noch der andere Wert wird vorgelesen, und fokussieren lässt sich in beiden Fällen nichts. Wer etwas nur optisch verbergen, aber vorlesbar halten will, darf deshalb keinen von beiden nehmen.

Der dritte Weg für vorlesbare Inhalte

Für eine Beschriftung, die ein Symbol erklärt, oder für einen Sprunglink am Seitenanfang gibt es eine eigene Technik: Das Element wird auf ein Pixel verkleinert, sein Überlauf abgeschnitten und es selbst aus dem sichtbaren Bereich geschoben. Es bleibt damit im Baum, wird vorgelesen und nimmt optisch keinen Raum ein.

Wichtig ist, dass die Technik nicht mit einer Verschiebung weit nach links arbeitet – das bricht in Dokumenten mit rechtsläufiger Schrift. Die Fassung mit Zuschnitt und Größe null ist die robuste, und sie steht in praktisch jedem Grundgerüst unter demselben Namen.

Für einen Sprunglink gehört dazu, dass er beim Tastaturfokus wieder sichtbar wird – sonst springt der Fokus an eine Stelle, die niemand sieht. Das ist eine der wenigen Situationen, in denen sichtbar und unsichtbar vom Zustand abhängen und nicht vom Medium.

Umschalten und die Kosten

Beide Eigenschaften werden meist nicht fest gesetzt, sondern umgeschaltet. Dabei zeigt sich ein Unterschied im Aufwand: Das Einblenden über die Anzeigeart zwingt den Browser, das Layout des Bereichs neu zu berechnen, weil eine Box hinzukommt; das Einblenden über die Sichtbarkeit ändert nur, was gezeichnet wird.

Dazu kommt, dass die Sichtbarkeit einen Übergang zulässt und die Anzeigeart nicht. Für einen weichen Wechsel wird deshalb üblicherweise die Deckkraft animiert und die Anzeigeart erst am Ende umgeschaltet – wofür es inzwischen eine eigene Eigenschaft gibt, die genau diesen Zeitpunkt regelt.

Und es gibt einen dritten Weg, der ohne Stylesheet auskommt: das Attribut im Dokument, das im Vorgabe-Stylesheet als display: none hinterlegt ist. Der Zustand steht dann im Dokument statt in einer Klasse. Die Falle dabei: Jede eigene Regel mit einer Anzeigeart überschreibt es stillschweigend – ein Baustein mit display: flex bleibt sichtbar, obwohl das Attribut gesetzt ist.

Ausblenden nach Bedingung

Selten soll ein Element immer verschwinden. Der häufige Fall ist ein bedingtes Ausblenden – auf schmalen Bildschirmen, beim Drucken, in einer Ansicht mit reduzierter Bewegung. Weil die Anzeigeart die Box ganz entfernt, rücken die Nachbarn dabei zuverlässig zusammen, und es bleibt keine Lücke, die über die ganze Seite mitwandert.

Dabei lohnt eine Unterscheidung, die oft übersehen wird: Ein Inhalt, der auf schmalen Bildschirmen keinen Platz hat, ist etwas anderes als ein Inhalt, den dort niemand braucht. Im ersten Fall gehört er in ein Aufklappelement, damit er erreichbar bleibt; im zweiten kann er wegfallen. Wer beides gleich behandelt, versteckt regelmäßig etwas, das gerade auf dem Telefon am wichtigsten wäre.

Und es gibt einen Fall, in dem gar nichts ausgeblendet werden sollte: derselbe Inhalt zweimal im Dokument, einmal für schmale und einmal für breite Bildschirme, und je nach Breite wird eine Fassung verborgen. Das verdoppelt den Text im Baum, verdoppelt die Pflege und lässt Suchmaschinen zwei Fassungen sehen. Ein einziges Element, dessen Anordnung sich ändert, ist immer der bessere Weg.

Der Prüfer stellt hier zwei Fragen: ob der Hinweis unsichtbar ist und ob der Abstand zwischen den beiden Absätzen dem ohne den Hinweis entspricht. Damit fällt jede Lösung durch, die das Element nur unsichtbar macht und seinen Platz behält – und genau das ist der Unterschied, um den es geht. Der Vergleich display vs visibility geht ihn Fall für Fall durch.

Fragen zur Übung