Mithilfe der beiden CSS-Eigenschaften „display“ und „visibility“ lassen sich beinahe alle Elementtypen verstecken (bzw. unsichtbar schalten) und bei Bedarf wieder anzeigen.
Diese „Tarnkappen“-Funktionalität wird vielfältig genutzt, um beispielsweise
- Inhalte besser zu strukturieren (z.B. Ziehharmonika-Effekt, der lange Texte in Abschnitte unterteilt, die erst durch Klick oder Überfahren mit der Maus gezeigt werden),
- in einem Formular bestimmte Elemente durch ein Ereignis sichtbar zu machen (z.B. zusätzliche Formulareingaben bei Bedarf anfordern),
- Elemente ab einer bestimmten Bildschirmgröße zu verstecken (z.B. mittels Media Queries)
- und noch viele weitere Einsatzmöglichkeiten.
Gut zu wissen: Unabhängig ob des Status beider Eigenschaften werden alle Inhalte des jeweiligen Elements beim Seitenaufbau geladen. Dies sollten Sie bei der Optimierung von Ladezeiten berücksichtigen.
Lesetipp: Falls Sie einen Ziehharmonika-Effekt für die Inhalte Ihrer Website suchen – auch den haben wir in unserer Trickkiste versteckt! 🙂 Ganz standardkonform mit CSS und JavaScript.
Die CSS-Eigenschaft „display“
Die Eigenschaft „display“ dient zur Steuerung der Darstellung eines Elements im Box-Modell von CSS. Sie stellt daher eine der wichtigsten Werkzeuge dar, wenn es um die Erstellung von Layouts mit Stylesheets geht. Für unsere Zwecke nutzen wir den Wert „none“.
Funktionsweise: Mit der Eigenschaft display:none; versteckte Elemente verschwinden aus dem Seitenlayout, geben also den von ihnen beanspruchten Raum frei.
Beispiel als CSS-Stylesheet:
#box1 { display:none; } /* Das Element mit der ID "box1" ist unsichtbar. */
.verstecken { display:none; } /* Alle Elemente der Klasse "verstecken" sind unsichtbar. */
.anzeigen1 { display:inline; } /* Alle Elemente der Klasse "anzeigen1" sind als Inline-Box sichtbar. */
.anzeigen2 { display:block; } /* Alle Elemente der Klasse "anzeigen2" sind als Block-Box sichtbar. */Tipp: Standardmäßig verwenden Webbrowser für die Eigenschaft „display“ den Wert „inline“.
Die CSS-Eigenschaft „visibility“
Die Eigenschaft „visibility“ hingegen ist explizit nur zum Verbergen von Inhalten vorgesehen. Sie verwendet die Werte „visible“ (englisch für „sichtbar“) und „hidden“ (englisch für „versteckt“).
Funktionsweise: Mit der Eigenschaft visibility=hidden; versteckte Elemente beanspruchen weiterhin Raum im Seitenlayout, wirken also im Zweifelsfall als weißer Fleck.
Beispiel als CSS-Stylesheet:
#box1 { visibility:hidden; } /* Das Element mit der ID "box1" ist unsichtbar. */
.anzeigen { visibility:visible; } /* Alle Elemente der Klasse "anzeigen" sind sichtbar. */Tipp: Die Standardeinstellung ist immer der Wert „visible“; Sie müssen diese Eigenschaft also im Regelfall für ein Element nicht ausdrücklich festlegen.
Die CSS-Eigenschaft „opacity“
Und dann wäre da noch die Eigenschaft „opacity“, welche den Grad der Transparenz eines Elements in Prozent festlegt (Standardwert: 100 %, also sichtbar).
Setzt man bei einem Element den Wert für diese Eigenschaft auf „0%“, können damit dieselben Effekte erzielt werden wie mit der Eigenschaft „visibility“.
Merkhilfe: „visibility“ verhält sich wie ein Lichtschalter (kennt also nur Ein/Aus), während „opacity“ wie ein Dimmer agiert (verändert die Transparenz eines Objekts in Abstufungen).
Beispiel als CSS-Stylesheet:
.verstecken { opacity:0%; } /* Alle Elemente der Klasse "verstecken" sind transparent (unsichtbar). */
.anzeigen { opacity:100%; } /* Alle Elemente der Klasse "anzeigen" sind opak (sichtbar). */Unterschiede zwischen „display“ und „visibility“
Beide Eigenschaften leisten im Grunde zwar dasselbe – sie steuern die Sichtbarkeit eines Elements, aber sie tun es doch auf zwei völlig verschiedene Weisen:
Während mit visibility:hidden; das Element nachwievor im Layout der Seite vorhanden ist, wird es mit display:none; komplett aus dem Layout entfernt und nimmt damit auch keinen Raum mehr ein.
Das lässt sich am einfachsten an folgendem Beispiel demonstrieren:
Mit den blauen Buttons steuern Sie die Eigenschaften für das mittlere Bild (um das Element wieder sichtbar zu machen, klicken Sie bitte auf den „Reset“-Button oder laden die Seite neu).
Autor: Tobias Eichner | Datum der Veröffentlichung: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
