visibility

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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

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

Um ein Element sowohl zu verbergen als auch aus dem Dokumentlayout 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 aufgelisteten Schlüsselwortwerte angegeben.

visible

Das Elementfeld ist sichtbar.

hidden

Das Elementfeld ist unsichtbar (nicht gezeichnet), beeinflusst aber das Layout wie gewohnt. Nachfahren des Elements werden sichtbar, wenn sie visibility auf visible gesetzt haben. Das Element kann keinen Fokus erhalten (zum Beispiel beim Navigieren durch Tab-Indexe).

collapse

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

• Für <table>-Zeilen, -Spalten, -Spaltengruppen und -Zeilengruppen werden die Zeile(n) oder Spalte(n) ausgeblendet und der Raum, den sie belegt 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 weiterhin berechnet, als ob die Zellen in der zusammengeklappten Zeile(n) oder Spalte(n) vorhanden wären. Dieser Wert ermöglicht das schnelle Entfernen einer Zeile oder Spalte aus einer Tabelle, ohne die Breiten und Höhen der gesamten Tabelle neu zu berechnen.
• Zusammengeklappte Flex-Elemente und Ruby-Anmerkungen werden ausgeblendet, und der Raum, den sie belegt hätten, wird entfernt.
• Für andere Elemente wird collapse wie hidden behandelt.

Wenn visibility auf einen Wert von hidden gesetzt wird, wird das Element aus dem Zugänglichkeitstree entfernt. Dies führt dazu, dass das Element und alle seine Nachfahren nicht mehr von Bildschirmlesetechnologien angekündigt werden.

Beim Animieren werden Sichtbarkeitswerte zwischen sichtbar und nicht sichtbar interpoliert. Einer der Start- oder Endwerte muss daher visible sein, sonst kann keine Interpolation stattfinden. Der Wert wird als diskreter Schritt interpoliert, wobei Werte der Easing-Funktion zwischen 0 und 1 zu visible und andere Werte der Easing-Funktion (die nur am Anfang/Ende der Transition oder als Ergebnis von cubic-bezier()-Funktionen mit y-Werten außerhalb von [0, 1] auftreten) zum näher gelegenen Endpunkt mappen.

• Unterstützung für visibility: collapse fehlt oder ist in einigen modernen Browsern teilweise inkorrekt. Es wird möglicherweise nicht korrekt wie visibility: hidden bei anderen Elementen als Tabellenzeilen und -spalten behandelt.
• Wenn auf Tabellenzeilen angewendet, und die Tabelle Zellen enthält (<td> <tr>-Elemente), die sowohl sichtbare als auch zusammengeklappte Zeilen überspannen, kann die Zelle auf unerwartete Weise dargestellt werden. Wenn die überspannende Zelle in einer zusammengeklappten Zeile definiert ist, rendern Browser die Tabellenzelle nicht, als ob die Zellen in den 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 umgebrochen, aber die Darstellung der Zelle selbst variiert je nach Browser. Die meisten Browser reduzieren die Blockgröße der Zelle um die Blockgröße der versteckten Zeile. Das bedeutet, dass die Inhalte in der Blockgrößenrichtung größer als die Zelle sein können. Je nach Browser werden die überlappenden Inhalte entweder abgeschnitten, als ob overflow: hidden gesetzt wäre, während in anderen Browsern die Inhalte in die nachfolgende Zeile übergehen, als ob overflow: visible gesetzt wäre. In anderen Browsern wird die Zelle gerendert, als wäre die Zeile nicht zusammengeklappt, wobei alle anderen Zellen in der Zeile ausgeblendet werden, als ob visibility: collapse auf einzelne Zellen anstatt auf die Zeile selbst gesetzt wäre.
• visibility: collapse kann das Layout einer Tabelle ändern, wenn die Tabelle verschachtelte Tabellen in den zusammengeklappten Zellen enthält, es sei denn, visibility: visible wird explizit auf verschachtelten Tabellen angegeben.

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