---
title: visibility
slug: Web/CSS/visibility
tags:
  - CSS
  - Web
  - Расположение CSS
  - Свойства CSS
  - Шаблон
translation_of: Web/CSS/visibility
---
<div>{{CSSRef}}</div>

<p>Свойство <strong><code>visibility</code></strong> скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы {{HTMLElement("table")}}.</p>

<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>



<p>Чтобы скрыть и удалить элемент из разметки, установите свойству {{cssxref("display")}} значение <code>none</code>, вместо использования <code>visibility</code>.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css">/* Значения */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Глобальные значения */
visibility: inherit;
visibility: initial;
visibility: unset;
</pre>

<p>Свойство <code>visibility</code> указывается в качестве одного из значений ниже.</p>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>visible</code></dt>
 <dd>Значение по умолчанию, элемент виден.</dd>
 <dt><code>hidden</code></dt>
 <dd>Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства <code>visibility:visible</code>. Элемент не может получить focus (например, при навигации с помощью <a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a>).</dd>
 <dt><code>collapse</code></dt>
 <dd>
 <ul>
  <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li>
  <li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li>
  <li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li>
 </ul>
 </dd>
</dl>

<h3 id="Синтаксис_2">Синтаксис</h3>

{{csssyntax}}

<h2 id="Интерполяция">Интерполяция</h2>

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

<h2 id="Примеры">Примеры</h2>

<h3 id="Базовый_пример">Базовый пример</h3>

<h4 id="HTML">HTML </h4>

<pre class="brush: html">&lt;p class="visible"&gt;Первый параграф виден.&lt;/p&gt;
&lt;p class="not-visible"&gt;Второй параграф не виден.&lt;/p&gt;
&lt;p class="visible"&gt;Третий параграф также виден. Заметь, второй параграф занимает место.&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
</pre>

<p>{{EmbedLiveSample('Базовый_пример')}}</p>

<h3 id="Пример_с_таблицей">Пример с таблицей</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;1.1&lt;/td&gt;
    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
    &lt;td&gt;1.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="collapse"&gt;
    &lt;td&gt;2.1&lt;/td&gt;
    &lt;td&gt;2.2&lt;/td&gt;
    &lt;td&gt;2.3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3.1&lt;/td&gt;
    &lt;td&gt;3.2&lt;/td&gt;
    &lt;td&gt;3.3&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
</pre>

<p>{{EmbedLiveSample('Пример_с_таблицей')}}</p>

<h2 id="Соображения_доступности">Соображения доступности</h2>

<p>Использование <code>visibility</code> со значением <code>hidden</code> на элементе удалит его из <a href="/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C/What_is_accessibility#%D0%A1%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_API_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B0">дерева доступности</a>. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.</p>

<h2 id="Примечания">Примечания</h2>

<ul>
 <li>Поддержка <code>visibility:collapse</code> отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать <code>visibility:hidden</code> со столбцами и строками.</li>
 <li><code>visibility:collapse</code> может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока <code>visibility:visible</code> не указан явно для вложенной таблицы.</li>
</ul>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Определяет значение <code>collapse</code> применимым к flex элементам</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Определяет <code>visibility</code> как анимируемое.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("css.properties.visibility")}}</p>