visibility
==========

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

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

Чтобы скрыть и удалить элемент из разметки, установите свойству `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`

### Синтаксис
```

visibility =   
  visible   | (en-US)  
  hidden    | (en-US)  
  collapse    
  
```

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

Значения видимости изменяются между *видим* и *не видим*. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений `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 |
| --- |
| CSS Display Module Level 3 # visibility |

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.