CSS visibility • Sichtbar oder Versteckt

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;

Ein Element mit visibility: hidden wird nicht angezeigt, aber nimmt Platz ein. Elemente mit display: none werden nicht angezeigt und belegen keinen Platz.

#img1 { border: 2px solid gray; }
#img2 { border: 2px solid gray; }
#img3 { 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

CSS visibility: collapse für Tabellenspalten, -reihen und -zellen wird von allen Browsern unterstützt, zuverläßig bleiben thead, tbody, tr und th verborgen. Bei col und colgroup hingegen reagieren die Browser inkonsistent.

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

Safari zeigt Tabellenzeilen und Tabellenzellen mit der Eigenschaft { visibilty: collapse } nicht an, daber die Zeile / Zelle nimmt den ursprünglich vorgesehenen Raum ein. In Chrome kollabieren die Zellen vollständig, Safari schlägt den Raum der unsichtbaren Zellen frei und kümmert sich nicht um col-Elemente.

Anzeigen in diesem Browser:

Spalte #2 und Zeile #3 sowie die Tabellenzelle unten in Spalte #1 sollten nicht sichtbar sein.