visibility CSS property

Probieren Sie es aus

visibility: visible;

visibility: hidden;

visibility: collapse;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Hide me</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Um ein Element sowohl zu verbergen als auch aus dem Dokument-Layout zu entfernen, setzen Sie die display-Eigenschaft auf none, anstatt visibility zu verwenden.

Syntax

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

Die visibility-Eigenschaft wird als einer der unten aufgeführten Schlüsselwerte angegeben.

Werte

visible

Das Elementfeld ist sichtbar.

hidden

Das Elementfeld ist unsichtbar (nicht gezeichnet), beeinflusst aber das Layout wie gewohnt. Nachfolgende Elemente sind sichtbar, wenn sie visibility auf visible gesetzt haben. Das Element kann keinen Fokus erhalten (wie z.B. beim Navigieren durch tab indexes).

collapse

Das collapse-Schlüsselwort hat unterschiedliche Auswirkungen auf verschiedene Elemente:

• Für Reihen, Spalten, Spaltengruppen und Zeilengruppen von <table>, werden die Reihe(n) oder Spalte(n) verborgen, und der Platz, den sie eingenommen hätten, wird entfernt (als ob display: none auf die Spalte/Reihe der Tabelle angewendet würde). Die Größe anderer Reihen und Spalten wird jedoch weiterhin so berechnet, als ob die Zellen in der zusammengebrochenen Reihe(n) oder Spalte(n) vorhanden wären. Dieser Wert ermöglicht das schnelle Entfernen einer Reihe oder Spalte aus einer Tabelle, ohne die Neuberechnung der Breiten und Höhen der gesamten Tabelle zu erzwingen.
• Zusammengebrochene Flex-Items und Ruby-Anmerkungen werden verborgen, und der Platz, den sie eingenommen hätten, wird entfernt.
• Bei anderen Elementen wird collapse wie hidden behandelt.

Barrierefreiheit

Die Verwendung eines visibility-Wertes von hidden auf einem Element entfernt es aus dem Zugänglichkeit-Baum. Dies führt dazu, dass das Element und alle seine untergeordneten Elemente nicht mehr von Bildschirmlesetechnologien angekündigt werden.

Interpolation

Bei Animationen werden Sichtbarkeitswerte zwischen visible und not-visible interpoliert. Einer der Start- oder Endwerte muss daher visible sein, ansonsten kann keine Interpolation stattfinden. Der Wert wird als diskreter Schritt interpoliert, wobei Werte der Übergangsfunktion zwischen 0 und 1 auf visible gemappt werden und andere Werte der Übergangsfunktion (die nur am Anfang/Ende des Übergangs oder als Ergebnis von cubic-bezier()-Funktionen mit y-Werten außerhalb von [0, 1] auftreten) auf den näheren Endpunkt gemappt werden.

Hinweise

• Die Unterstützung für visibility: collapse fehlt oder ist in einigen modernen Browsern teilweise fehlerhaft. Sie wird möglicherweise nicht korrekt wie visibility: hidden bei anderen Elementen als Tabellenzeilen und -spalten behandelt.
• Wenn auf Tabellenzeilen angewendet, enthält die Tabelle Zellen (<td>- und <th>-Elemente), die sowohl sichtbare als auch kollabierte Reihen überspannen, kann die Zelle auf unerwartete Weise gerendert werden. Wenn die überspannende Zelle in einer kollabierten Reihe definiert ist, wird die Tabellenzelle von den Browsern nicht gerendert, als ob die Zellen in darauf folgenden Reihen mit visibility: collapse versehen wären. Wenn die Zelle in einer sichtbaren Reihe definiert ist und eine kollabierte Reihe überspannt, wird der Inhalt der Zelle nicht neu geflossen, aber die Darstellung der Zelle selbst variiert je nach Browser. Die meisten Browser verkleinern die Blockgröße der Zelle um die Blockgröße der verborgenen Reihe. Das bedeutet, dass der Inhalt in die Blockgrößenrichtung größer als die Zelle sein kann. Je nach Browser werden die überfließenden Inhalte entweder beschnitten, als ob overflow: hidden gesetzt wäre, während der Inhalt in die folgende Reihe in anderen Browsern hineinfließt, als ob overflow: visible gesetzt wäre. In anderen Browsern wird die Zelle angezeigt, als ob die Reihe nicht zusammengebrochen wäre, wobei alle anderen Zellen der Reihe verborgen sind, als ob visibility: collapse auf individuelle Zellen anstatt auf die gesamte Reihe gesetzt wäre.
• visibility: collapse kann das Layout einer Tabelle ändern, wenn die Tabelle geschachtelte Tabellen innerhalb der Zellen enthält, die zusammengebrochen sind, es sei denn, visibility: visible ist explizit auf geschachtelten Tabellen angegeben.

Formale Definition

Formale Syntax

visibility = 
  visible       |
  hidden        |
  force-hidden  |
  collapse      

Beispiele

Einfaches Beispiel

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

Tabellenbeispiel

HTML

<table>
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="collapse">1.2</td>
      <td>1.3</td>
    </tr>
    <tr class="collapse">
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </tbody>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• display
• SVG visibility Attribut