CSS-Trickkiste: Elemente anzeigen und verstecken

Abrakadabra - und das Element is' wech...

Werbung
Mit Cascading Style Sheets (CSS) können Sie das Layout von Webseiten gestalten. Damit lassen sich individuelle Designs (z.B. Farben, Typografie, Effekte) frei nach Wunsch bestimmen.
Mit Cascading Style Sheets (CSS) können Sie das Layout von Webseiten gestalten. Damit lassen sich individuelle Designs (z.B. Farben, Typografie, Effekte) frei nach Wunsch bestimmen.
☆ 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).


Autor: Tobias Eichner | Datum der Veröffentlichung: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!