visibility

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

/* 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üsselwortwerte angegeben.

visible

Das Elementfeld ist sichtbar.

hidden

Das Elementfeld ist unsichtbar (nicht gezeichnet), beeinflusst das Layout jedoch normal. Nachkommende Elemente werden sichtbar sein, wenn sie visibility auf visible gesetzt haben. Das Element kann keinen Fokus erhalten (wie beim Navigieren durch Tab-Indizes).

collapse

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

• Für Zeilen, Spalten, Spaltengruppen und Zeilengruppen einer <table> sind die Zeile(n) oder Spalte(n) ausgeblendet und der Platz, den sie eingenommen hätten, wird entfernt (als ob display: none auf die Spalte/Zeile der Tabelle angewendet worden wäre). Die Größe anderer Zeilen und Spalten wird jedoch immer noch so berechnet, als wären die Zellen in den ausgeblendeten Zeilen oder Spalten vorhanden. Dieser Wert ermöglicht die schnelle Entfernung einer Zeile oder Spalte aus einer Tabelle, ohne eine Neuberechnung der Breiten und Höhen für die gesamte Tabelle zu erzwingen.
• Zusammengestellte Flex-Elemente und Ruby-Anmerkungen sind ausgeblendet, und der Platz, den sie eingenommen hätten, wird entfernt.
• Für andere Elemente wird collapse wie hidden behandelt.

Die Verwendung eines visibility-Werts von hidden bei einem Element entfernt es aus dem Barrierefreiheitsbaum. Dadurch werden das Element und alle seine nachfolgenden Elemente nicht mehr von Bildschirmlesetechnologien angekündigt.

Beim Animieren werden Sichtbarkeitswerte zwischen sichtbar und nicht-sichtbar interpoliert. Eines der Start- oder Endwerte muss daher visible sein, damit eine Interpolation stattfinden kann. Der Wert wird als diskreter Schritt interpoliert, bei dem Werte der Übergangsfunktion zwischen 0 und 1 auf visible abgebildet werden und andere Werte der Übergangsfunktion (die nur zu Beginn/Ende des Übergangs oder als Ergebnis von cubic-bezier()-Funktionen mit y-Werten außerhalb von [0, 1] auftreten) auf den näheren Endpunkt abgebildet werden.

• Die Unterstützung für visibility: collapse fehlt oder ist in einigen modernen Browsern teilweise fehlerhaft. Es kann nicht korrekt wie visibility: hidden bei anderen Elementen als Tabellenzeilen und -spalten behandelt werden.
• Wenn auf Tabellenzeilen angewendet, enthält die Tabelle Zellen (<td> <tr>-Elemente), die sowohl sichtbare als auch zusammengeklappte Zeilen überspannen, kann die Zelle auf unerwartete Weise gerendert werden. Wenn die überspannende Zelle in einer zusammengeklappten Zeile definiert ist, rendern Browser die Tabellenzelle nicht, als ob die Zellen in nachfolgenden Zeilen mit visibility: collapse vorhanden wären. Wenn die Zelle in einer sichtbaren Zeile definiert ist und eine zusammengeklappte Zeile überspannt, werden die Zellinhalte nicht neu angeordnet, jedoch variiert die Darstellung der Zelle selbst je nach Browser. Die meisten Browser verringern die Blockgröße der Zelle um die Blockgröße der versteckten Zeile. Dies bedeutet, dass die Inhalte möglicherweise größer sind als die Zelle in der Blockrichtungsrichtung. Je nach Browser werden die überstehenden Inhalte entweder abgeschnitten, als ob overflow: hidden eingestellt wäre, während in anderen Browsern die Inhalte in die nachfolgende Zeile hineinbluten, als ob overflow: visible eingestellt wäre. In anderen Browsern wird die Zelle gerendert, als ob die Zeile nicht zusammengeklappt wäre, mit allen anderen Zellen in der Zeile verborgen, als ob visibility: collapse auf einzelne Zellen angewendet worden wäre und nicht auf die Zeile selbst.
• visibility: collapse kann das Layout einer Tabelle ändern, wenn die Tabelle verschachtelte Tabellen innerhalb der Zellen enthält, die zusammengeklappt sind, es sei denn, visibility: visible ist explizit auf verschachtelte Tabellen festgelegt.

visibility = 
  visible   |
  hidden    |
  collapse  

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

HTML

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

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

• display
• SVG visibility Attribut