visibility
Свойство visibility
скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы <table>
(en-US).
Интерактивный пример
Чтобы скрыть и удалить элемент из разметки, установите свойству display
значение none
, вместо использования visibility
.
Синтаксис
css
/* Значения */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Глобальные значения */
visibility: inherit;
visibility: initial;
visibility: unset;
Свойство visibility
указывается в качестве одного из значений ниже.
Значения
visible
-
Значение по умолчанию, элемент виден.
-
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства
visibility:visible
. Элемент не может получить focus (например, при навигации с помощью tabindex). collapse
-
* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью
применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.display
: none- Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
- Для других элементов
collapse
обрабатывается также, какhidden
Синтаксис
Интерполяция
Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible
, интерполируется как дискретный шаг, где значения временной функции от 0
до 1
для visible
и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier()
со значениями вне [0, 1]) ближе к конечной точке.
Примеры
Базовый пример
HTML
html
<p class="visible">Первый параграф виден.</p>
<p class="not-visible">Второй параграф не виден.</p>
<p class="visible">
Третий параграф также виден. Заметь, второй параграф занимает место.
</p>
CSS
css
.visible {
visibility: visible;
}
.not-visible {
visibility: hidden;
}
Пример с таблицей
HTML
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
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