Свойство CSS `visibility`

Свойство visibility CSS показывает или скрывает элемент, не изменяя макет документа. Это свойство также может скрывать строки или столбцы в <table>.

Чтобы одновременно скрыть элемент и удалить его из макета документа, задайте свойству display значение none вместо использования 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: 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;
}

Синтаксис

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

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

Свойству visibility задаётся одно из перечисленных ниже ключевых значений.

Значения

visible

Блок элемента видим.

hidden

Блок элемента невидим (не отображается), но по-прежнему участвует в макете как обычно. Потомки элемента будут видимы, если для них задано visibility со значением visible. Элемент не может получать фокус (например, при перемещении по индексам табуляции).

collapse

Ключевое слово collapse по-разному действует на разные элементы:

• Для строк, столбцов, групп столбцов и групп строк <table> соответствующие строки или столбцы скрываются, а занимаемое ими пространство удаляется (как если бы к столбцу или строке таблицы применялось display: none). Однако размеры остальных строк и столбцов вычисляются так, как если бы ячейки в свёрнутых строках или столбцах присутствовали. Это значение позволяет быстро удалить строку или столбец из таблицы, не вызывая перерасчёт ширины и высоты всей таблицы.
• Свёрнутые flex-элементы и аннотации ruby скрываются, а занимаемое ими пространство удаляется.
• Для остальных элементов collapse действует так же, как hidden.

Доступность

Использование для элемента значения visibility hidden удаляет его из дерева доступности. В результате программы экранного доступа перестанут озвучивать этот элемент и все его дочерние элементы.

Интерполяция

При анимации значения visibility интерполируются между видимым и невидимым состояниями. Поэтому одним из начальных или конечных значений должно быть visible, иначе интерполяция невозможна. Значение интерполируется дискретными шагами: значения функции сглаживания между 0 и 1 соответствуют visible, а остальные значения функции сглаживания (возникающие только в начале или конце перехода либо в результате функций cubic-bezier() со значениями y за пределами [0, 1]) соответствуют ближайшей конечной точке.

Примечания

• В некоторых современных браузерах поддержка visibility: collapse отсутствует или работает некорректно. На элементах, отличных от строк и столбцов таблицы, это значение может обрабатываться не так, как visibility: hidden.
• Если свойство применено к строкам таблицы, содержащей ячейки (<td> и <th>), охватывающие одновременно видимые и свёрнутые строки, ячейка может отображаться неожиданным образом. Если ячейка, охватывающая несколько строк, определена в свёрнутой строке, браузеры не отображают её — так же, как если бы для ячеек в последующих строках было задано visibility: collapse. Если ячейка определена в видимой строке и охватывает свёрнутую строку, её содержимое не перераспределяется, но отображение самой ячейки зависит от браузера. Большинство браузеров уменьшают блочный размер ячейки на блочный размер скрытой строки. Из-за этого содержимое может оказаться больше ячейки в направлении блочного размера. В зависимости от браузера переполняющее содержимое либо обрезается, как если бы было задано overflow: hidden, либо выходит за границы и перекрывает следующую строку, как если бы было задано overflow: visible. В других браузерах ячейка отображается так, как если бы строка не была свёрнута, а все остальные ячейки строки скрывались так, как если бы visibility: collapse задавалось для отдельных ячеек, а не для самой строки.
• visibility: collapse может изменить макет таблицы, если в её ячейках есть вложенные таблицы, которые свёрнуты, кроме случаев, когда для вложенных таблиц явно задано visibility: visible.

Формальное определение

Формальный синтаксис

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

Спецификации

Совместимость с браузерами

См. также

• display
• Атрибут visibility в SVG