visibility
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Свойство visibility
скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы <table>
.
Интерактивный пример
Чтобы скрыть и удалить элемент из разметки, установите свойству display
значение none
, вместо использования visibility
.
Синтаксис
/* Значения */
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 |
---|---|
Применяется к | все элементы |
Наследуется | да |
Обработка значения | как указано |
Animation type | видимость |
Формальный синтаксис
Интерполяция
Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений 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 |
---|
CSS Display Module Level 3 # visibility |
Совместимость с браузерами
BCD tables only load in the browser