visibility

Свойство visibility скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы <table> (en-US).

Чтобы скрыть и удалить элемент из разметки, установите свойству 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

Синтаксис

visible | (en-US) hidden | (en-US) 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 не указан явно для вложенной таблицы.

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

Specification Status Comment
CSS Flexible Box Layout Module
Определение 'visibility' в этой спецификации.
Кандидат в рекомендации Определяет значение collapse применимым к flex элементам
CSS Box Model
Определение 'visibility' в этой спецификации.
Кандидат в рекомендации Без изменений
CSS Transitions
Определение 'visibility' в этой спецификации.
Рабочий черновик Определяет visibility как анимируемое.
CSS Level 2 (Revision 1)
Определение 'visibility' в этой спецификации.
Рекомендация Изначальное определение

Начальное значениеvisible
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано
Animation typeвидимость

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

BCD tables only load in the browser