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

Чтобы скрыть и удалить элемент из разметки, установите свойству display значение none, вместо использования visibility.

Синтаксис

/* Значения */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Глобальные значения */
visibility: inherit;
visibility: initial;
visibility: unset;

Свойство visibility указывается в качестве одного из значений ниже.

Значения

visible

Значение по умолчанию, элемент виден.

hidden

Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible. Элемент не может получить focus (например, при навигации с помощью tabindex).

collapse

* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display: none применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.

• Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
• Для других элементов collapse обрабатывается также, как hidden

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

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

visibility = 
  visible       |
  hidden        |
  force-hidden  |
  collapse      

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

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

Примеры

Базовый пример

HTML

<p class="visible">Первый параграф виден.</p>
<p class="not-visible">Второй параграф не виден.</p>
<p class="visible">
  Третий параграф также виден. Заметь, второй параграф занимает место.
</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;
}

Соображения доступности

Использование visibility со значением hidden на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.

Примечания

• Поддержка visibility:collapse отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать visibility:hidden со столбцами и строками.
• visibility:collapse может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока visibility:visible не указан явно для вложенной таблицы.

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

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