CSS visibility • Sichtbar oder Versteckt

CSS visibility: sichtbar und unsichtbar

visibility steuert, ob ein Element im Browser sichtbar dargestellt wird oder unsichtbar bleibt. Mit visibility : hidden nehmen HTML-Elemente weiterhin ihren normalen Platz im Layout der Webseite ein, werden aber nicht angezeigt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

visibility hidden vs display:none

Mit visibility : hidden erzeugt der Browser einen leeren Block mit der Größe seines Inhalts – im Gegensatz zu CSS display : none. In beiden Fällen bleibt aber das HTML-Element im Quelltext sichtbar.

Was sie gemeinsam haben: Weder visibility: hidden noch display: none lassen sich animieren, denn ihre Werte sind »binär« und nicht numerisch.

+
box.hidden {
	visibility: hidden; 
}

Obwohl der Browser die Box generiert, »schlagen die Links nicht durch« – sie reagieren nicht auf das Hovern mit der Maus.

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;

Demo visibility 1
Demo display:none
Demo visibility 2
#img1 img { border: 2px solid gray; }
#img2 img { border: 2px solid gray; }
#img3 img { border: 2px solid gray; }

Ein Klick auf den Toggle-Button setzt die Bilder links und rechts auf den CSS-Stil visibility: hidden, das mittlere Bild auf 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
#1 380 nm 0.020 0.026 0.026
#2 385 nm 0.039 0.052 0.026
#3 390 nm 0.080 0.105 0.026
#4 395 nm0.1550.1880.026