Stil mit {stil}

Feb 2009

CSS visibility • Sichtbarkeit und Verbergen von Elementen

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

Das Element nimmt mit der CSS-Regel visible: hidden weiterhin seinen normalen Platz im Layout der Webseite ein, wird aber nicht angezeigt – im Unterschied zur Eigenschaft display: none, für die ein Browser keine Box generieren darf.

CSS-Eigenschaft visibility

IE4+ M1 N6 O5+ S1 CSS2.1 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.

Verbergen übergroßer Inhalte

Die CSS-Eigenschaften visibility, overflow und clip steuern den Raum, den ein Element einnimmt und können die Darstellung übergroßer Inhalte verhindern.

Ohne weitere Angaben nehmen alle HTML-Elemente den Platz ein, den sie für die Darstellung ihrer Inhalte benötigen. Auch wenn die Höhe und Breite eines Elements angegeben werden, fließen Elemente mit übergroßen Inhalten über oder dehnen den umfassenden Block aus, so dass Teile oder der gesamte Inhalt außerhalb des umfassenden Blocks liegen. Wenn die Box durch einen sichtbaren Rahmen oder eine Hintergrundfarbe gekennzeichnet ist, wird der Effekt des Überfließens deutlich sichtbar.

Bilder mit { visibility: hidden; }

<img src="bild1.jpg" … /> 
<img style="visibility: hidden;" src="/bild2.jpg" … /> 
<img src="bild3.jpg" … />

Das mittlere Bild darf nicht angezeigt werden. Der Raum für das Bild bleibt dabei allerdings erhalten.

Text mit { visibilty: hidden; }

<p style="background: lavender;">Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. <span 
style="visibility: hidden;">Donec rhoncus sapien 
nec lectus.</span> Ut nibh. Sed laoreet. …</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus sapien nec lectus. Ut nibh. Sed laoreet. Etiam accumsan, arcu sed pulvinar gravida, nunc ante placerat erat, at luctus libero lectus a lacus.

Der Text muss eine Lücke aufweisen, die der Länge des Texts innerhalb des span-Tags entspricht.

Tabellen mit { visibilty: collapse; }

<table>
   <colgroup><col /><col /><col style="visibility: collapse;" /></colgroup>
   <tr><th></th><th>#1</th><th>#2</th><th>#3</th><th>#4</th></tr>
   <tr>
      <td>#1</td><td>380 nm</td><td>0.020</td><td>0.026</td><td style="visibility: collapse; ">0.026</td> 
   </tr>
   <tr>
      <td>#2</td><td>385 nm</td><td>0.039</td><td>0.052</td><td style="visibility: collapse; ">0.026</td> 
   </tr>
   <tr style="visibility: collapse;">
      <td>#3</td><td>390 nm</td><td>0.080</td><td>0.105</td><td style="visibility: collapse; ">0.026</td> 
   </tr>
   <tr>
      <td>#4</td><td>395 nm</td><td>0.155</td><td>0.188</td><td style="visibility: collapse; ">0.026</td> 
   </tr>
</table>

Die Eigenschaft collapse für Tabellenspalten wird zurzeit nur von Firefox 2 unterstützt. Opera und Safari zeigen Tabellenzellen innerhalb einer Zeile mit visibility: collapse ohne Inhalt, aber eine Spalte mit der Eigenschaft visibility: collapse wird sichtbar dargestellt. Firefox und Safari zeigen Tabellenzellen nicht an, wenn visibility: collapse im Stylesheet angegeben wird.

Anzeigen in diesem Browser (Spalte #2 und Zeile #3 sowie die Tabellenzellen der Spalte #5 sollen nicht sichtbar sein):

Firefox: Firefox zeigt Tabellenspalten mit der Eigenschaft { visibility: collapse; } nicht an, aber die Spalte nimmt den vorgesehenen Raum ein und die Rahmen um die Tabellenzellen wird angezeigt.

Safari und Opera zeigen Tabellenzeilen und Tabellenzellen mit der Eigenschaft { visibilty: collapse;} nicht an, daber die Zeile / Zelle nimmt den ursprünglich vorgesehenen Raum ein.

Darstellung von { visibility: collapse; } bei Tabellenzeilen, Tabellenspalten und Tabellenzellen in Firefox (links) und in Safari bzw. Opera (rechts).

zurück zum Seitenanfang