CSS-свойство visibility
CSS-свойство visibility определяет, виден ли элемент пользователю или скрыт. Примеры и возможность попробовать самостоятельно.
CSS-свойство visibility управляет отображением элемента — видим он или скрыт — не изменяя при этом макет: скрытый элемент сохраняет то пространство, которое он занимал бы, будучи видимым. На этой странице рассматриваются три основных значения (visible, hidden, collapse), отличия visibility от display и opacity, влияние скрытия контента на доступность, а также примеры для каждого значения.
Как работает visibility
Наиболее используемым значением является hidden. При установке visibility: hidden элемент становится невидимым, однако по-прежнему занимает своё место в макете — окружающий контент не смещается, чтобы заполнить образовавшийся промежуток. Элемент также исключается из порядка перехода по Tab и не объявляется программами чтения с экрана, поэтому он действительно скрыт от вспомогательных технологий, а не только визуально.
Одна из необычных особенностей: visibility наследуется, но дочерний элемент может переопределить это значение. Если родительский элемент имеет visibility: hidden, потомок с visibility: visible снова станет видимым, даже несмотря на то что его предок скрыт.
Значение collapse имеет особую обработку для элементов, связанных с таблицами (<tr>, <col>, группы строк и столбцов). Для них оно полностью удаляет строку или столбец — так же, как это делает display: none — и таблица перестраивается, закрывая образовавшийся промежуток, однако ширина столбцов по-прежнему вычисляется так, будто строка присутствует. Для элементов, не связанных с таблицами, collapse ведёт себя так же, как hidden.
Поддержка collapse для элементов таблиц в браузерах непоследовательна: некоторые движки обрабатывают его так же, как hidden (строка сохраняет пространство). Если нужно, чтобы строка исчезала во всех браузерах, используйте вместо этого display: none на элементе <tr>.
visibility vs. display vs. opacity
Все три свойства «скрывают» элемент, однако ведут себя по-разному — выбор неподходящего свойства является распространённой ошибкой.
| Свойство | Сохраняет пространство? | В дереве доступности? | Получает события? |
|---|---|---|---|
visibility: hidden | Да | Нет | Нет |
display: none | Нет (схлопывается) | Нет | Нет |
opacity: 0 | Да | Да | Да |
Используйте visibility: hidden, когда нужно зарезервировать место под элемент, но скрыть его содержимое (например, при переключении заглушки без смещения страницы). Используйте display: none, когда элемент должен исчезнуть и макет должен закрыть образовавшийся промежуток. Используйте opacity: 0 только тогда, когда нужен элемент, с которым по-прежнему можно взаимодействовать и который по-прежнему доступен программам чтения с экрана — например, элемент, который вы плавно показываете или скрываете.
Поскольку visibility поддерживает анимацию, его можно комбинировать с opacity для плавного исчезновения, завершающегося полностью скрытым, неинтерактивным элементом:
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Начальное значение | visible |
|---|---|
| Применяется к | Всем элементам (collapse применяется только к элементам, связанным с таблицами). |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | CSS2 |
| DOM Syntax | Object.style.visibility = "collapse"; |
Синтаксис
Синтаксис CSS-свойства visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Пример свойства visibility со значением "hidden":
Пример CSS-свойства visibility со значением hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Результат
Пример свойства visibility со значениями "visible" и "hidden":
Пример CSS-свойства visibility со значениями visible и hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Пример свойства visibility со значением "collapse":
Пример CSS-свойства visibility со значением collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| visible | В этом случае тег виден. Это значение по умолчанию для данного свойства. | Попробовать » |
| hidden | Это значение лишь визуально скрывает элементы. | Попробовать » |
| collapse | Используется с определёнными элементами таблиц (строками, группами строк, столбцами, группами столбцов) для полного удаления строк или столбцов. Для остальных элементов это значение имеет то же значение, что и "hidden". | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. | |
| revert | Откатывает свойство до унаследованного или начального значения в зависимости от применимости. | Попробовать » |
| revert-layer | Откатывает свойство до значения, заданного в предыдущем слое каскада. | Попробовать » |
Связанные свойства
- CSS
display— скрыть элемент и убрать его пространство из макета. - CSS
opacity— сделать элемент прозрачным, сохранив возможность взаимодействия с ним. - CSS
overflow— управлять контентом, выходящим за пределы своего блока. - CSS
position— перемещать элементы за пределы нормального потока.