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

Интерактивный пример

visibility: visible;

visibility: hidden;

visibility: collapse;

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

CSS

.visible {  visibility: visible;}.not-visible {  visibility: hidden;}

Пример с таблицей

HTML

<table>  <tr>    <td>1.1</td>    <td>1.2</td>    <td>1.3</td>  </tr>  <tr>    <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 не указан явно для вложенной таблицы.

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

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