CSS, HTML und Javascript mit {stil}

CSS visibility • Sichtbar oder Versteckt

CSS visibility Sichtbar oder unsichtbar

CSS visibility steuert, ob ein Element im Browser sichtbar oder unsichtbar dargestellt wird.

Ohne weitere Angaben nehmen alle HTML-Elemente den Platz ein, den sie für die Darstellung ihrer Inhalte benötigen. Mit CSS visibility: hidden nehmen HTML-Elemente weiterhin ihren normalen Platz im Layout der Webseite ein, werden aber nicht angezeigt.

Im Gegensatz zu visibility: hidden erzeugt der Browser beim CSS-Stil display: none keine Box. In beiden Fällen bleibt aber natürlich das HTML-Element im Quelltext sichtbar.

Ein weiterer Unterschied zwischen visibility: hidden und display: none offenbart sich mit CSS3 transition:

  • visibility kann mit CSS animiert werden,
  • display nicht.

Der Fade-Effekt in diesem Beispiel beruht ausschließlich auf CSS und funktioniert ohne Javascript.

  • Menü 1
    • U-Menü 1
    • U-Menü 2
    • U-Menü 3
    • U-Menü 4
  • Menü 2
    • U-Menü 1
    • U-Menü 2
    • U-Menü 3
    • U-Menü 4

Da der Browser die Box zwar nicht anzeigt, aber dennoch generiert, »schlagen die Links durch« – sie reagieren auf das Hovern mit der Maus. Das kann für anderen Effekt genutzt werden:

Drop-Down-Menüs sind umstritten, denn sie sind nicht unbedingt barrierefrei. In der Tat kann es passieren, dass eine flinke Maus den Hover-Link schnell überfährt oder der Block zu schnell wieder unsichtbar wird. In einer Konstellation wie hier reagiert das Menü zuverlässig auf eine große Fläche.

CSS visibility

Erblich: Ja

visibility
entscheidet, ob ein Element sichtbar ist oder nicht. Ein unsichtbares Element ist vollständig transparent, belegt aber weiterhin Platz auf der Seite und andere Elemente können den Raum nicht einnehmen
Werte
collapse | hidden | visible
collapse
verbirgt Zeilen oder Spalten einer Tabelle. Eine verborgene Zeile oder Spalte kann für andere Inhalte benutzt werden. Für alle anderen Elemente hat collapse die gleichen Auswirkungen wie der Wert hidden.
collapse wird von Internet Explorer nicht unterstützt.
hidden
bestimmt, dass ein Element auf der Seite nicht sichtbar ist.
visible
ist die Vorgabe und bestimmt, dass ein Element auf der Seite sichtbar ist.

CSS visibility: hidden vs. display: none;

Die Bilder links und rechts haben den CSS-Stil visibility: hidden, das mittlere Bild display: none. Wenn das mittlere Bild verborgen wird, muss sein Raum kollabieren und das rechte Bild muss auf Platz 2 rutschen.

Tabellen mit visibility: collapse

<table>
   <colgroup><col />
             <col />
             <col style="visibility: collapse;" />
             <col /></colgroup>
   …
   <tr style="visibility: collapse;">
      <td>#3</td> …
   </tr>
   <tr>
      <td>#4</td><td style="visibility: collapse; ">395 nm</td> …
   </tr>
</table>

Tabellen mit visibility: collapse;

  • CSS visibility: collapse für Tabellenspalten wird von Firefox, Opera und IE 9 unterstützt. Firefox zeigt Tabellenspalten mit visibility: collapse nicht an, aber die Spalte nimmt den vorgesehenen Raum ein und die Rahmen um die Tabellenzellen wird angezeigt.
  • In IE 9 und in Opera kollabiert Spalte #2 und hinterlässt keinen freien Raum.

Tabellenzeilen und -zellen mit visibility: collapse;

  • Safari zeigt Tabellenzeilen und Tabellenzellen mit der Eigenschaft { visibilty: collapse;} nicht an, daber die Zeile / Zelle nimmt den ursprünglich vorgesehenen Raum ein.
  • In IE 9 und Opera kollabiert Tabellenzeile #3 und nimmt keinen Raum ein. Die Tabellenzelle wird nicht angezeigt.

Anzeigen in diesem Browser (Spalte #2 und Zeile #3 sowie die Tabellenzelle unten in Spalte #1 sollten nicht sichtbar sein):

#1#2#3#4
#1380 nm0.0200.0260.026
#2385 nm0.0390.0520.026
#3390 nm0.0800.1050.026
#4395 nm0.1550.1880.026