CSS-Trickkiste: Elemente anzeigen und verstecken

Hokuspokus - und das Element is' wech...

Werbung
Die Sichtbarkeit von HTML-Elementen steuern wird mit CSS zum Kinderspiel.
Die Sichtbarkeit von HTML-Elementen steuern wird mit CSS zum Kinderspiel.
☆ Dieser Artikel liegt in unserer CSS-Trickkiste – reingucken lohnt sich… ☆

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).


Stand der Informationen: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag !

Werbung