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 скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы

.

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

visibility: visible;

visibility: hidden;

visibility: collapse;


  

    
Hide me

    
Item 2

    
Item 3

  




.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.

Синтаксис

css
/* Значения */
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

Формальное определение

Начальное значениеvisible
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано
Animation typeвидимость

Формальный синтаксис

visibility = 
  visible       |
  hidden        |
  force-hidden  |
  collapse

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

Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible, интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() со значениями вне [0, 1]) ближе к конечной точке.

Примеры

Базовый пример

HTML

html
Первый параграф виден.


Второй параграф не виден.



  Третий параграф также виден. Заметь, второй параграф занимает место.

CSS

css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

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

HTML

html

  

    1.1
    1.2
    1.3
  

  

    2.1
    2.2
    2.3
  

  

    3.1
    3.2
    3.3

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
CSS Display Module Level 3
# visibility
Scalable Vector Graphics (SVG) 2
# VisibilityControl

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