CSS-Eigenschaft: visibility, Kategorien: Bildschirmdarstellung (allgemein), Visual effects (CSS 2.1), Basic Box Model (CSS 3)
Sichtbarkeit
Bestimmt die Sichtbarkeit eines HTML-Elements, ohne Einfluss auf den Elementfluss, d.h., dieser bleibt unverändert.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Sichtbarkeit |
| visible |
|
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Visual effects (CSS 2.1), Basic Box Model (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- clear
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- height
- justify-content
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- Aktuelle Seite: visibility
- width
- zoom
Folgendes ist beim Einsatz von visibility zu beachten:
- visibility: hidden blendet HTML-Elemente aus, jedoch OHNE dass der Platz, der von dem Element eingenommen wird, freigegeben wird. Sprich, der reservierte Platz des HTML-Elements bleibt leer.
- Die Eigenschaft collapse ist für Tabellenelemente gedacht, wird diese auf andere Elemente angewendet, verhält sich collapse wie hidden.
- display: none verhält sich ähnlich, allerdings nimmt display: none das HTML-Element komplett aus dem Elementfluss heraus, was den Unterschied zu visibility: hidden ausmacht.
- visibility: collapse ist für das Ausblenden von Zellen in Tabellen gedacht. Dies entspricht der Eigenschaft empty-cells: hide. ALLERDINGS: empty-cells verliert die Wirkung, wenn die Eigenschaft des Zellenzusammenfalls border-collapse: auf collapse gesetzt ist. Dies ist bei visibility: collapse anders, auch hier werden Zellen ausgeblendet, wenn border-collapse: collapse; gesetzt ist.
- visibility: collapse ist eine eher selten eingesetzte Eigenschaft. Die Demo dient an dieser Stelle eher der Vollständigkeit.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu visibility:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
vertical-align - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
voice-balance
Beispiele
HTML:
<div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
</div>
CSS:
div {
border: 1px solid #000;
height: 200px;
}
div div {
width: 75px;
height: 75px;
float: left;
margin: 5px;
border: 5px solid #c0c0c0;
}
div div.doRed {
background-color: red;
}
div div.doBlue {
background-color: blue;
}
div div.doYellow {
background-color: yellow;
}
div div.doGreen {
background-color: green;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="doNo">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
</div>
CSS:
div.doNo div.doRed {
visibility: hidden;
}
/* Elemente werden nicht mehr angezeigt, ABER der Platz im Elementfluss bleibt erhalten. */
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="doColl">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
</div>
CSS:
div.doColl div.doRed {
visibility: collapse;
}
/* collapse verhält sich bei Elementen außer TD und TH wie hidden. */
Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="doDisNo">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
</div>
CSS:
div.doDisNo div.doRed {
display: none;
}
/* Über display:none wird ein Element ebenfalls ausgeblendet, zusätzlich wird der Platz freigegeben, der Elementfluss schiebt sich zusammen. */
Beispiel Nr. 4 So sieht's aus:
HTML:
<table>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td class="doCollapse">2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td class="doCollapse">3 2</td>
<td class="doEmpty"></td>
</tr>
</table>
CSS:
table {
border: 5px solid blue;
}
td {
border: 2px solid #880000;
background-color: #FFFF5D;
padding: 10px;
}
td.doCollapse {
visibility: collapse;
}
/* visibility: collapse; verhält sich wie hidden, hat nichts mit dem border-collapse im nächsten Beispiel zu tun */
td.doEmpty {
empty-cells: hide;
}
Beispiel Nr. 5 So sieht's aus:
1 1 | 1 2 | 1 3 |
2 1 | 2 2 | 2 3 |
3 1 | 3 2 |
HTML:
<table class="doColl">
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td class="doCollapse">2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td class="doCollapse">3 2</td>
<td class="doEmpty"></td>
</tr>
</table>
CSS:
table.doColl {
border-collapse: collapse;
}
/* empty-cells wirkt nicht, weil es ein border-collapse: separate voraussetzt. */
Beispiel Nr. 6 So sieht's aus:
1 1 | 1 2 | 1 3 |
2 1 | 2 2 | 2 3 |
3 1 | 3 2 |
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!