PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: visibility, Kategorien: Bildschirm­darstellung (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.

CSS-Eigenschaft: visibility
KurzbeschreibungWerteStandardwertKategorieHinweis
Sichtbarkeit
  • visible
  • hidden
  • collapse
  • inherit
visible
Allgemein:
Bildschirm­darstellung
CSS 2.1:
Visual effects
CSS 3:
Basic Box Model
 

Verwandte Eigenschaften aus der Kategorie: Bildschirm­darstellung (allgemein), Visual effects (CSS 2.1), Basic Box Model (CSS 3):

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.
Browserunterstützung von visibility
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu visibility:



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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.043 sec.