visibility

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

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

Синтаксис

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

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

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

Значения

  • Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display: none примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.
  • Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
  • Для других элементов collapse обрабатывается также, как hidden
visible
Значение по умолчанию, элемент виден.
hidden
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible. Элемент не может получить focus (например, при навигации с помощью tabindex).
collapse

Синтаксис

visible | hidden | collapse

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

Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible, интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() cо значениями вне [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 Basic Box Model
Определение 'visibility' в этой спецификации.
Рабочий черновик Без изменений
CSS Transitions
Определение 'visibility' в этой спецификации.
Рабочий черновик Определяет visibility как анимирумое.
CSS Level 2 (Revision 1)
Определение 'visibility' в этой спецификации.
Рекомендация Изначальное определение
Начальное значениеvisible
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typeвидимость
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
visibilityChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Internet Explorer doesn't support visibility: initial.
Замечания Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
collapseChrome Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Chrome treats visibility: collapse like hidden, leaving a white gap.
Замечания Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Полная поддержка 10Opera Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Opera treats visibility: collapse like hidden, leaving a white gap.
Замечания Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari Полная поддержка 1.3
Замечания
Полная поддержка 1.3
Замечания
Замечания Safari treats visibility: collapse like hidden, leaving a white gap.
Замечания Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android Полная поддержка ≤37
Замечания
Полная поддержка ≤37
Замечания
Замечания WebView treats visibility: collapse like hidden, leaving a white gap.
Замечания WebView supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Chrome Android Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания Chrome treats visibility: collapse like hidden, leaving a white gap.
Замечания Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android Полная поддержка 14
Замечания
Полная поддержка 14
Замечания
Замечания Opera treats visibility: collapse like hidden, leaving a white gap.
Замечания Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari iOS Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Safari treats visibility: collapse like hidden, leaving a white gap.
Замечания Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android Полная поддержка 1.0
Замечания
Полная поддержка 1.0
Замечания
Замечания Samsung Internet treats visibility: collapse like hidden, leaving a white gap.
Замечания Samsung Internet supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.